자바 스크립트 HTML DOM - 변경 HTML

개요

HTML DOM 자바 스크립트는 HTML 요소의 내용을 변경할 수 있습니다.

JS는 기본 HTML의 DOM 요소 8 가지를 얻을 수

1. ID를 획득 (에서 getElementById)

document.getElementById('id');

용법

• 컨텍스트는 문서해야합니다.
• 매개 변수를 전달하며, 입력 문자열의 파라미터는, 그 ID의 소자를 얻을 수있다.
• 는 null를 찾을 수없는 유일한 요소 반환 값을 얻을 수 있습니다.

2. 이름 속성합니다 (getElementsByName)으로

document.getElementsByName('name');

용법

• 컨텍스트는 문서해야합니다.
• 매개 변수를 전달해야한다 내용, 매개 변수는 요소 이름 속성을 얻는 것입니다.
• 반환 값은 반환에게 하늘의 배열을 찾을 수 없습니다, 클래스의 배열입니다.

3. 태그 이름으로 (getElementsByTagName)

var obj = document.getElementsByTagName('div');
for(let i = 0; i<obj.length; i++){
        obj[i].onclick = function(a){
            console.log(i)
        }
    }
    document.getElementsByTagName('p');
	var oDiv = document.getElementById('divId');
	oDiv.getElementsByTagName('p');

용법

• 상황에 맞는 문서가 될 수 있습니다, 그것은 또한 요소가 될 수 있으며,이 요소에주의를 기울이 있어야합니다.
• 매개 변수는 소자, 대소 문자 구분 태그의 name 속성을 획득한다.
• 반환 값은, 배열 타입 찾을 수없는 하늘의 배열을 돌려줍니다
• 얻어진 결과는 클래스 배열이다.
• 문서 클래스에 ElementsByTagName 방법은 프로토 타입 클래스의 요소는 프로토 타입입니다뿐만 아니라 때문에 문서 및 요소는이 방법을 사용할 수 있도록 문서의 문맥은, 일 필요는 없습니다

4. 클래스 이름 (getElementsByClassName)

var obj1 = document.getElementsByClassName('animated');

사용 (getElementsByTagName과 유사) :

• 컨텍스트 문서 일 수 있고, 그 요소가 될 수있다.
• 매개 변수는 요소의 클래스 이름입니다.
• 반환 값은 반환에게 하늘의 배열을 찾을 수 없습니다, 클래스의 배열입니다.
• 얻어진 결과는 클래스 배열이다.

5. 선택기에 의해 요소 (querySelector)를 얻는

document.querySelector('.animated')

용법

• 컨텍스트 문서 일 수 있고, 그 요소가 될 수있다.
• 매개 변수는 같은 선택 : "사업부 클래스 이름.".
• 반환 값은 첫 번째 요소에 도착.

6. 선택자 요소 세트 (querySelectorAll)를 얻는

document.querySelector('.animated');

용법

• 컨텍스트 문서 일 수 있고, 그 요소가 될 수있다.
• "DIV .ClassName과"매개 변수는 같은 선택됩니다.
• 리턴 값은 배열 형이다.

7. 방법은 HTML (document.documentElement) 얻을 수
   document.documentElement HTML이 라벨을 얻을 수 있도록 설계된다.
8. 취득 방법 본체 (는 document.body)
   는 document.body 본문이 라벨을 획득하도록 설계된다.

그들의 상속 :
HTMLDivElement와>는 HTMLElement> 요소> 노드>의 EventTarget
HTMLDocument의> 문서> 노드>의 EventTarget