js学习总结----DOM中的节点和关系属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js学习总结----DOM中的节点和关系属性相关的知识，希望对你有一定的参考价值。
<!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方法，实现获取指定元素下的元素子节点
/ * getMyChildren:获取制定元素下的所有的元素节点 * @parameter：
* ele:我们要获取谁下面的，就把谁传过来
tagName:获取元素的类型 * @return: * 我们最后获取的元素子节点 * by xxxxxxxxx * */ function getMyChildren(ele,tagName){ var ary = [],nodes = ele.childNodes; for(var i = 0;i<nodes.length;i++){ var cur = nodes[i]; if(cur.nodeType===1){
if(tagName){
if(cur.nodeName.toLowerCase===tagName.toLowerCase){
ary.push(cur)
}
}else{
ary.push(cur);
} } } return ary; }
获取一个元素的上一个哥哥元素子节点
function prev（ele）{var pre = ele.previousSibling; while(pre && pre.nodeType!==1){ pre = pre.previousSibling; }
return pre;
}
获取一个元素的所有的哥哥元素节点
function prevAll(ele){ var pre = ele.previousSibling,ary = []; while(pre){ if(pre,nodeType===1){ ary.unshift(pre); } pre = pre.previousSibling; } return ary; }
以上是关于js学习总结----DOM中的节点和关系属性的主要内容，如果未能解决你的问题，请参考以下文章