DOM_Basic 지식에 따른 노드 속성 및 작업 요약

WBOY
풀어 주다: 2016-05-16 18:53:11
원래의
923명이 탐색했습니다.

속성:
1.nodeName
tagName과 동일한 노드 이름입니다. 속성 노드는 속성 이름을 반환하고 텍스트 노드는 #text를 반환합니다. nodeName은 읽기 전용입니다.
2 .nodeType
값: 1, 요소 노드 2, 속성 노드, 텍스트 노드. nodeType은 읽기 전용입니다.
3 .nodeValue
이 노드의 값을 나타내는 문자열을 반환합니다. 요소 노드는 null을 반환하고, 속성 노드는 속성 값을 반환하며, 텍스트 노드는 텍스트를 반환합니다. nodeValue는 읽고 쓸 수 있지만 요소 노드에는 쓸 수 없습니다. 일반적으로 텍스트 노드의 값을 설정하는 데에만 사용됩니다.
4 .childNodes
하위 노드 배열을 반환합니다. 텍스트 및 속성 노드의 childNodes는 항상 null입니다. hasChildNodes()를 사용하여 하위 노드가 있는지 확인할 수 있습니다. 읽기 전용 속성입니다. 노드를 삭제하고 추가하려면 childNodes 배열을 작동하는 방법을 사용할 수 없습니다.
5 .firstChild
첫 번째 하위 노드를 반환합니다. 텍스트 및 속성 노드에는 하위 노드가 없으며 빈 배열을 반환합니다. 이는 이러한 두 노드에 대한 특수 처리입니다. 요소 노드의 경우 하위 노드가 없으면 null이 반환됩니다. firstChild=childNodes[0].
6 .lastChild
마지막 하위 노드를 반환합니다. 반환 값은 firstChild와 동일합니다. 3자 처리에 대해서는 위를 참조하세요. 등가 방정식이 있습니다: lastChide=childNodes[childNodes.length-1].
7 .nextSibling()
노드의 다음 형제 노드를 반환합니다. 다음 형제 노드가 없으면 null을 반환합니다. 읽기 전용 속성이며 애플리케이션에서 변경할 수 없습니다.
8 .previousSibling()
노드의 이전 형제 노드를 반환합니다. 위와 동일합니다.
9 .parentNode()
노드의 상위 노드를 반환합니다. document.parentNode()는 null을 반환합니다. 요소 노드에만 하위 노드가 있고 문서 이외의 모든 노드에는 상위 노드가 있기 때문에 요소 노드를 반환합니다. parentNode(), 또 다른 읽기 전용 기능입니다.


작업:
1. 노드 생성
createElement('tagName')
예: var oP=document.createElement('p' ) ;

태그를 생성했습니다.
2. 텍스트 노드 생성
createTextNode('text');
예: var oText=document.createTextNode('This is a paragh!'); 🎜 >3. 하위 노드 추가
appendChild(o); 여기서 o는 노드 객체입니다. 예: document.body.appendChildNode(o); 본문 끝에
document.forms[0].appendChildNode(o)를 추가합니다. end of the form 내부 끝이 추가되고 전체 oP는 노드 개체입니다.

4. 문서 조각 만들기

createDocumentFragment(); 예: var oF=document.createDocumentFragment()
5. 🎜 >removeChild(oP);
예: document.body.removeChild(oP)는 본문에서 oP 노드 개체를 제거합니다.
6. 노드 교체
replaceChid(newOp, targetOp); 대상 노드 targetOp를 newOp로 교체
예: document.body.replayChild(oPa,oPb).ps: 방법 ? 그래서 특별합니까? 소스 및 대상 피연산자가 모두 호출자 document.body인 이유는 무엇입니까? 먼저 기억하고 방해하지 마십시오. ——교체되는 항목은 body의 하위 노드여야 합니다. document.body를 대체하려면 다른 요소를 사용할 수 있습니다. 대체되는 항목은 이 요소의 하위 노드여야 합니다.
7. 노드 삽입
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp)
8. 🎜>setAttribute('key','value'); getAttribute('key','value')

9.
cloneNode(참/거짓)

관련 라벨:
dom
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿