DOM

2017-01-24 15:12:19   0  举报





仅支持查看

AI智能生成

DOM（文档对象模型）是一种编程接口，它允许程序和脚本动态地访问和更新网页的内容、结构和样式。DOM将整个网页表示为一个树形结构，每个节点代表网页中的一个元素，如段落、标题、图像等。通过JavaScript等编程语言，我们可以使用DOM API来操作这些节点，从而实现对网页的交互和修改。例如，我们可以使用DOM来获取或修改元素的文本内容、属性值、样式等。DOM还提供了事件处理机制，使我们能够响应用户的操作，如点击按钮、输入文本等。总之，DOM是一个重要的Web开发技术，它使得网页变得更加灵活和动态。

作者其他创作

大纲/内容

修改

内容

.innerHTML

开始标签到结束标签之间的html代码片段

.textContent

开始标签到结束标签之间的纯文本内容

去掉所有标签

翻译转义字符为原文

IE8:

.innerText

属性

标准属性

核心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

问题:

只能操作出现在开始标签中的attribute

还不能操作:

.checked .selected .disabled

解决

HTML DOM

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

只对部分常用API进行简化

特点:

简单

不是万能

需要核心DOM的补充

如何

elem.属性名

优:

直接访问内存中的property属性

还可操作:

.checked .selected .disabled

property vs attribute

attribute

出现在开始标签中的属性

property

保存在内存中对象中的属性

能用.访问的

标准属性

绝大多数标准属性都可成为attribute

内存中的元素对象中已经封装了所有标准属性的property

扩展(自定义)属性

核心DOM

HTML5

定义:

data-属性名="值"

访问:

elem.dataset.属性名

HTML DOM无法访问扩展属性

样式

内联样式：

elem.style.css属性名

强调:

样式属性名要去横线变驼峰

问题:

只能获得内联样式

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

解决

内部/外部样式表

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

var style=getComputedStyle(elem对象)

var value=style.css属性名

强调:

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

修改样式表中的样式

var sheet=document.styleSheets[i]

var rule=sheet.cssRules[i]

rule.style.样式属性=值

添加和删除

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)

HTML DOM常用对象

Image

var img=new Image();

Select/Option

属性

value

当前选中项的value

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

selectedIndex

当前选中项的下标

options

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

Option

创建

var opt=new Option(text,value)

属性

text,value,index

.length

option的个数

事件

onchange

方法

sel.add(option)

sel.remove(i)

Table/...

创建

var thead=.createTHead()

tHead

创建

var tr=.insertRow(i)

删除

.deleteRow(i)

获取

.rows

创建

var td=.insertCell(i)

删除

.deleteCell(i)

获取

.cells

var tbody=.createTBody()

var tfoot=.createTFoot()

删除

.deleteTHead()

.deleteTFoot()

获取

.tHead

.tBodies[i]

.tFoot

.rows

删除行

行分组.deleteRow(i)

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

table.deleteRow(tr.rowIndex)

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

Form

获取:

var form=document.forms[i/id/name]

属性:

.elements

获得所有表单元素的集合

包含input select textarea button

.length

获得所有表单元素的个数

方法:

form.submit()

获得表单中的元素

获得任意表单元素:

form.elements[i/id/name]

简写

如果表单元素有name属性

form.name

element

.focus()

.blur()

查找

绑定事件

查找

修改

增加

删除

DOM Tree

html文件进入内存后所有内容都是以树形结构存储

一切内容都是节点(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 文本内容

查找

不用查找就可直接获得的节点

document

document.documentElement

html

document.head

document.body

按节点间关系查找

何时

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

节点树

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

元素,属性,文本

2大类关系

1. 父子

parentNode

最靠谱

childNodes

仅查找直接子节点

firstChild

lastChild

2. 兄弟

previousSibling

nextSibling

优: 全

问题:

受看不见的换行和空格的干扰

解决

元素树

仅包含元素节点的树结构

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

2大类关系

1. 父子

parentElement

没有node结尾

children

IE8+

仅获得直接子元素

firstElementChild

lastElementChild

2. 兄弟

previousElementSibling

nextElementSibling

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

缺: 不包含一切文本节点

可用.innerHTML

兼容性问题： IE9+

childNodes和children

都返回动态集合（live collection）

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

优:

首次查找返回速度块

缺:

易造成反复查找DOM树

遍历

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

用查找API

何时:

没有获得任何节点之前，在整个页面查找想要的元素

已获得元素，需要查找其下的符合条件的子元素

按HTML查找

按id

var elem=document.getElementById("id")

强调: 只能用在document上

按标签名

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

强调:

可用在任意父元素上

返回动态集合

不仅查找直接子元素，且查找所有子代元素

按name

var elems=document.getElementsByName("name")

强调:

只能在document上调用

按class

var elems=parent.getElementsByClassName("class")

强调:

兼容性问题

IE9+

按选择器查找

Selector API

只找一个

var elem=parent.querySelector("selector")

找所有符合条件的多个

var elems=parent.querySelectorAll("selector")

按HTML vs 按选择器

1. 首次查询效率

getXXX更高

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

selector API低

每次都要返回完整数据

2. 难易:

getXXX繁琐

何时

如果只找一次即可获得想要的元素时

selector API简单

何时

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

3. 返回值:

getXXX

返回动态集合

selector API

返回非动态集合

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

在html中绑定事件

在HTML中绑定事件

<button onclick="js语句"

当单击button时，自动执行js语句

<button onclick="calc()"

问题:

经常需要快速获得当前元素

解决:

<button onclick="calc(this)"

function calc(btn){ btn->当前点击的按钮对象 }

问题:

1. 不符合内容与行为分离的原则

2. 如果动态生成的元素，无法手动添加事件绑定

解决:

在js中动态绑定事件

elem.on事件名=function(){ this->elem }

 收藏

立即使用

电子购物商城

 收藏

立即使用

JSBasicDay02(1)

 收藏

立即使用

快易捷项目实战流程

 收藏

立即使用

Bootstrap

欢快小神龙

职业：暂无

去主页





0 条评论

下一页

为你推荐

查看更多



DOM-Diff

Cierre tanque de Ar no domésticas

DOM