Javascript는 하위 노드를 가져옵니다.
모든 하위 노드 가져오기
Javascript에서는 하위를 통해 모든 하위 노드를 가져올 수 있습니다.
어린이는 HTML 노드만 반환하고 텍스트 노드도 반환하지 않습니다. 비록 표준 DOM 속성은 아니지만 거의 모든 브라우저에서 지원됩니다.
구문:
nodeObject.children
이 중 nodeObject는 노드 객체(요소 노드)이고 반환 값은 모든 하위 노드의 컬렉션(배열)입니다.
참고: IE에서는 하위 항목에 주석 노드가 포함되어 있습니다.
예를 들어, id="demo"인 노드의 모든 하위 노드를 가져오려면:
document.getElementById("demo").children;일반적으로 다음을 통해 선택할 수 있는 요소 노드를 가져오고 싶습니다. nodeType 속성, nodeType==1인 노드는 요소 노드입니다.
아래에서는 모든 요소 하위 노드를 가져오는 함수를 사용자 정의합니다.
var getChildNodes=function(ele){
var childArr=ele.children,
childArrTem=new Array(); // 临时数组，用来存储符合条件的节点
for(var i=0,len=childArr.length;i<len;i++){
if(childArr[i].nodeType==1){
childArrTem.push(childArr[i]); // push() 方法将节点添加到数组尾部
}
}
return childArrTem;
}예를 들어 id="demo"인 노드의 모든 요소 하위 노드를 가져옵니다.
<div id="demo">
<!-- 这里是注释 -->
<div>子节点一</div>
<div>子节点二</div>
<div>子节点三</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
var childArr=getChildNodes(this);
alert("元素子节点的个数为："+childArr.length);
}
</script>다음 데모를 참조하세요
또한 W3C 사양에서는 하위 노드 컬렉션을 반환하는 표준 속성인 childNodes를 통해 하위 노드를 얻습니다. 자식이 반환하는 노드 유형보다 더 광범위한 HTML 노드, 텍스트 노드, 주석 노드 등을 포함하는 지정된 요소입니다.
다음은 childNodes에 대한 브라우저 지원 목록입니다.
코드 호환성을 향상하고 개별 브라우저가 child 또는 childNodes를 지원하지 않는 것을 방지하기 위해 이 경우 , 다음과 같이 코드를 작성할 수 있습니다.
var childArr=ele.children || ele.childNodes
위의 getChildNodes() 함수를 약간 수정합니다.
var getChildNodes=function(ele){
var childArr=ele.children || ele.childNodes,
childArrTem=new Array(); // 临时数组，用来存储符合条件的节点
for(var i=0,len=childArr.length;i<len;i++){
if(childArr[i].nodeType==1){
childArrTem.push(childArr[i]);
}
}
return childArrTem;
}첫 번째 하위 노드 가져오기
Javascript에서는 firstChild를 전달할 수 있습니다. 첫 번째 자식 노드를 얻으려면.
구문:
nodeObject.firstChild
그 중 nodeObject는 노드 객체(요소 노드)입니다.
IE8.0 이하의 브라우저는 노드 사이의 공백 노드(공백, Enter 및 Tab 키)를 무시합니다. W3C 사양을 따르는 브라우저(Chrome, FireFox, Safari 등)는 이러한 공백을 무시합니다. 텍스트 노드로.
예를 들어 첫 번째 하위 노드를 가져옵니다.
<div id="demo">
<div>子节点一</div>
<div>子节点二</div>
<div>子节点三</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(
"第一个子节点："+this.firstChild+"\n"+
"第一个子节点的类型是："+this.firstChild.nodeType+"\n"+
"第一个子节点的名称是："+this.firstChild.nodeName
);
}
</script>예시 데모
IE8.0 이하의 브라우저에서는 다음이 표시됩니다.
첫 번째 하위 노드: [object HTMLDivElement]
첫 번째 하위 노드 유형: 1
첫 번째 하위 노드의 이름은 다음과 같습니다. DIV
Chrome, Opera, Safari, FireFox에서는 다음이 표시됩니다.
첫 번째 하위 노드: [object text]
첫 번째 하위 노드의 유형 하위 노드: 3
첫 번째 하위 노드 이름: #text
위 코드를 약간 수정하여 노드 사이의 공백을 제거합니다.
<div id="demo"><div>子节点一</div><div>子节点二</div><div>子节点三</div></div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(
"第一个子节点："+this.firstChild+"\n"+
"第一个子节点的类型是："+this.firstChild.nodeType+"\n"+
"第一个子节点的名称是："+this.firstChild.nodeName
);
}
</script>데모 예시
모든 브라우저에서 다음을 표시합니다.
첫 번째 하위 노드: [object HTMLDivElement]
첫 번째 하위 노드의 유형은 다음과 같습니다. 1
첫 번째 하위 노드의 이름은 다음과 같습니다. DIV
마지막 하위 노드 가져오기
Javascript에서는 lastChild를 전달하여 마지막 하위 노드를 가져올 수 있습니다.
firstChild와 마찬가지로 IE8.0 이하의 브라우저는 W3C 사양을 따르는 브라우저(Chrome, FireFox, Safari 등) 사이의 공백 노드(공백, 캐리지 리턴 및 Tab 키)를 무시합니다. 이러한 공간을 텍스트 노드로 처리합니다.
하위 노드가 있는지 확인
Javascript에서는 hasChildNodes() 메서드를 사용하여 하위 노드가 있는지 확인할 수 있습니다.
구문:
nodeObject.hasChildNodes()
이 중 nodeObject는 노드 객체(요소 노드)이고, 반환 값은 Boolean 형식입니다.
IE8.0 이하의 브라우저는 노드 사이의 공백 노드(공백, Enter 및 Tab 키)를 무시합니다. W3C 사양을 따르는 브라우저(Chrome, FireFox, Safari 등)는 이러한 공백을 무시합니다. 텍스트 노드로.
텍스트 노드와 속성 노드는 더 이상 하위 노드를 포함할 수 없으므로 이러한 두 유형의 노드에 대한 ChildNodes() 메서드의 반환 값은 항상 false입니다.
hasChildNodes()의 반환 값이 false인 경우 firstChild 및 lastChild의 반환 값은 null(노드가 존재하지 않음)이고 children 및 childNodes의 반환 값은 빈 컬렉션(배열 길이)입니다. 0)입니다.
