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 用其他的节点替换指定的节点