Javascript-DOM 요약

DOM 요약

1. DOM의 의미

DOM은 Document Object Model의 약자입니다. W3C DOM 사양에 따르면 DOM은 페이지의 다른 표준 구성 요소에 액세스할 수 있는 브라우저, 플랫폼 및 언어 독립적인 인터페이스입니다.

DOM의 노드:

* 전체 문서는 문서 노드입니다.

* 그리고 각 HMTL 태그는 요소 노드(divElement)입니다.

* 라벨의 텍스트는 텍스트 노드(div)입니다.

* 라벨의 속성은 속성 노드(divAttribute)입니다.

* 모든 것이 노드입니다

2. 요소 찾기

1.

document.getElementById('id name');

2. 유형 이름으로 여러 태그 가져오기

var allA = document.getElementsByClassName('a ') ;

3. 태그 이름(a 또는 형식) 속성을 통해 여러 태그 가져오기

document.getElementsByName('corresponding name');

4. 태그 이름으로 여러 태그 가져오기

var allDiv = document.getElementsByTagName('DIV')

5 , 특정 태그 가져오기 선택기를 통해 태그를 지정합니다(태그가 여러 개 있는 경우 첫 번째로 찾은 태그가 반환됨)

var aDiv = document.querySelector('div');

6 , 선택기를 통해 여러 태그 가져오기

document.querySelectorAll('selector name');

3.DOM node-element

1. 태그를 포함한 모든 텍스트 가져오기

li

와 같은 경고(태그 이름.outerHTML) 2. dir

console.dir(레이블)을 통해 노드에 대한 모든 속성 정보를 볼 수 있습니다. name) li

3.for에서는 노드에 대한 모든 속성과 메서드를 볼 수 있습니다

4. 이전 또는 다음 가져오기 노드의 요소 노드

alert(li1.previousElementSibling.innerText);

alert(li1.nextElementSibling.innerText);

5.. 노드의 이전 또는 다음 요소 노드 가져오기(빈 텍스트 노드일 수 있음)

alert(li1.previousSibling.nodeName);

alert(li1.nextSibling.nodeName);

6. ul에서 첫 번째 하위 노드를 가져옵니다

alert(ul.firstChild);

ul에서 첫 번째 하위 요소를 가져옵니다! ! ! ! 노드

alert(ul.firstElementChild);

alert(ul.lastElementChild.innerText);

7. 새 li 노드 생성

var newLi = document.createElement('li');

newLi.innerText = 'JQuery';

newLi.style.color = 'red';

8. ul

ul.appendChild(newLi);

의 끝에 하위 노드를 추가합니다.9.

ul.replaceChild(newLi,li1);

10. 하위 노드 제거(제거할 노드는 ul의 하위 노드여야 함)

ul.removeChild(newLi.previousElementSibling);

11. 특정 하위 노드에 새 노드를 삽입합니다.

ul.insertBefore(newLi,li1);

12. ul

'beforeBegin', 'afterBegin', 'beforeEnd' , 'afterEnd'

ul.insertAdjacentElement('afterEnd',newLi);

13. HTML 코드 삽입

ul.insertAdjacentHTML('beforeBegin ','

ppppp

');

14. 텍스트 삽입

ul.insertAdjacentText('afterBegin','afterbegin')

4.DOM 노드 텍스트

1.for traverse

for (var i = 0; i

카멜 표기법을 사용하여 이름 지정 변수 또는 함수 goShoppingToMall

var aNode = ulChild[i];

현재 순회하는 메모리 포인트가 특정 시스템의 노드 유형인지 여부를 판단합니다. 요소 ELEMENT 속성 ATTRIBUTE 텍스트 TEXT

if (aNode.nodeType == Node.ELEMENT_NODE) ​​​​{

매크로 정의 숫자를 사용하여 노드 유형 1, 요소 2, 속성 노드 3, 텍스트 노드

Alert(aNode. nodeType);

Alert(aNode.nodeName);

}

}

2.children 내부 자식을 가져옵니다! ! ! 요소! ! ! 노드

childNode는 내부 하위 노드(텍스트 노드 포함)를 가져옵니다.

var cssText = ul.children[1].childNodes[0];

텍스트 노드를 가져옵니다.

alert(cssText.nodeValue);

alert(cssText.textContent);

데이터 추가

cssText . AppendData('CSS');

a: 어떤 문자부터 시작, 0부터 시작

b: 데이터를 삭제하는 데 걸리는 시간

cssText.deleteData(3, 1 );

4. 특정 범위의 문자를 다른 문자 범위로 바꿉니다

cssText.replaceData(1,2,'CCCCC');

5. 특정 위치에 특정 문자 삽입(삽입 후 위치 고려)

cssText.insertData(2,'A');

5. 제거 텍스트 노드의 텍스트

cssText.remove();

5.DOM node-attributes

1. 모든 속성

경고(a. 속성.길이);

2. 요소 노드에서 get 메소드를 직접 호출하여

alert(a.getAttribute('title'));

3. set 메소드를 사용하여 속성 값을 수정할 수도 있습니다.

a.setAttribute('title','Click me');

4. 특정 속성의 값을 빠르게 가져오는 방법

alert(a.title);

a.title = 'Don't click more';

5. 단축키 설정

alt + Shift + A 브라우저에서 테스트

a.accessKey = 'A';

6. 라벨 설정 편집 가능 여부

a.contentEditable = 'true';

7. 요소에 속성이 포함되어 있는지 확인

alert( a.hasAttribute ('title'))

8.

alert(a.className)

요소 유형을 가져옵니다. 요소 유형을 직접 수정 가능 이전 유형이 손실됩니다

a.className = 'bigSize yellowText';

유형 목록에 새 유형을 직접 추가하면 그렇지 않습니다. 이전 유형에 영향

a.classList.add('border');

속성 제거

a.classList.remove('bigSize');

10. 특정 유형을 사용할지 여부를 전환

존재하지 않으면 제거

a.classList. ggle('bigSize');

11. js를 통해 방금 설정한 스타일은

으로 얻을 수 있습니다. 🎜>

스타일 시트(스타일 태그)에 작성되었습니다. js는

a.style.padding = '20px';

alert(a.style.padding);

12. 계산 후 스타일 가져오기(속성, 스타일 시트 및 js에서 수정된 스타일 포함)

var aStyle = window.getCompulatedStyle(a,':after ');

경고( aStyle.border);