總結DOM中的節點與關係屬性
- PHP中文网原創
- 2017-06-21 13:20:591161瀏覽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<h1>培训课程</h1>
<ul>
<li>html+css</li>
<li>javascript</li>
<li>正式课</li>
<li>移动端课程</li>
<li>node.js正式课</li>
</ul>
</div>
<script>//获取关系的属性var oDiv = document.getElementById("div1");
console.log(oDiv.childNodes);//获取所有的子节点console.log(oDiv.children);//获取所有的元素子节点</script>
</body>
</html>節點:Node 一個頁面中的標籤、文字、註解。 。 。都是節點
childNodes：取得所有的子節點
children:取得所有的元素子節點
parentNode:取得父親節點
previousSibling:取得上一個哥哥節點
nextSibling:取得下一個弟弟節點
firstChild：取得所有的子節點中的第一個
#lastChild：取得所有子節點中的最後一個
在js中需要我們掌握的節點類型:
〬 nodeValue
元素節點(元素標籤) 1 的標籤名稱 null
文字節點（文字） 文字內容
註釋節點（註） 8 #comment #comment #comment #com
# document 9 #document #document #document 把space空格和Enter回車都當成我們的文字節點
方法：模擬我們的children方法，實作取得指定元素下的元素子節點
# #<em><em><span style="color: #008000"> / * getMyChildren:获取制定元素下的所有的元素节点<em><em><em> * @parameter：</em></em></em> <br> * ele:我们要获取谁下面的，就把谁传过来<br> tagName:获取元素的类型
* @return:
* 我们最后获取的元素子节点
* by xxxxxxxxx
* </span><span style="color: #008000">*/</span><span style="color: #0000ff">function</span><span style="color: #000000"> getMyChildren(ele,tagName){</span><span style="color: #0000ff">var</span> ary = [],nodes =<span style="color: #000000"> ele.childNodes;</span><span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i = 0;i<nodes.length;i++<span style="color: #000000">){</span><span style="color: #0000ff">var</span> cur =<span style="color: #000000"> nodes[i];</span><span style="color: #0000ff">if</span>(cur.nodeType===1<span style="color: #000000">){<br> if(tagName){<br> if(cur.nodeName.toLowerCase===tagName.toLowerCase){<br> ary.push(cur)<br> }<br> <br> }else{<br></span></em></em>
ary.push(cur);
}
}
}return ary;
}
取得一個元素的上一個哥哥元素子節點
pre =(pre && pre.nodeType!==1=取得一個元素的所有的哥哥元素節點
function prevAll(ele){var pre = ele.previousSibling,ary = [];while(pre){if(pre,nodeType===1){
ary.unshift(pre);
}
pre = pre.previousSibling;
}return ary;
}
以上是總結DOM中的節點與關係屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！