文档对象模型DOM
在DOM中，HTML文档各个节点被视为各种类型的Node对象
每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树
由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型
这里列出Node常用的几种节点类型
| 接口 |
nodeType常量 |
nodeType值 |
备注 |
| Element |
Node.ELEMENT_NODE |
1 |
元素节点 |
| Attr |
Node.ATTRIBUTE_NODE |
2 |
节点属性 |
| Text |
Node.TEXT_NODE |
3 |
文本节点 |
| Comment |
Node.COMMENT_NODE |
8 |
注释的文本 |
| Document |
Node.DOCUMENT_NODE |
9 |
document |
| DocumentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
document片段 |
DOM树的根节点是一个Document对象，该对象的documentElement属性可以获取文档根元素的Element对象。对于HTML文档，这个就是<html>标记
JavaScript操作HTML文档的时候，document即指向整个文档，Element即为<body>、<table>等节点类型，Comment类型的节点则是指文档的注释
Document对象的大多数方法都是用于创建，可以插入文档中的各种类型的节点
这里列出了Document的常用方法
| 方法 |
描述 |
| createAttribute() |
用指定的名字创建新的Attr节点 |
| createComment() |
用指定的字符串创建新的Comment节点 |
| createElement() |
用指定的标记名创建新的Element节点 |
| createTextNode() |
用指定的文本创建新的TextNode节点 |
| getElementById() |
返回文档中具有指定id属性的Element节点 |
| getElementsByTagName() |
返回文档中具有指定标记名的所有Element节点 |
Attr对象代表文档元素的属性，它有name、value等属性，可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()方法来获取
不过，在大多数情况下，使用Element元素属性的最简单方法是调用getAttribute()和setAttribute()两个方法，而不是Attr对象
这里列出了Element的常用方法
| 方法 |
描述 |
| getAttribute() |
以字符串形式返回指定属性的值 |
| getAttributeNode() |
以Attr节点的形式返回指定属性的值 |
| getElementsByTabName() |
返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序 |
| hasAttribute() |
如果该元素具有指定名字的属性，则返回true |
| removeAttribute() |
从元素中删除指定的属性 |
| removeAttributeNode() |
从元素的属性列表中删除指定的Attr节点 |
| setAttribute() |
把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性 |
| setAttributeNode() |
把指定的Attr节点添加到该元素的属性列表中 |
Node对象定义了一系列属性和方法，以方便遍历整个文档
这里列出了Node对象的常用属性
| 属性 |
描述 |
| attributes |
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性 |
| childNodes |
以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组 |
| firstChild |
以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null |
| lastChild |
以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null |
| nextSibling |
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null |
| nodeName |
节点的名字，Element节点则代表Element的标记名称 |
| nodeType |
代表节点的类型。1为元素、2为属性、3为文本.... |
| nodeValue |
获取当前节点的值 |
| parentNode |
以Node的形式返回当前节点的父节点。如果没有父节点，则为null |
| previousSibling |
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null |
这里列出了Node对象的常用方法
| 方法 |
描述 |
| appendChild() |
通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点 |
| cloneNode() |
复制当前节点，或者复制当前节点以及它的所有子孙节点 |
| hasChildNodes() |
如果当前节点拥有子节点，则将返回true |
| insertBefore() |
给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置 |
| removeChild() |
从文档树中删除并返回指定的子节点 |
| replaceChild() |
从文档树中删除并返回指定的子节点，用另一个节点替换它 |
分享到：
相关推荐
理解不同类型的节点及其属性和方法是进行DOM编程的基础。 5. DOM事件处理：JavaScript通过事件驱动进行交互。事件会在特定的动作（如点击、按键、加载等）发生时被触发，DOM提供了添加和移除事件监听器的接口。学习...
通过学习并实践《JavaScript DOM编程艺术》中的源码，开发者能够掌握原生JavaScript对DOM的精细控制，从而提升网页交互的灵活性和性能。同时，理解并熟练运用这些知识点，对于开发高效、响应式的Web应用至关重要。在...
HTML DOM（文档对象模型）是Web开发中用于...这些属性和方法构成了DOM的核心，让开发者能够高效地查找、修改和操作HTML页面中的元素和内容，实现动态效果和交互。了解并熟练掌握这些知识点对于进行前端开发至关重要。
附带的源码可能是书中示例的实现，通过阅读和研究这些代码，读者可以更直观地理解DOM编程的实际运用，包括函数封装、模块化设计、错误处理等方面，有助于提升实际开发能力。 综上所述，《DOM编程艺术》这本书及其...
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
该压缩包包含的源码是书中的示例代码，对于学习和理解DOM编程有着极大的帮助。 1. **JavaScript与DOM** - JavaScript是一种轻量级的解释型编程语言，广泛用于Web浏览器中，提供了与用户交互以及操作和更改HTML和...
在《DOM编程艺术》的源代码中，你可能会看到如何使用这些方法创建动态效果，比如响应用户交互、动态加载数据或者实现AJAX（异步JavaScript和XML）通信。例如，一个常见的应用场景是使用`addEventListener()`或`...
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript DOM编程艺术是一本深入探讨如何使用JavaScript操作和操纵网页文档对象模型（Document Object Model）的经典书籍。DOM是HTML和XML文档的一种...记得实践中不断探索和理解，DOM编程将成为你手中强大的工具。
DOM编程中，DHTML（Dynamic HTML）是HTML、CSS和JavaScript结合的结果，使得网页可以动态更新和交互。通过JavaScript，我们可以找到页面上的特定元素，改变它们的属性，添加新的元素，甚至删除现有元素。例如，使用`...
通过学习《JavaScript DOM编程艺术》，读者将掌握如何利用JavaScript与DOM进行高效的网页动态编程，实现丰富的用户界面和交互体验。这本书不仅涵盖了DOM的基本概念，还深入讲解了实践中的技巧和最佳实践，对于前端...
综上所述，DOM编程接口是XML处理的重要工具，提供了一种统一的方式来访问和操作XML文档，无论是在Web开发还是数据处理中都有广泛的应用。了解和掌握DOM，对于任何涉及到XML处理的开发者都至关重要。
JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍，中文版的发布使得更多中文读者能够领略到JavaScript在网页动态化和交互性方面的强大能力。随书源码通常包含了书中...
在“XML的DOM编程实例”中，我们主要探讨如何利用DOM解析XML文件，并进行读取、修改、创建和删除XML元素。这个实例包含了一个带有图形用户界面（GUI）的应用程序，使用户能够直观地与XML数据交互。下面将详细解释...
配套的代码文件则提供了书中实例的源代码，读者可以实际运行和修改这些示例，加深对DOM编程的理解。"DOM_Scripting__Web_Design_with_JavaScript_and_the_Document_Object_Model__Second_Edition.pdf"是书籍的PDF...
这本书的原书代码包含了书中所有示例，对于学习和理解JavaScript DOM编程非常有帮助。 在JavaScript DOM编程中，以下几个关键知识点是不可或缺的： 1. **DOM概念**：DOM是文档对象模型的缩写，它将HTML或XML文档...
**JavaScript DOM编程艺术2源代码**是学习和深入理解JavaScript与DOM交互的宝贵资源，它提供了实际示例和代码，帮助开发者掌握如何有效地操作网页内容。DOM（Document Object Model）是HTML和XML文档的一种标准表示...
### JavaScript DOM编程艺术 第2版 #### 知识点概览 从提供的信息来看，《JavaScript DOM编程艺术 第2版》是一本专注于JavaScript及其与DOM（文档对象模型）交互的书籍。DOM是网页的核心组成部分之一，它定义了...
3. **原型链**：JS中的对象可以通过原型链共享属性和方法。每个对象都有一个内部`__proto__`属性，指向其构造函数的原型对象。原型对象也是一个对象，可以有属性和方法。 4. **原型对象**：`prototype`属性是构造...
2. **选择元素**：书中详细介绍了如何使用`getElementById`、`getElementsByTagName`、`getElementsByClassName`等方法以及CSS选择器来选取网页中的特定元素，这些都是JavaScript DOM编程的基础。 3. **事件处理**...