이 글은 주로 JS에서 노드를 얻는 방법과 호환성 캡슐화를 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

Node

웹 페이지의 콘텐츠는 태그로 구성됩니다(완전히 정확하지는 않음)
웹 페이지의 콘텐츠는 노드로 구성됩니다.
Element 노드 Attribute 노드 Text 노드 Comment 노드 Document 노드
node의 세 가지 요소

• Node 유형: nodeType
• 노드 이름: nodeName
• 노드 값: nodeValue

节点类型（nodeType） 节点名称（ nodeName） 节点值（nodeValue） 元素节点 1 标签名大写 null属性节点 2 属性名 属性值 文本节点 3 #text 文本 注释节点 8 #comment 注释内容 文档节点 9 #document null

부모 노드 가져오기

부모 노드 가져오기:child element.parentNode

자식 요소 가져오기

  
千与千寻
 
哈儿的移动城堡
 龙猫 
悬崖上的金鱼姬
 

var box2 = document.getElementById("box2");console.log(box2.parentNode);

얻은 부모 노드는 요소여야 합니다. 노드(요소만 하위 노드가 있음)

페이지에 하위 요소 추가(상위 요소)Parent element.appendChild(하위 요소)

모든 하위 노드 가져오기

 
千与千寻
 
哈尔的移动城堡
 
 

1. 노드는 형제 자매 노드

  
千与千寻
 
哈儿的移动城堡
 龙猫 
悬崖上的金鱼姬
 

get 요소 :

var box = document.getElementById("box");var box2 = document.getElementById("box2");

console.log(box2.previousSibling); // 文本节点

next node

console.log(box2.nextSibling); // 文本节点

console.log(box2.previousElementSibling);

console.log(box2.nextElementSibling);

ie8은 형제 요소를 얻는 것의 작동을 지원하지 않습니다. , 결과는 정의되지 않았으며 IE8에는 대안이 없습니다

@return 노드: 요소 노드를 반환합니다

function getPreviousElement(ele) { // 能力检测 if(ele.previousElementSibling) { // 谷歌火狐 return ele.previousElementSibling; } else { // IE8 // 获取上一个节点 : null 元素 文本 注释 var node = ele.previousSibling; // 循环次数不确定 // 1. node必须存在, 不是null, 2. node不是元素节点 while(node != null && node.nodeType != 1) { node = node.previousSibling } // node == null 或者 node.nodeType == 1 return node; } } console.log(getPreviousElement(li2));

2. 첫 번째 하위 노드와 하위 요소를 가져옵니다.

parent element.firstChild

parent element.firstElementChild

var box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);

로그인 후 복사

첫 번째 하위 요소의 호환성 패키지 가져오기

function getFirstElementChild(ele) { if (ele.firstElementChild != undefined) { return ele.firstElementChild; } else { var nodeFirst = ele.firstChild; while (nodeFirst && nodeFirst.nodeType == 1) { nodeFirst = nodeFirst.nextSibling; } return nodeFirst; } } console.log(ul.firstElementChild);

마지막 하위 노드 가져오기:

Parent element.lastElementChild

var box = document.getElementById("box");console.log(box.lastChild);console.log(box.lastElementChild);

로그인 후 복사

function firstElement(ele) { if (ele.firstElementChild) {//谷歌和火狐 return ele.firstElementChild; } else {//IE8 var node = ele.firstChild; while (node != null && node.nodeType != 1) { node = node.nextSibling; } return node; } } console.log(firstElement(ul))

매개변수가 있는 경우:

매개변수가 true인 경우 심층 복제를 의미합니다. 이 태그와 태그에 포함된 모든 콘텐츠를 복제할 수 있습니다.

매개변수가 false이면 얕은 복제를 의미합니다. 현재 태그만 복제할 수 있으며 이 태그의 콘텐츠는 복제되지 않습니다.

• 매개변수가 없습니다. 기본값은 false입니다.

   I'm a big box 
  我是标题
   

  로그인 후 복사

  var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);

  로그인 후 복사

• 복제된 노드는 메모리에 있는 복사본 하나만 복제하며 페이지에 추가되지 않습니다. 수동으로만 추가할 수 있습니다.

복제된 huibaid도 복제됩니다

• 페이지 ID의 복제본을 수정해야 합니다. 요소 ID

  Newbox.id = "Newbox"

  로그인 후 복사
타오바오 케이스, 숨겨진 QR 코드

•       
    
   
  x
   
   
     

  로그인 후 복사

  관련 권장 사항: [

  JavaScript 비디오 튜토리얼]

  위 내용은 JS를 구문 분석하여 노드를 얻고 호환성을 위해 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!