노드 간 관계 액세스

2258 단어 html브라우저IE
서브노드에 액세스하려면 다음과 같이 하십시오.
1. someNode.childNodes:
NodeList 대상을 되돌려줍니다. item (i) 방법으로 요소에 접근할 수 있습니다.이것도 클래스 그룹의 대상이기 때문에'[i]'를 통해 안의 원소를 얻을 수 있고,length 속성을 통해 원소 개수를 얻을 수 있다.
2. someNode.hasChildNodes():
하위 노드가 존재하는지 판단합니다.true 노드 아래에 하위 노드가 있으면.
3. 첫 번째 노드와 마지막 노드도 썸노드를 직접 통과할 수 있다.firstChild、someNode.lastChild에서 가져옵니다.
4. 예:
    var nd = someNode.childNodes[i];
    var nd = someNode.childNodes[childNodes.length - 1];

상위 노드에 액세스하려면 다음과 같이 하십시오.
someNode를 통해서.parentNode 액세스
형제 노드 방문:
previous Sibling (첫 번째 노드의previous Sibling은null) 과next Sibling (마지막 노드의next Sibling은null) 을 통해.
        
        if (someNode.nextSibling === null){
		alert(' .');
	} else if (someNode.previousSibling === null){
		alert(' .');
	}

분명히 하위 노드만 있다면previous Sibling,next Sibling은 모두null입니다.
ownerDocument 속성
각 노드에는 문서 자체를 가리키는 속성 ownerDocument가 있습니다.
alert(document.getElementById('div1').ownerDocuement === document)//true

설명:
    1.하위 노드, 부 노드, 형제 노드 간의 관계 속성은 모두 읽기만 하는 것이기 때문에 그들 간의 관계를 바꾸어야 한다. 우리는 appendChild,replaceChild 등의 방법을 따로 호출해야 한다.
    2.모든 노드가 이 몇 가지 관계를 가진 것은 아니다. 예를 들어 텍스트 노드는 더 이상 하위 노드를 가질 수 없다.
    3.childNodes 속성에 액세스할 때 다음 HTML 코드가 있는 경우 주의하십시오.

<ul id='myList'>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>

<ul id='myList2'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
 

위 코드에서 myList와 myList2는 모두 같은 하위 노드를 가지고 있는 것처럼 보이지만 브라우저에 따라childNodes는 다르다.
IE에서 myList와 myList2, childeNodes의 길이는 모두 3, 즉 세 개의 리 노드이다.
다른 브라우저에서 myList는 3개의 리 노드와 그들 사이의 4개의 공백 텍스트 노드를 포함하는 7개의 하위 노드를 가지고 있다.
따라서 childNodes를 통해 하위 노드를 처리하려면 이전의 노드 판단을 처리하는 것이 필요하다.

for (var i=0, len=element.childNodes.length; i < len; i++){
	// element node
	if (element.childNodes[i].nodeType == 1){
	//do processing
	}
}  

좋은 웹페이지 즐겨찾기