1.常用的节点类型，nodeType，attributes，childNodes。1.元素节点 - 12.属性节点 - 23.文本节点 - 34.注释节点 - 85.文档节点 - 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,childNodesnode.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>
