使用JavaScript操作DOM

1.DOM操作

　　DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口。

　　使用JavaScript操作DOM时分为三个方面:

　　1.1:DOM Core(核心): 针对任何结构化文档的标准模型

　　1.2:HTML-DOM:针对 HTML 文档的标准模型

　　1.3:XML DOM - 针对 XML 文档的标准模型

2.节点和节点关系

• 整个文档是一个文档节点
• 每个HTML标签是一个元素节点
• 包含在HTML元素中的文本是文本节点
• 每个HTML属性是一个属性节点
• 注释属于注释节点

3.访问节点

　　3.1使用getElement系列方法访问指定节点

• getElementById():返回按id属性查找的第一个对象的引用
• getElementByName():返回带有指定名称name查找的对象的集合,由于一个文档中可能会有多个同名节点,因此返回的是元素数组
• getElementByTagName():返回带有指定标签名称TagName查找的对象的集合,返回元素数组

　　3.2根据层次关系访问节点

• parentNode:                            返回节点的父节点
• childNodes:　　　　　　       返回子节点集合,childNodes[i]
• firstChild:                                返回节点的第一个子节点
• lastChild:　　                         返回节点的最后一个子节点
• nextSibling:　　　　              下一个节点
• previousSibing:                       上一个节点

　　3.3解决浏览器兼容问题：
　　firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
　　lastElementChild 返回节点的最后一个子节点
　　nextElementSibling 下一个节点
　　previousElementSibling 上一个节点

　　例如：oNext = 节点.nextElementSibling || 节点.nextSibling

4.节点信息

　　　常用属性:

• nodeName(节点名称)
• nodeValue(节点值)
• nodeType(节点类型)

　　　操作节点的属性

• getAttribute("属性名"):用来获取属性的值
• setAttribute("属性名","属性值"):用来设置属性的值　　

　　　创建和插入节点：

• createElement( tagName) 创建一个标签名为tagName的新元素节点
• A.appendChild( B) 把B节点追加至A节点的末尾
• insertBefore( A,B ) 把A节点插入到B节点之前
• cloneNode(deep) 复制某个指定的节点

　　删除和替换节点：

• removeChild( node) 删除指定的节点
• replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点