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

이 글에서는 주로 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	는	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 작업노드 메소드의 소스 코드를 보는 것이 훨씬 쉬울 것입니다.

관련 권장 사항:

자동 음악 전환의 JavaScript 구현 및 회전식 예제 튜토리얼

JavaScript 플러그인 Tab에 대한 자세한 설명

JavaScript 함수 바인딩 사용 분석

위 내용은 자식, 부모, 형제 노드를 얻기 위한 JS 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!