JavaScript中的Node相关内容介绍_js 弹出textnode的内容-优快云博客

本文详细介绍了HTML页面中Node节点的概念及各类属性，如nodeType、nodeName等，并通过实例展示了如何利用JavaScript进行节点的创建、查询、修改和删除等操作。

Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个< div id="aaa">……< /div>也可以是一个节点，在< body>……< /body>中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。 Node的属性介绍： nodeType：显示节点的类型 nodeName：显示节点的名称 nodeValue：显示节点的值 attributes：获取一个属性节点 firstChild：表示某一节点的第一个节点 lastChild：表示某一节点的最后一个子节点 childNodes：表示所在节点的所有子节点 parentNode：表示所在节点的父节点 nextSibling：紧挨着当前节点的上一个节点 previousSibling：紧挨着当前节点的下一个节点 ownerDocument：（不知） Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：名称：元素节点 nodeType：ELEMENT_NODE nodeType值：1 nodeName：元素标记名 nodeValue：null <body> <div id = "t" ><span></span></div> </body> <mce:script type="text/javascript"></mce:script> 名称：属性节点 nodeType：ATTRIBUTE_NODE nodeType值：2 nodeName：属性名 nodeValue：属性值 <body> <div id = "t" name="aaa"><span></span></div> </body> <mce:script type="text/javascript"></mce:script> 名称：文本节点 nodeType：TEXT_NODE nodeType值：3 nodeName：#text nodeValue：文本内容 <body> <div id = "t">bbb</div> </body> <mce:script type="text/javascript"></mce:script> 名称：CDATA文本节点（XML中传递文本的格式） nodeType：CDATA_SECTION_NODE nodeType值：4 nodeName：#cdata-section nodeValue：CDATA文本内容（作者省略8个属性，需技术补充） attributes属性，直接获取一个属性节点，注意这里要使用[]，保持IE和FF的兼容性。 <body name="ddd"> <div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点： <body> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组： <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点： <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> ownerDocument属性（不知如何使用） Node的方法介绍： hasChildNodes()：判定一个节点是否有子节点 removeChild()：去除一个节点 appendChild()：添加一个节点 replaceChild()：替换一个节点 insertBefore()：指定节点位置插入一个节点 cloneNode()：复制一个节点 normalize()：（不知） hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> <div id = "m"></div> </body> <mce:script type="text/javascript"></mce:script> removeChild()方法：去除一个节点 <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。 <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。 <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入 <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <mce:script type="text/javascript"></mce:script> cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点 <body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div> </body> <script> var what = document.getElementById("t").cloneNode(false).innerHTML; document.getElementById("m").innerHTML = what; // 增加了一个aaabbbccc vbv