집 > 기사 > 웹 프론트엔드 > 자식, 부모, 형제 노드를 얻기 위한 JS 방법 요약

자식, 부모, 형제 노드를 얻기 위한 JS 방법 요약

韦小宝원래의: 2018-01-22 09:59:071753검색

이 글에서는 주로 JS에서 자식 노드, 부모 노드, 형제 노드를 얻는 방법과 JS에서 형제 노드를 얻는 두 가지 방법을 요약해서 소개합니다. JS에 익숙한 친구들은 이 글을 참고하시면 됩니다

실제 개발에서 우리가 종종 페이지를 얻어야 합니다. 특정 html 요소에서 해당 요소의 스타일, 콘텐츠 속성 등을 동적으로 업데이트합니다. 알아보기 상위 노드의 첫 번째 하위 노드

parentObj.lastChild 알려진 상위 노드의 하위 노드 배열을 가져옵니다(여기서는 IE 7의 모든 직계 하위 노드를 가져옵니다)

parentObj.children 获取已知节点的直接子子点节组组 (在 IE7 中中和和和 hildnodes 效果一样一样一样））））

parentObj.

getElementsByTagName (tagname) 返回已已知子节点节点中类型为指定值的子节点数组通过通过临近节点节点 Get Sibler 노드를 얻습니다. 알려진 노드의 이전 형제 노드 Neighbournode.nextsibing은 알려진 노드의 다음 형제 노드를 얻을 수 있습니다.

위 메소드는 기본적으로 parentObj.firstChild.firstChild.firstChild와 같이 재귀적으로 사용될 수 있습니다... 하지만 이러한 코드에는 어리석은 러시가 있습니다. .

　

Extension

확장하기 전에 노드에 대한 기본 지식을 알아야 합니다. Dom 노드에서는 각 노드의 유형이 다릅니다

W3C 사양에서 일반적으로 사용되는 Dom 노드 유형은 다음과 같습니다

노드 유형	설명	Value
요소 노드	모든 HTML 태그이들은 모두 ID, 클래스, 이름 등과 같은 요소 노드	1
속성 노드	요소 노드(HTML 태그)의 속성입니다.	2
텍스트 노드	Element 노드 또는 속성 노드 Text content	3
Comment node	는 d8f04bce924a5373c7052ba2014e1df6	8
Document node	형식의 문서 주석입니다. 전체 문서(Dom 트리) 루트 노드, 즉 문서)	9

노드 이름에 대해, 노드의 종류에 따라 이름이 다릅니다

노드 유형	노드 이름
요소 노드의 이름	HTML(대문자)
속성 노드	속성 이름
텍스트 노드	값은 항상 #text
Document 노드	값은 항상 #document

입니다.

nodeType(노드 유형), nodeName(노드 이름), nodeValue(노드 값)을 통해 각각 노드 유형, 노드 이름 및 노드 값을 반환할 수 있습니다(예: 요소 노드는 1을 반환하고 속성 노드는 반환 2)

JS 형제 노드를 얻는 두 가지 방법

방법 1: 먼저 상위 요소의 하위 요소를 통해 자신을 포함하는 "형제 요소"를 찾은 다음 자신을 제거합니다.

function sibling(elem){
 var a = [];
 var b = elem.parentNode.children;
 for (var i = 0 ; i < b.length ; i++){
  if(b[i] !== elem) a.push(b[i]);
 }
 return a;
}

방법 2: 구현 jQuery의 메서드는 먼저 해당 요소의 첫 번째 하위 요소를 검색한 다음 계속해서 다음 인접 요소를 찾아 스스로 판단하고 제거합니다.

siblings:function(elem)
{
  return JQuery.sibling(elem.parentNode.firstNode,elem);
}
JQuery.sibling = function(n,elem){
  var r = [];
  for (;n;n= n.nextSibling){
  if(n.nodeType == 1 && （！elem || elem != elem))
  r.push(n);
 } 
  return r;
}

이 코드는 jQuery 1.2 이상 버전에서 찾을 수 있습니다. 제가 살펴본 jQuery 1.2.3 버전에서 이 코드는 1800행에서 찾을 수 있습니다:

이 메서드를 독립적으로 사용할 수 있는 함수로 변환:

fucntion sibling(elem){
 var r = [];
 var n = elem.parentNode.firstChild;
 for(;n;n = n.nextSibling) {
  if(n.nodeType === 1 && n !== elem) {
   r.push(n);
  }
 } 
  return r;
}

분명히 이 방법을 사용하여 특정 노드의 형제 요소를 찾으면 재귀의 중복을 쉽게 피할 수 있습니다.

모든 요소 하위 노드 가져오기

JavaScript에서는 하위를 통해 모든 하위 노드를 가져올 수 있습니다(하위 노드도 아닌 HTML만 반환). 이는 거의 모든 브라우저에서 지원되지만 일부 Firefox 버전에서는 지원됩니다. 그것을 지원하지 않습니다.

　참고: IE에서는 하위 항목에 주석 노드가 포함되어 있습니다

　따라서 특별한 상황이 있기 때문에 때로는 위의 지식을 사용하여 nodeType 속성으로 필터링할 수 있도록 요소 노드만 가져와야 합니다. nodeType == 1 노드는 요소 노드입니다.

아래에서는 에서 함수 를 정의하여 모든 요소 하위 노드를 가져옵니다.

var getChildNodes = function(elem) {
 var childArr = elem.children || elem.childNodes, 
   childArrTem = new Array();
  for (var i = 0 ; i < childArr.length; i ++ ) {
   if (childArr[i].nodeType == 1){
   childArrTem.push(childArr[i]); 
  }
 } 
 return childArrTem;
}

모든 상위 노드 가져오기

마찬가지로 현재 노드의 모든 상위 노드를 가져올 수 있습니다.

function getParents （elem）{
 var parents = [];
 while(elem.parentNode){
  parents.push(elem.parentNode)
  elem = elem.parentNode;
 } 
 return parents;
}

이 방법으로 우리는 DOM 노드를 승인하고 결국 문서 객체를 얻을 수 있습니다. 상위 레이어만 본문으로 가져오면 다음과 같이 판단을 변경할 수 있습니다. while（elem.parentNode && elem.parentNode.tagName == 'BODY'

에서 제공되는 방법 및 관련 지식을 기반으로 합니다. 노드를 얻기 위한 JavaScript, 우리는 다양한 캡슐화 방법을 작성할 수 있습니다. 노드를 얻는 방법은 몇 개나 작성할 수 있습니까?

운영 노드의 일부 캡슐화를 작성한 후에는 jQuery에서 Dom 작업노드 메소드의 소스 코드를 보는 것이 훨씬 쉬울 것입니다.

자식, 부모, 형제 노드를 얻기 위한 JS 방법 요약

관련 기사