javascript操作DOM
w3c把文档表示为树。我们先从dom的继承来说起： 当浏览器解析完文档后，每个节点并非就是一个简单的Element对象实例，而是继承了很多东西。看下面的图
从上图可以看出，w3c定义的根是Node节点，Document、Elements都继承自Node节点，而下面的又扩展了HTMLDocument和HTMLElement，其实不但有HTML的内容，还有xml的扩展。
一、先看一下核心Node所具有的属性和方法：
.childNodes //返回节点的所有的子节点数组。是NodeList类型。在循环遍历时，取出一个子节点用item()来取。
<script>
var node = document.getElementById"nodeId");
for(var i = 0;i<node.childNodes.length;i++)
{
node.childNodes.item(i);//取出每一个子节点
}
.firstChild //第一个子节点
.lastChild //最后一个子节点
.attributes //所有的属性的集合。在遍历属性时，IE中所有的属性都能遍历到，即使属性值为null;而在firefox中只遍历有值的属性，无值的是遍历不到的。在遍历些属性时，取其中一个也是使用item()。
.nextSibling //下一个兄弟节点
.previousSibling //上一个兄弟节点
.parentNode //父节点
.nodeType //节点类型 节点如下：
| 常见类型 | 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 |
| DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 |
注：IE中对这些常量不支持，所以在IE中使用这些常量要进行定义，代码如下：
<script>
if(!window.Node){
var Node = {
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_FRAGMENT_NODE,11
}
}
</script>
.nodeName //节点的名字，对于不同类型的节点，它们的名字是不一样的，下面表中是给出的常见的类型及返回值
| 节点类型 | 取值 |
| Element对象.nodeNode | 返回标签我名字并转换成大写 |
| Text对象.nodeName | #text 这个值是不变的 |
| Attr对象.nodeName | 返回属性名 |
| Document对象.nodeName | #document |
| Comment对象.nodeName | #comment |
.nodeValue //节点的取值，对天不同类型的节点，它们的取值有可能是文本内容，也有可能是null
| 节点类型 | 节点值 |
| Element对象.nodeValue | null |
| Attr对象.nodeValue | 返回属性的值 |
| Text对象.nodeValue | 返回文本的内容 |
| Document对象.nodeValue | null |
| Comment对象.nodeValue | 注释的文本内容 |
.ownerDocument //节点所在的根文档，即document实例
.appendChild( newChild ) //追加一个子节点
.insertBefore( newChild,refChild ) //在某一个子节点前插入一个节点，refChild是要在这个子节点之前插入.注意：IE与Firefox中的区别，因为关系到空白换行的节点有无，所以取节点时一定要注意。
.replaceChild( newChild,oldChild ) //替换子节点
.removeChild( oldChild ) //删除并返回指定的子节点
.cloneNode( true/false ) // 复制当前节点及其所有子孙节点，如果参数为true，cloneNode()会复制所有的子孙节点，如果为fasle，它只复制节点自身
二、看一下核心Element所具有的属性和方法：
从开始的图中看出，Element是继承自Node的，所以Node所具有的属性和方法，Element也同样具有。下面是Element自己的扩展：
.getAttribute( name ) //根据属性名获取一个属性值
.setAttribute( name , value) //为一个Element设置属性
.removeAttribute( name ) //根据一个属性名删除一个属性
.getElementsByTagName( name ) //获得指定标签名所有的节点，返回NodeLise集合，用item（）来取某一个对象。注：该方法只包含Element节点，而不包含Attr、Text等其它节点
三、看一下核心Document所具有的属性和方法：
Document是继承自Node的，所以Node所具有的属性和方法，Document也同样具有。下面是Document自己的扩展：
.documentElement // 返回文档根元素，对于html文档，返回的是<html>标签
.createAttribute( name ) //创建一个属性节点，name为属性名
.createElement( name ) // 创建一个Element节点，name为标签名.createTextNode( data ) //创建一个Text节点，data为文本内容
.getElementById( id ) //查找ID指定的节点，如果有多个相同的ID，则返回第一个Element
.getElementsByTagName( name ) //查找指定的元素，返回标签名为name的集合，是NodeList类型，取出其中一个，用item()方法
四、看一下HTMLDocument所具有的属性和方法：
HTMLDocument是继承自Document的，所以Document和Node所具有的属性和方法，HTMLDocument也同样具有。我们所说的window.document文档对象，其实就是HTMLDocument实例。下面是HTMLDocument自己的扩展：
.title //<title>标签中的内容
.referrer //链接到当前页面的前一页面的URL
.domain //链接到当前站点的域名
.URL //当前页的URL
.images //所有<img>标签的数组
.applet //所有java applet标签的数组
.links //所有链接标签的数组
.forms //包含所有表单节点的数组
.anchors //锚链接的数组
.write( data ) //把数据data写到文档中
.writeln( data ) //把数据data写到文档中，并加一个换行
.getElementsByName( name ) // 根据名字取节点对象，在IE中只适用于input输入域根据name取节点对象
五、看一下HTMLElement所具有的属性和方法：
HTMLElement是继承自Element的，所以Element和Node所具有的属性和方法，HTMLElement也同样具有。下面是HTMLDocument自己的扩展：
.id // 属性值
.title //title内容
.className //class的值，即一个css的class名
六、几个说明：
1、在firefox中是完全遵守w3c的，它的标记后的空白换行也作为一个Text子节点
在IE中不是完全遵守w3c的，它的标记后的空白换行不作为节点。添加、删除节点时一定要注意
2、一个添加的小例子：
<script>
var child = document.createElement("li");//创建一个节点
var textChild = document.createTextNode("内容");//创建一个Text节点
child.appendChild( textChild );//将文本节点添加到节点中
</script>
3、需要注意的是：document.getElementById()返回的是对象的引用，而不是一个副本，一定要记住
4、复制和移动节点
var copyNode = document.getElementById().cloneNode(true);//复制一个节点
如果想移动节点，只需用getElementById()取行节点后，再找到合适的地方插入即可。因为得到节点对象后，是获得了一个引用，是对对象本身进行操作的。如果想复制一个对象，只能用cloneNode(true)的方式。
分享到：
相关推荐
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM（文档对象模型）编程的经典图书，它不仅阐述了JavaScript和DOM的基本知识，还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
但是，根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术，高清资源，无比经典，值得拥有”，我们可以推断这本书主要讲述了JavaScript中DOM（文档对象模型）的相关编程技术。...
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...
《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍，专注于DOM（Document Object Model）这一核心概念。DOM是Web页面的结构模型，通过JavaScript与DOM的交互，开发者可以实现对网页内容的动态...
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
总的来说，JavaScript DOM2是Web开发中的关键工具，它让JavaScript成为了一种强大的客户端脚本语言，为网页带来了丰富的动态性和交互性。通过学习和实践，开发者可以提高网页的用户体验，创建出更加智能和灵活的Web...
《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。DOM是Web页面的结构模型，JavaScript通过DOM API能够对网页内容进行动态操作，实现丰富的交互效果。这...
JavaScript DOM编程艺术是一本深入探讨如何使用JavaScript操作和操纵网页文档对象模型（Document Object Model）的经典书籍。DOM是HTML和XML文档的一种结构化表示，它允许我们通过编程方式访问和修改网页内容。这...
### JavaScript DOM编程艺术 第2版 #### 知识点概览 从提供的信息来看，《JavaScript DOM编程艺术 第2版》是一本专注于JavaScript及其与DOM（文档对象模型）交互的书籍。DOM是网页的核心组成部分之一，它定义了...
DOM是一个树形结构，将网页内容分解为独立的对象，这些对象可以被JavaScript或者其他脚本语言访问和操作。在JavaScript中，DOM主要用于创建、修改和操纵网页元素，从而实现动态网页效果。 在学习JavaScript DOM时，...
《JavaScript DOM高级程序设计》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。这本书的源码提供了一种实践的方式，帮助读者更好地理解书中的理论知识，并且能够亲手实现书中提到的各种...
《JavaScript DOM编程艺术》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。DOM是HTML和XML文档的结构化表示，JavaScript通过DOM API能够对网页内容进行动态操作，实现丰富的交互效果。...
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍，主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口，它允许...
《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。DOM是Web页面的结构化表示，通过JavaScript，我们可以利用DOM来动态地操作HTML和XML文档，实现丰富的交互...
### JavaScript DOM编程艺术知识点概述 #### 一、DOM基础概念 **1.1 DOM简介** DOM（Document Object Model）即文档对象模型，是一种与平台和语言无关的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和...