多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 特征相关属性 > 所有的节点对象我们都可以理解为浏览器内置的node对象的实例。 ### 1.Node.nodeName和Node.nodeType ~~~javascript console.log("document.nodeName=" + document.nodeName); // #document console.log("document.nodeType=" + document.nodeType); // 9 ~~~ ![](https://box.kancloud.cn/f38c116cf8f6089198b359852b8038c8_810x583.png) ### 2.Node.nodeValue 返回是一个字符串,表示当前节点本身的文本值,该属性可读写。 由于只有Text节点、Comment节点和xml文档的CDATA节点有文本值,因此只有这三类节点有nodeValue,其他节点一律返回null。 >注意,这里需要特别注意的是,Text节点代表的是元素或属性中的文本内容。 ~~~javascript console.log("p.nodeValue=" + document.getElementById("_p").nodeValue); //null ~~~ ### 3.Node.textContent 返回当前节点和它的后代节点的文本内容,该属性是可读写的。 ~~~javascript console.log("p.textContent=" + document.getElementById("_p").textContent); // hello,world document.getElementById("_p").textContent = "hello, <span color='red'>nantong!</span>"; // hello, <span color='red'>nantong!</span> ~~~ 上面代码在插入文本时,会将<span>标签解释为文本,而不会当做标签去处理。 ### 4.Node.nextSibling 返回紧跟在当前节点后面的一个同级节点。如果没有找到返回null。 > 注意:该属性还包括文本节点。因此如果当前节点后面有空格,该属性返回一个文本节点,内容为空格。 ~~~javascript var _pb = document.getElementById("_p").nextSibling; console.log(_pb.textContent); // 空格 ~~~ ### 5.Node.previousSibling > 返回当前节点前面的,距离最新的一个同级节点。 ### 6.Node.parentNode > 返回当前节点的父节点。父节点只可能包括三种类型:element节点、document节点、documentfragment节点 ### 7.Node.parentElement > 返回当前节点的父element节点。不是W3C标准,仅支持IE。 ### 8.childNodes 返回一个nodelist集合,成员包括当前节点的所有子节点。 > 注意:除了Html元素节点,还包括Text节点和Comment节点。如果当前节点不包含任何子节点,则返回一个空的nodelist集合。 ~~~html Html: <div id="_asia"> <span id="_china">China</span> <!-- xxxx --> <span id="_korea">Korea</span> <span id="_japan">Japan</span> </div> var _asia = document.getElementById("_asia"); var _asias = _asia.childNodes; console.log(_asias); ~~~ ![](https://box.kancloud.cn/97163e8b6af0be6946f4fccf2aa579ba_429x438.png) ### 9.Node.firstChild/lastChild 返回当前节点的第一个或者最后一个子节点。如果没有找到返回null。