노드의 주요 유형에는 요소 노드, 속성 노드 및 텍스트 노드가 있습니다.
DOM의 가장 중요한 것은 요소 노드 및 속성 노드를 추가, 삭제, 수정 및 확인하는 것입니다. 다음은 요소 노드에 대한 작업과 속성 노드에서 각각 작업을 소개합니다.
요소 노드
확인하다
DOM을 추가, 삭제 및 수정하기 전에 먼저 해당 요소를 찾아야합니다. 특정 검색 방법은 다음과 같습니다.
getElementById () // 단일 노드 가져 오기 getElementsByTagName () // 노드 배열 가져 오기 NODELIST GETELEMENTSBYNAME () // 노드 어레이 NODELIST 가져 오기
동시에 요소 노드의 속성을 사용하여 부모 및 자식 노드 및 텍스트 노드를 얻을 수도 있습니다.
어린이 노드
node.childnodes // 자식 노드 목록 Nodelist를 가져옵니다. 라인 브레이크는 브라우저에서 텍스트 노드로 계산됩니다. 이러한 방식으로 노드 목록을 얻는 경우 필터링이 필수 노드입니다 .FirstChild // 첫 번째 자식 노드 노드를 반환합니다. LASTCHILD // 마지막 자식 노드를 반환합니다.
부모 노드
node.parentNode // 상위 노드 노드를 반환합니다. ownerDocument // 조상 노드를 반환합니다 (전체 문서)
동포 노드
node.previousSibling // 이전 노드를 반환합니다.
증가하다
새 노드를 추가하려면 먼저 노드를 생성 한 다음 새로 생성 된 노드를 DOM에 삽입해야합니다. 따라서 다음은 노드를 생성하고 노드를 삽입하는 방법이며 노드 생성에도 노드를 복제하는 방법도 도입됩니다.
노드를 만듭니다
CreateElement () // 지정된 태그 이름에 따라 새 요소 노드 생성
코드 스 니펫 생성 (DOM의 자주 새로 고침을 피하려면 먼저 코드 스 니펫을 작성한 다음 모든 노드 작업을 완료 한 후 DOM에 추가 할 수 있습니다).
createocumentfragment ()
복제 노드
clonednode = node.clonenode (boolean) // 매개 변수는 하나 뿐이며 부울 값으로 전달되며 실제 하위 노드를 노드 아래에서 복사하는 것을 의미합니다. 거짓은 노드 만 복사하는 것을 의미합니다
노드를 삽입하십시오
/*노드 삽입*/parentnode.appendChild (ChildNode); // 자식 노드 목록의 끝에 새 노드를 추가하여 parentnode.insertbefore (newnode, targetNode); // newNode를 targetNode에 삽입/*html code 삽입*/node.insertadjacenthtml ( 'prectionbegin', html); // 코드 node.insertadjacenthtml 삽입 ( 'Afterbegin', html); // 코드 node.insertadjacenthtml 삽입 ( 'Afterbegin', html); // 코드 node.insertadjacenthtml 삽입 ( 'preciorend', html); // 요소 node.insertadjacenthtml의 마지막 자식 요소 뒤에 코드를 삽입합니다 ( 'afterend', html); // 요소 뒤에 코드를 삽입합니다
노드를 교체하십시오
parentnode.replace (NewNode, TargetNode); // TargetNode를 NewNode로 바꿉니다
삭제
노드를 제거하십시오
parentnode.removechild (Childnode); // 대상 노드 노드를 제거합니다. // 상위 노드를 모르고 사용합니다
속성 노드
조작 속성 노드는 DOM 스타일을 추가, 삭제, 수정 및 확인해야합니다. 인라인 스타일, 인라인 스타일 및 외부 스타일을위한 다양한 운영 방법이 있습니다. 다양한 방법으로 얻은 스타일은 읽기 쉬운, 쓰기 가능하며 읽기 전용으로 나뉩니다.
CSS 스타일을 직접 얻으십시오
node.style.color // 읽을 수 있거나 쓰기 가능합니다
스타일 자체의 속성과 방법
node.style.csstext // 노드 인라인 스타일 node.style.length // 인라인 스타일 node.style.item (0)의 수를 가져옵니다.
요소 스타일을 얻고 수정하십시오
HTML5는 요소에 대한 새로운 속성을 제공합니다. 클래스리스트는 요소 스타일 시트의 추가, 삭제, 수정 및 검색을 구현합니다. 작업은 다음과 같습니다.
node.classlist.add (값); // 지정된 클래스 node.classList.contrains (값)를 추가합니다. // 요소에 지정된 클래스가 포함되어 있는지 결정합니다. truenode.classlist.remove (value)가있는 경우; // 지정된 클래스 node.classlist.toggle (value)을 삭제합니다. // 특정 클래스가 있으면 삭제하고 지정된 클래스를 추가하십시오.
DOM 특성을 수정하는 방법
node.getAttribute ( 'id') // node.setattribute ( 'id') // node.removeattribute () set set node.attributes // 모든 dom feations를 가져옵니다.
읽기 전용 방법
GetComputedStyle은 창의 방법입니다. 현재 요소의 모든 최종 사용 CSS 속성 값을 얻을 수 있지만 읽기 전용입니다. 두 개의 매개 변수가 있는데, 첫 번째 매개 변수는 들어오는 노드이며, 두 번째 매개 변수는 전달할 수 있습니다 : 호버, 블러 등.
그러나 IE는 getComputedStyle 메소드를 지원하지 않으며 현재 스타일을 사용하여 호환성을 유지할 수 있습니다.
Window.getComputedStyle? window.getComputedStyle (노드, NULL) : Node.CurrentStyle
JavaScript dom 노드 작동 방법의 위의 요약은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.