JavaScript中的Node相关内容引见1
日期：2014-05-16 浏览次数：20349 次
JavaScript中的Node相关内容介绍1
JavaScript中的Node相关内容介绍
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>
<script>
var d = document.getElementByIdx("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 1 DIV null
</script>
名称：属性节点
nodeType：ATTRIBUTE_NODE
nodeType值：2
nodeName：属性名
nodeValue：属性值
<body>
<div id = "t" name="aaa"><span></span></div>
</body>
<script>
var d = document.getElementByIdx("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 2 name aaa
</script>
名称：文本节点
nodeType：TEXT_NODE
nodeType值：3
nodeName：#text
nodeValue：文本内容
<body>
<div id = "t">bbb</div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 3 #text bbb
</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>
<script>
var d = document.getElementByIdx("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//显示 name aaa
</script>
firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：
<body>
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementByIdx("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//显示 aaa ccc
</script>
childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementByIdx("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
//显示 bbb ddd
</script>
nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementByIdx("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//显示 ccc aaa
</script>
JavaScript中的Node相关内容介绍
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>
<script>
var d = document.getElementByIdx("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 1 DIV null
</script>
名称：属性节点
nodeType：ATTRIBUTE_NODE
nodeType值：2
nodeName：属性名
nodeValue：属性值
<body>
<div id = "t" name="aaa"><span></span></div>
</body>
<script>
var d = document.getElementByIdx("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 2 name aaa
</script>
名称：文本节点
nodeType：TEXT_NODE
nodeType值：3
nodeName：#text
nodeValue：文本内容
<body>
<div id = "t">bbb</div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 3 #text bbb
</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>
<script>
var d = document.getElementByIdx("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//显示 name aaa
</script>
firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：
<body>
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementByIdx("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//显示 aaa ccc
</script>
childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementByIdx("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
//显示 bbb ddd
</script>
nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementByIdx("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//显示 ccc aaa
</script>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
