js dom 框架（js大神不愿意告诉你dom的那些事）

DOM

什么是DOM

document Object Model

专门操作网页内容的API标准

W3C

为什么

统一不同浏览器操作网页内容的API

用DOM操作网页内容，几乎所有浏览器100%兼容

DOM Tree

网页中一切内容都是节点(Node)对象

一切节点对象都存储在一个树型结构中

根节点

document

节点对象三大属性

nodeType

节点的类型

何时

判断节点类型

document 9 elem 1 attr 2 text 3

问题:

无法进一步判断元素的名称

解决

另见:

nodeName

节点名称

何时

只要进一步判断元素的名称

document #document elem 全大写标签名 attr 属性名 text #text

nodeValue

节点值

document null elem null attr 属性值 text 文本内容

DOM操作

构建DOM树

查找触发事件的元素

绑定事件

查找要操作的元素

修改

增加

删除

事件处理函数中的this

自动获得触发事件的当前元素

查找

不需要查找可直接获得的节点

document

document.documentElement

html

document.head

document.body

document.forms[i/"id"]

form

按节点间关系查找

何时

已经获得一个节点，要找周围的相关节点时

节点树

包含所有网页内容(节点)的树结构

2大类关系

1. 父子

elem.parentNode

最靠谱

elem.childNodes

*直接*子节点

elem.firstChild

elem.lastChild

2. 兄弟

elem.previousSibling

elem.nextSibling

优: 完整

问题:

受看不见的空字符的干扰

解决

元素树

仅包含元素节点的树结构

不是一棵新树，仅是节点树的子集

何时

只关心元素，不关心文本时

2大类关系

1. 父子

elem.parentElement

没有node结尾

elem.children

IE8

elem.firstElementChild

elem.lastElementChild

2. 兄弟

elem.previousElementSibling

elem.nextElementSibling

优: 不受看不见的空字符的干扰

缺: 不包含一切文本节点

可用.innerHTML

兼容性问题： IE9

childNodes和children

都返回动态集合（live collection）

不实际存储数据，每次访问集合，都重新查找DOM树

优:

首次查找返回速度快

缺:

反复访问集合，会导致反复查找DOM树

遍历

for(var i=0,len=children.length;i<len;i )

递归遍历

何时

只要遍历一个父节点下所有后代节点

如何

//Step1: 仅遍历parent的直接子节点 function getChildren1(parent){ console.log(parent.nodeType!=3?parent.nodeName:parent.nodeValue); var children=parent.childNodes; for(var i=0,len=children.length;i<len;i ){ //Step2: 为每个子节点调用和父节点完全相同的函数 arguments.callee(children[i]); } }

深度优先遍历

当同时有子节点和兄弟节点时，优先遍历子节点。所有子节点遍历完，才遍历兄弟节点

问题: 递归的效率是极低

解决: 可用循环代替递归

function getChilddren2(parent){ //Step1: 创建迭代器对象 var iterator=document.createNodeIterator( parent, NodeFilter.SHOW_ALL , null, false .SHOW_ELEMENT ); var node; while((node=iterator.nextNode())!=null){ //node获得当前正在遍历的节点 console.log(node.nodeType!=3?node.nodeName:node.nodeValue); } }

问题:

只能遍历所有，如需筛选，得自己写判断

解决:

如何按条件查询

按HTML查找

按id

var elem=document.getElementById("id")

返回一个元素对象

如果找不到，返回null

强调: 只能用在document上

按标签名

var elems=parent.getElementsByTagName("标签名")

返回动态集合

如果找不到，返回空集合

强调:

可用在任意父节点上

不仅查找直接子节点，且查找所有后代节点

按name

var elems=document.getElementsByName("name")

强调:

只能在document上调用

按class

var elems=parent.getElementsByClassName("class")

返回动态集合

如果找不到，返回空集合

强调:

可用在任意父节点上

不仅查找直接子节点，且查找所有后代节点

只要class中包含指定的类名，就选择

兼容性问题

IE9

问题:

一次只能用一个条件查找，如果查找条件复杂时，会步骤繁琐

按选择器查找

Selector API

只找一个

var elem=parent.querySelector("selector")

找所有符合条件的多个

var elems=parent.querySelectorAll("selector")

返回非动态集合

强调:

可在任意父元素上调用

受制于浏览器对选择器的兼容性

按HTML vs 按选择器

1. 返回值:

按HTML

返回动态集合

selector API

返回非动态集合

直接存储所有数据，反复访问集合，不需要反复查找DOM树

2. 首次查询效率

按HTML更高

仅返回需要的内容，不需要准备完整数据

selector API低

第一次要返回完整数据

3. 易用性:

按HTML繁琐

selector API简单

何时

如果只凭一个条件即可获得想要的元素时，首选按HTML查找

如果需要多级复杂条件查找才能获得想要的元素时，用selector API

修改

内容

.innerHTML

获取或设置开始标签到结束标签之间的html代码片段

.textContent

获取或设置开始标签到结束标签之间的纯文本内容

去掉所有标签

翻译转义字符为正文

IE8:

.innerText

表单元素的内容

.value

属性

标准属性

核心DOM

操作一切结构化文档的通用API

即可操作HTML，又可操作XML

获取

了解

var attrNode=elem.attributes[i/属性名] .getAttributeNode("属性名")

var value=attrNode.value

var value=elem.getAttribute("属性名")

修改

elem.setAttribute("属性名",属性值)

如果属性不存在，也可set

判断是否包含

var bool=elem.hasAttribute("属性名")

移除

elem.removeAttribute("属性名")

只移除开始标签中的attribute，不删除内存中对象的property

特点

优

万能

缺

繁琐

解决

HTML DOM

专门操作HTML文档的简化版API

只对部分常用API进行简化

如何

elem.属性名

所有HTML标准属性都被封装在HTML DOM对象中，可直接用.访问。用法普通对象的属性完全一样

特点:

优

简单

缺

不是万能

需要核心DOM的补充

状态属性

disabled, checked, selected

问题:

核心DOM不能操作:

解决:

HTML DOM

elem.状态

.checked .selected .disabled

选择器:

查找指定状态的元素

:checked :selected :disabled

扩展(自定义)属性

何时

代替id,元素,class选择器，给多个元素添加行为

HTML DOM无法访问扩展属性

核心DOM

HTML5

定义:

data-属性名="值"

访问:

elem.dataset.属性名

查找

CSS属性选择器

[data-属性名=值]

样式

内联样式：

elem.style.css属性名

强调:

css属性名要去横线变驼峰

何时

专门用于修改内联样式

不影响其他元素的样式

优先级最高

问题:

获取时，只能获得内联样式

无法访问从样式表层叠或继承来的完整样式

解决

获取一个元素计算后的完整样式:

计算后的样式:

最终应用到元素上的完整样式

包括所有内联，内部，外部样式

将相对单位的值，计算为绝对单位

何时

只要获取样式，就要获取计算后的样式

var style=getComputedStyle(elem对象)

var value=style.样式属性名

强调:

通过getComputedStyle获得的样式对象是只读

内部/外部样式表

修改样式表中的样式

var sheet=document.styleSheets[i]

var rule=sheet.cssRules[i]

如果获得的是keyframes，就需要继续找子rule

rule.style.样式属性=值

最好的修改样式的做法

修改class属性，批量应用样式

添加和删除

3步

创建新元素对象

var elem=document.createElement("标签名")

设置关键属性

将元素添加到DOM树

parent.appendChild(child)

parent.insertBefore(child,oldChild)

parent.replaceChild(child,oldChild)

问题:

每操作一次DOM树，都会导致重新layout

解决

优化

尽量少的操作DOM树

如果同时添加父元素和子元素

先在内存中将子元素添加到父元素

再将父元素一次性添加到DOM树上

如果同时添加多个平级子元素

使用文档片段

什么是

内存中临时存储多个子元素的虚拟父元素

3步:

创建文档片段

var frag=document.createDocumentFragment();

将子元素临时添加到frag中

frag.appendChild(child)

将frag添加到DOM树

parent.appendChild(frag)

强调:

frag不会成为页面元素，添加子元素后，frag自动释放

删除

parent.removeChild(child)

child.parentNode.removeChild(child)

HTML DOM常用对象

Image

var img=new Image();

Select/Option

属性

value

当前选中项的value

如果选中项没有value，则使用内容

selectedIndex

当前选中项的下标

options

获得当前select下所有option的集合

length

相当于.options.length

获得option的个数

清空option

.length=0

事件

onchange

当选中项发生改变时

方法

sel.add(option)

不支持文档片段

sel.remove(i)

Option

创建

var opt=new Option(text,value)

属性

text,value,index

Table/...

创建

var thead=.createTHead()

var tbody=.createTBody()

var tfoot=.createTFoot()

删除

.deleteTHead()

.deleteTFoot()

获取

.tHead

.tBodies[i]

.tFoot

行分组

创建

var tr=.insertRow(i)

固定套路

1. 末尾追加一行: insertRow()

2. 开头插入一行: insertRow(0)

删除

.deleteRow(i)

问题

i无法自动获得

解决

首选

table.deleteRow(tr.rowIndex)

获取

.rows

tr

创建

var td=.insertCell(i)

删除

.deleteCell(i)

获取

.cells

删除行

行分组.deleteRow(i)

i是相对于当前行分组内的位置

table.deleteRow(tr.rowIndex)

rowIndex是相对于整个表中的位置

Form

获取:

var form=document.forms[i/id]

属性:

.elements

获得所有表单元素的集合

input textarea select button

.length

.elements.length

获得所有表单元素的个数

方法:

form.submit()

代替submit按钮，在程序中手动提交表单

Element

获得表单中的元素

获得任意表单元素:

form.elements[i/id/name]

如果表单元素有name属性

form.name

方法

.focus()

.blur()

事件

onsubmit

在最终提交表单之前触发

,