DOM(Document Object Modal),DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口
Document 对象,每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
获取dom方法,看以下例子
document.getElementById() //元素id 在ie8一下的浏览器,不区分id大小写,匹配name属性的元素 document.getElementsByTagName() //标签名 document.getElementsByName() //只有部分标签name可生效(表单,img, iframe) document.getElementsByClassName() //类名 -> ie8和ie8以下的ie版本中没有 // 生成的doms动态的实时的
这些获取dom的方法是实时的,意思是比如我一开始获得dom取dom的高度,一段操作多这个dom高度进行变化后,再从之前获取的dom中取dom的高度,前后两者变化是不一样的。
而获取静态dom看以下例子
document.querySelector() //css选择器 ie7和ie7以下的ie版本中没有 document.querySelectorAll() //css选择器 ie7和ie7以下的ie版本中没有 // 生成的doms静态的
这两个方法无论dom怎么变化,前后从dom中拿到的值是一样的。但是注意是有兼容性
遍历节点树
节点类型有以下几种:
元素=1,属性=2,文本=3,注释=8,document=9,DocumentFragment=11
注意:前面代表类型,后面代表该类型对应的类型值
节点的上下级关系又分这几种:
parentNode -> 父节点(最顶层的parentNode是#document)
childNodes -> 子节点们
firstChild -> 第一个子节点
lastChild -> 最后一个子节点
nextSibling -> 后一个兄弟节点
previousSibling -> 前一个兄弟节点
而节点中,最重要的是元素节点,基于元素节点树的遍历有分这几种:
parentElement -> 返回当前元素的父元素节点(最顶层的是html,#document不是元素)(IE9及以下不兼容)
children -> 只返回当前元素的元素子节点
node.childElementCount(IE9及以下不兼容) === node.children.length -> 当前元素节点的子节点
firstELementChild -> 返回的是第一个元素节点(IE9及以下IE不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE9及以下IE不兼容)
nextELementSibling -> 后一个兄弟元素节点(IE9及以下IE不兼容)
previousELementSibling -> 前一个兄弟元素节点(IE9及以下IE不兼容)
节点包含4个属性:
nodeName 元素的标签名,以大写形式表示只读
nodeValue Text节点或Comment节点的文本内容,可读写
nodeType 该节点的类型,只读
attributes Element节点的属性集合
节点的方法:
node.hasChildNodes() //是否有子节点
dom的继承关系
document --> HTMLDocument.prototype --> Document.prototype
HTMLHeadElement
HTMLBodyElement --> HTMLElement --> Element.prototype
HTMLTitleElement
...
dom获取方法的使用限制
getElementById 方法定义在Document.prototype上,即Element节点上不能使用。
document.getElementById()
getElementsByName 方法定义在HTMLDocument.prototype上,即非html中的document不能使用(xml document, Element)
document.getElementsByName()
getElementsByTagName 方法定义在Document.prototypr和Element.prototype上
document.getElementsByTagName()
element.getElementsByTagName()
HTMLDocument.prototype 定义了一些常用的属性,body,head分别指代HTML文档中的<body><head>标签
document.body -> body
document.head -> head
Document.prototype 上定义了documentElement,指代文档的根元素,在HTML文档中,他总是指代<html>元素
document.documentElement -> html
getElementsByClassName, querySelectorAll, querySelector 在Document.prototype, Element.prototype类中均有定义
document.getElementsByClassName() element.getElementsByClassName()
document.querySelectorAll() element.querySelectorAll()
document.querySelector() element.querySelector()
dom的一些方法,看一下例子
// 增 document.createElement() //创建元素节点 document.createTextNode() //创建文本节点 document.createComment() //创建注释节点 document.createDocumentFragment() //创建文档碎片节点 // 插 PARENTNODE.appendChild() //元素节点内插入节点 (剪切操作) PARENTNODE.insertBefore(a, b) //在父级内,a元素节点插入b元素节点之前 // 删 parent.removeChild() //父节点删除子节点 (剪切,并不是真正删除,节点还保存在返回值中) child.remove() //子节点删除自身(彻底销毁) // 替换 parent.replaceChild(new, origin)
// 方法
setAttribute() //设置属性值
getAttribute() //获得属性值
自定义方法:元素后面插入元素节点
Element.prototype.insertAfter = function(targetNode, afterNode) { var beforeNode = afterNode.nextElementSibling //忽略兼容 if (beforeNode == null) { this.appendChild(targetNode) } else { this.insertBefore(targetNode, beforeNode) } }
end !!!