总结DOM中的节点和关系属性

来源：懂视网责编：小采时间：2020-11-27 20:19:18

总结DOM中的节点和关系属性

总结DOM中的节点和关系属性:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培训课程</h1> <ul> <

推荐度：

点击下载本文 文档为doc格式

导读总结DOM中的节点和关系属性:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培训课程</h1> <ul> <

<!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;

 }

获取一个元素的上一个哥哥元素子节点　

 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;
 }

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

总结DOM中的节点和关系属性

总结DOM中的节点和关系属性:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培训课程</h1> <ul> <

推荐度：

点击下载本文 文档为doc格式

标签：中的关系属性

热门焦点

总结DOM中的节点和关系属性

总结DOM中的节点和关系属性

总结DOM中的节点和关系属性

最新推荐

猜你喜欢

热门推荐