总结DOM中的节点和关系属性
- PHP中文网原创
- 2017-06-21 13:20:591129浏览
<!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中需要我们掌握的节点类型:
nodeType nodeName nodeValue
元素节点(元素标签) 1 大写的标签名 null
文本节点（文字） 3 #text 文字内容
注释节点（注释） 8 #comment 注释内容
document 9 #document null
注意：在标准浏览器下，我们把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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：一个小demo之“拖拽”效果的实现下一篇：js中正则表达式是怎么使用的？