1 Node类型
除IE外所有浏览器都可以访问这个类型(因为IE中的DOM对象都是以COM对象的形式实现的),而且js中的所有节点类型都继承自Node类型。
1.1 nodeName/nodeValue/nodeType
1.2 节点关系
-
childNodes 返回结果是Nodelist类型,不是数组。
Nodelist是基于DOM结构动态查询的结果,DOM的变化能自动反映在查询结果中。可通过方括号进行访问,也可用item(i)进行访问。 可通过Array。prototype.slice.call(nodelist,0) 将Nodelist类型转化成数组,也可以通过遍历Nodelist将其转化成数组。
firstChild/lastChild
nextSibling/previousSibling
parentNode
-
ownerDocument
ownerDocument:所有节点都有的属性,指向表示整个文档的文档节点,任何节点都不能同时存在于多个文档中。通过这个属性可以直接访问文档节点,而不必层层回溯。
1.3 操作节点
appendChild()
insertBefore()
replaceChild()
removeChild()
1.4 新建/拷贝节点
拷贝:cloneNode()
当参数为true时,执行深拷贝,会将该节点的子节点也拷贝。但是这个函数不会复制添加到节点中的js属性,例如时间处理程序,这个只复制特性、子节点(指定true时)。(IE浏览器中另说)
1.5 查找元素(document./element.)
-
getElementById()
注意IE7及较低版本浏览器的怪癖:会返回name值为指定‘ID’的input元素。
-
getElementsByTagName()
返回的是HTMLCollection对象,是一个动态集合。
getElementsByName()
2 Document类型
document对象是HTMLDocument类型的一个实例,HTMLDocument继承自Document。并且,document对象是window对象的一个属性。
2.1 文档的子节点
documentElement属性直接指向html元素
body属性,指向body元素
doctype属性,指向文档声明标签
2.2 文档信息
title
-
domain
不同子域的页面无法通过js通信,设为相同就可互相访问对方的js对象了。 域名属性刚开始是松散的不能将它再设置为紧绷的。
URL
2.4 特殊集合
document.images 所有image元素
document.links 所有有href的a元素
document.anchors 所有带name特性的a元素
1.5 新建元素
createElement()
createTextNode()
createDocumentFragment()
createAttribute()
2.6 DOM 一致性检测
document.implementation.hasFeature()
一般不要相信这个的检测结果,因为可以自行修改结果。
2.7 文档写入
document.write()
document.writeln()如果在文档加载完毕后写入会重写整个页面。
document.open()
document.close()如果是在页面加载期间写入,则不需要用到这两个方法。
3 Element类型
所有的元素都是通过HTMLElementle类型或其自类型表示的,HTMLElement类型继承自Element类型。
getAttribute()
setAttribute()
-
removeAttribute()
任何元素的所有特性,也都可以通过DOM元素的本身的属性来访问。 只有公认的(不是自定义的)特性才会以属性的形式添加到DOM对象中。 有些特性通过属性访问和getAttribute()访问的结果可能不同,例如style特性和事件处理程序 给元素添加自定义属性,该属性不会变成特性 总而言之就是:自定义的特性不能通过属性的方式访问,自定义的属性不能通过getAttribute访问(应该是这样)。
-
attributes属性
一般用来遍历特性时使用(element.attributes.length)
继承Node类型的childNodes等属性和创建,查找,添加删除子节点等方法。
4 Text类型
可通过nodeValue或data属性访问Text节点中包含的文本。
操作文本节点中的文本:
appendData()deleteData()replaceData()insertData()splitText()
当两个文本节点相邻时,可通过normalize()将其变成一个文本节点。normalize()是从node类型继承的函数
分割文本节点
textnode.splitText(5) 返回一个新文本节点,且该节点与原节点的parentNode相同5 comment类型(注释)
6 DocumentFragment
在文档中没有标记。
文档片段永远不会成为文档的一部分。当通过appendchild将文档片段添加到文档中时,只是将文档片段的子节点添加到文档中,文档片段将会删除这些子节点。
当需要添加多个子节点时,如果一个一个添加,那么将会导致浏览器的反复渲染,这时可以将这些子节点添加到文档片段中,然后再添加到文档中。
7 动态添加脚本
7.1 动态添加脚本
7.2 动态添加样式7.3 操作表格7.4 NodeList最好将length的值保存在一个变量中,因为length的值是动态的。 访问NodeList相当于一次基于文档的查询,所以要少访问NodeList,或将其存在缓存中。