1. 常用的节点类型, nodeType,attributes,childNodes.
1. 元素节点 - 1
2. 属性节点 - 2
3. 文本节点 - 3
4. 注释节点 - 8
5. 文档节点 - 9
查看节点类型
node.nodeType(返回的是数字)
属性节点
元素. attributes(获取的是集合)
元素. attributes[0]
通过元素. childNodes 获取子节点
childNodes 获取到的是一个集合
集合中 包含了 元素的 所有子节点
其中有 元素 子节点 , 注释, 文本节点...
举例说明, 以下是全部代码:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- #box{
- width: 100px;
- height: 100px;
- background: red;
- }
- </style>
- </head>
- <body>
- <div id="box" class="content">
- <div id="inner">inner</div>
一句话
- <!-- 这里是注释 -->
- </div>
- <script>
- var box=document.getElementById("box");
- console.log(box.nodeType);//1
- //--------------------------------------------
- console.log(box.attributes);
- console.log(box.attributes[0]);//id="box"
- console.log(box.attributes[1]);//class="content"
- console.log(box.attributes[0].nodeType);//2
- //--------------------------------------------
- console.log(box.childNodes);
- console.log(box.childNodes[0]);//#text 这里指的是 box 所指的 div 和 inner 所指的 div 换行之间的内容, 就是很多个空格, 计算机认定为文本.
- console.log(box.childNodes[0].nodeType);// 3
- console.log(box.childNodes[3].nodeType);// 8
- </script>
- </body>
- </HTML>
- 2.nodeName
- <body>
- <div id="box" class="content">
- <div id="inner">inner</div>
- <p > 一句话 </p>
- <!-- 这里是注释 -->
- </div>
- <script>
- var box = document.getElementById("box");
- var p=document.getElementsByTagName("p")[0];
- console.log(box.nodeName);//DIV
- console.log(p.nodeName);//P
- //----------------------------------------------------
- console.log(box.childNodes[0].nodeName);//#text
- console.log(box.childNodes[5].nodeName);//#comment
- //----------------------------------------------------
- console.log(document.nodeName);//#document
- </script>
- </body>
- 3.parentNode,children,childNodes
node.parentNode: 找到 node 的父节点
children: 获取节点的一级的元素子节点, 只获取元素, 返回的是 HTMLCollection 集合.
childNodes: 获取节点的一级子节点, 可能获取到元素节点, 文本节点, 注释节点等, 返回的是 Nodelist 集合.
举例说明, 可以把代码粘贴, 自己运行看看:
- <body>
- <!--
- node.parentNode 父节点
- children 获取节点的一级的元素子节点, 返回的是集合
- childNodes 获取节点的子节点, 可能获取到元素节点, 文本节点, 注释节点, 返回的是集合
- -->
- <div id="wrap">
- <div id="content">
- <div id="inner"></div>
- </div>
- <p>p</p>
一句话
- </div>
- <script>
- var content=document.getElementById("content");
- console.log(content.parentNode);
- console.log(content.parentNode.parentNode);
- console.log(content.parentNode.parentNode.parentNode);
- console.log(content.parentNode.parentNode.parentNode.parentNode);
- //-----------------------------------------------------------------------
- console.log(content.childNodes);//NodeList(3)?[text, div#inner, text]
- console.log(content.children);//HTMLCollection?[div#inner]
- </script>
- </body>
4.node.previousElementSibling 和 node.nextElementSibling
兄弟关系
node.previousElementSibling 上一个元素兄弟节点
node.nextElementSibling 下一个元素兄弟节点
举例说明, 可以把代码粘贴, 自己运行看看:
- <body>
- <ul id="list">
- <li>1</li>
- <li id="item">2</li>
- <li>3</li>
- <li>4</li>
- </ul>
- <script>
- var list = document.getElementById("list");
- var item = document.getElementById("item");
- console.log(list.previousElementSibling);//null 因为是嵌套关系, 所以没有上一个兄弟节点
- console.log(item.previousElementSibling);//<li>1</li>
- console.log(item.nextElementSibling);//<li>3</li>
- console.log(item.nextElementSibling.nextElementSibling);//<li>4</li>
- </script>
- </body>
5.node.firstElementChild 和 node.lastElementChild
嵌套关系
node.previousElementSibling 第一个子级
node.nextElementSibling 最后一个子级
举例说明, 可以把代码粘贴, 自己运行看看:
- <body>
- <div id="wrap">
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- </div>
- <script>
- var wrap = document.getElementById("wrap");
- console.log( wrap.firstElementChild );//<div>1</div>
- console.log( wrap.lastElementChild );//<div>4</div>
- </script>
- </body>
来源: http://www.bubuko.com/infodetail-3296923.html