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.getElementById("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.getElementById("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.getElementById("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.getElementById("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.getElementById("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.getElementById("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//显示 ccc aaa
</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>
<script>
alert(document.getElementById("t").hasChildNodes());
alert(document.getElementById("m").hasChildNodes());
// 第一个true，第二个false
</script>
removeChild()方法：去除一个节点
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").removeChild(d);
// <span>aaa</span>被去除
</script>
appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").appendChild(d);
// <span>aaa</span>成了最后一个节点
</script>
replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var oldd = document.getElementById("t").lastChild;
document.getElementById("t").replaceChild(newd,oldd);
// 最后一项成了 eee
</script>
insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var where = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newd,where);
// 在最后一项的前面多了一项 eee
</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
</script>
分享到：
相关推荐
JavaScript DOM详解 JavaScript DOM（Document Object Model）是用于处理HTML和XML文档的一种标准编程接口。它将网页内容结构化为一个树形结构，允许我们通过JavaScript来操纵网页元素，实现动态网页效果。在这个...
随着时间的发展，JavaScript已经成为了一门功能强大的编程语言，并且拥有庞大的生态系统，包括Node.js、React、Angular等流行框架和库。 ### 二、DOM概念详解 #### 2.1 DOM定义 DOM（Document Object Model，文档...
以下是关于JavaScript中DOM操作的一些关键知识点，结合火狐和IE之间的差异进行详细讲解： 1. **平稳退化和向后兼容**： - 开发者应该始终确保代码对不同浏览器的兼容性，通过测试和检查来确保DOM方法的可用性。 ...
JavaScript中的BOM（Browser Object Model，浏览器对象模型）和DOM（Document Object Model，文档对象模型）是两个核心概念，它们都是JavaScript与网页交互的关键部分。 **BOM（浏览器对象模型）** 1. **Window...
由于安全原因，ActiveX对象通常受限于同源策略，这意味着JavaScript不能在不同域名之间直接使用Msxml2.DOMDocument对象。不过，在服务器端如ASP.NET中，这个问题不复存在，因此Msxml2.DOMDocument可以在服务器上自由...
### JavaScript 获取 HTML DOM 节点详解 在 Web 应用程序尤其是 Web 2.0 程序的开发过程中，频繁地需要获取页面中的某个元素，并对其样式、内容等进行更新。如何有效地获取需要更新的元素是实现这些功能的前提。...
text javascript"> 创建一个新节点 var a document createElement "div" ; 使用警告对话框输出节点 alert a ; < script> 错误的节点 <script type "text javascript"&...
JavaScript 中 Dom 操作实例详解 在 JavaScript 中，DOM 操作是指对 HTML 文档中的元素节点进行操作，包括增加、删除、修改和查找节点等。以下是 JavaScript 中 DOM 操作的实例详解。 一、增加节点 增加节点的...
Vue.js 是一款流行的前端框架，它的核心特性之一就是使用虚拟DOM（Virtual DOM）技术来优化网页性能。虚拟DOM是JavaScript中的一个抽象概念，它模仿了实际DOM（Document Object Model）的结构，但并不直接操作DOM，...
### JavaScript DOM编程艺术：核心DOM方法与属性详解 在深入探讨《JavaScript DOM编程艺术》一书的精华内容之前，我们首先要理解DOM（Document Object Model，文档对象模型）的基础概念。DOM是一种标准，用于表示和...
### JavaScript DOM对象操作详解 #### 一、DOM基础概述 DOM（Document Object Model）即文档对象模型，是一种标准，被广泛用于定义结构化的文档（如HTML和XML）并允许程序和脚本动态地访问和更新文档的内容、结构...
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 ...
### JavaScript DOM 编程艺术读书笔记关键知识点解析 #### 一、JavaScript简史与相关技术简介 - **XHTML（可扩展的超文本标记语言）**：这是一种更加严格、更加强大的HTML版本，旨在提高网页的可读性和可扩展性。 ...
DOM（文档对象模型）是JavaScript操作网页的基石。它是一种通过脚本访问和更新文档（如HTML和XML）内容的API。DOM将文档结构视为一棵节点树，包括各种节点类型：元素节点、属性节点和文本节点。 元素节点代表文档中...
尽管现代开发中我们会经常使用jQuery或现代前端框架如React、Vue.js来简化DOM操作，但深入理解DOM的内部工作原理对于解决复杂的前端问题是必不可少的。DOM操作是实时且动态的，正确的使用DOM API，能够大幅度提高...
JavaScript中DOM操作详解主要涉及了使用jQuery进行DOM操作以及在不同的浏览器，特别是火狐(Firefox)和IE(微软Internet Explorer)浏览器之间存在的一些JavaScript差异。本文将详细介绍这些内容，并提供一些编写跨...
#### DOM 接口详解 DOM定义了一系列的接口，这些接口定义了DOM对象的行为和功能。例如： - **DOMElement**：这是所有DOM元素的基类，定义了元素的基本属性和方法。 - **DOMWindow**：代表浏览器窗口，提供了对...
DOM编程详解(含HTML部分)涉及的是Web开发中的一种核心技术，它允许开发者通过JavaScript等脚本语言操作HTML和XML文档。DOM，全称为Document Object Model，是一种标准接口，无论浏览器、操作系统还是编程语言，都能...
JavaScript DOM操作详解涉及JavaScript对文档对象模型（Document Object Model，简称DOM）的操作，这是前端开发中不可或缺的一部分，用于动态地读取、修改和添加页面元素。以下详细解读了文档中提及的关键知识点： ...