定义:DOM:Document Object Model。
是针对HTML,XML文档的一个API(应用程序编程接口),它将任何HTML,XML文档描绘成一个由多层节点(node)构成的结构。
节点有多种类型,每种类型表示文档中不同的信息及标记,每个节点也拥有各自的特点、数据和方法,然后各节点之间也存在某种关系。
想象成一个树状图
一、Node节点爸爸
一共有12种节点,这些节点都继承自一个基类型Node。
1.基本属性方法:
nodeName
nodeValue
nodeType
childNodes:一个保存子元素的Nodelist
parentNodes
nextSibling - previousSibling
2.操作节点方法
appendChild()
insertBefore(node1,node2)
replaceChild(node1,node2)
removeChild(nodex)移除某个节点
cloneNode(true or false) : true表示深复制(整个子节点树),false表示浅复制(本身)
二、常用节点Document类型
JS通过Document类型表示文档,在浏览器中,document对象是继承自Document的HTMLDocument的一个实例,表示整个HTML页面。
1.方法
dcument.documentElement :取得对<html>
的引用
dcument.body
dcument.doctype(注释在不同的浏览器结果不同)
dcument.title
dcument.URL/domain/referrer(修改成同一个domain可以实现跨访问)
dcument.getElementById() (大小写匹配,返回第一个符合的对象,name不要设置和ID一样,IE很多不一样)
dcument.getElementSByTagName() (返回HTMLCollection, 比如“img”,”*”表示取得所有元素)
document.write/open/close/writeln/
特殊集合: 都是HTMLCollection对象
document.anchors :带name特性的<a>
document.forms
document.images
document.links 带href的<a>
2.一致性检查
由于DOM分为多个级别,也包含多个部分,因此检测浏览器实现了哪些部分十分必要。
三、Element元素
作用:用于变现HTML,XML元素,提供了对元素标签名、子节点、特性的访问。
1.HTML元素
标准特性:id,title,lang,dir,className
2.对特性的操作(特性部分大小写)
getAttribute()
setAttribute()
removeAttribute()
3.attributes属性
它也包含一个NamedNodeMap,动态集合
element.attributes[“id”]
注:除IE外,不能用属性的形式添加特性到DOM对象中。
一般用对象的属性来取得特性,只有取得自定义特性值时,才会使用getAttribute().
DOM操作中,<script> <style>
小心点
DOM消耗开销很大,NodeList问题最多。尽量减少DOM操作