每个节点里面都有nodeType nodeName nodeValue三个属性
2023-09-11 14:20:09 时间
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="box"> 9 <p>唱歌</p> 10 <p>滑雪</p> 11 <p>吃饭</p> 12 <p>玩游戏</p> 13 <!--我是注释--> 14 </div> 15 16 17 <script type="text/javascript"> 18 window.onload = function () { 19 // 要查找子节点或者子元素节点 必须先找到一个元素,代表找谁的(父级) 20 var box = document.getElementById('box'); 21 console.log(box.childNodes);//拿的是子节点(不是子元素节点),是一个伪数组 22 //每个节点里面都有nodeType nodeName nodeValue三个属性,通过nodeType属性判断是否子元素节点 23 24 // nodeName nodeType nodeValue 25 // 文本节点 #text 3 文本内容 26 // 元素节点 全大写的元素名 1 null 27 // 注释节点 #comment 8 注释内容 28 // 我想从子节点当中去过滤出所有的子元素节点 形成一个真数组 29 30 // var arr = []; 31 32 // for (var i = 0; i < box.childNodes.length; i++) { 33 // if(box.childNodes[i].nodeType === 1){ 34 //// 只要能进到if里边 说明当前这个索引对应的节点 是元素节点 35 // arr.push(box.childNodes[i]) 36 // } 37 // } 38 // console.log(arr); 39 40 // 子元素节点 41 console.log(box.children);//专门用来拿子元素节点的,但是高级浏览器拿到的是子元素 低级浏览器拿到的除了子元素还有注释 42 var arr2 = []; 43 for (var i = 0; i < box.children.length; i++) { 44 if(box.children[i].nodeType === 1){ 45 arr2.push(box.children[i]); 46 } 47 } 48 // console.log(arr2); 49 // 父节点和父元素节点 50 console.log(box.parentNode);//父节点 51 console.log(box.parentElement);//父元素节点 52 // 注:拿父节点和父元素节点的时候 拿的都是父元素 所以以后都可以 53 // 每个节点里面都有nodeType nodeName nodeValue三个属性 54 } 55 </script> 56 </body> 57 </html>
相关文章
- Process.StandardInput属性
- Js基础知识2-对象、对象属性全解
- is_unique 属性检查给定 Series 对象中的基础数据是否唯一
- position 属性和 z-index 属性对页面节点层级影响的例子
- 事务的四大属性
- data属性
- 元素类型 “item” 相关联的 “name” 属性值不能包含 ‘<’ 字符
- 让script的type属性等于text/html
- 自定义属性
- C# 关于XML遍历新增节点,修改属性小例
- 怎么读出Xml文件中某个节点、属性的信息
- 怎么读出Xml文件中某个节点、属性的信息
- 怎么读出Xml文件中某个节点、属性的信息
- Vue学习之--------监视属性(2022/7/10)
- 【Groovy】自定义 Xml 生成器 BuilderSupport ( 构造 Xml 节点类 | 封装节点名称、节点值、节点属性、子节点 | 将封装的节点数据转为 Xml 字符串 )
- 【Groovy】自定义 Xml 生成器 BuilderSupport ( 继承 BuilderSupport 抽象类 | 在 createNode 方法中获取节点名称、节点属性、节点值信息 )
- 用CSS border相关属性画三角形
- 【Neo4j构建知识图谱】python调用三行cypher操作语言完成节点、节点名称、关系、属性的所有信息创建
- 【CSS】vertical-align属性
- <label for=“userName“>中的for 属性妙用