2016-09-07pm
1.什么是DOM:
原生js=ECMAScript(核心语法)+DOM(专门操作网页内容的API)+ BOM(专门操作浏览器窗口的API)
DOM: Document Object Model (专门操作网页内容的API)
DOM标准: W3C 规定了操作一切结构化文档的API。
核心DOM: 操作一切结构化文档(包括HTML和XML)的通用API (万能，但繁琐)
HTML DOM: 专门操作HTML文档的简化版API (只对部分常用的API提供了简化, 不是万能)
XML DOM: 专门操作XML文档的API
鄙视题: HTML XHTML DHTML XML的区别？
HTML:专门编写网页内容的语言
XHTML: 更严格的HTML标准
DHTML: 一切实现动态网页效果的技术统称 (DHTML=HTML+CSS+JS)
XML: 可扩展的标记语言
语法同HTML,但标签可自定义
专门用于持久保存或在网络中传输结构化数据
DOM可执行的操作：查找 修改 添加 删除
2. ***DOM Tree:
2.1什么是DOM树: 网页中一切内容在内存中都是以树形结构组织在一起的。
网页加载过程:
当接收到HTML文档时——>创建一个树根节点:document对象
读取HTML内容时——>每读取一项内容就创建一个节点对象,将节点对象挂到document下
网页中的一切内容都是一个节点对象
2.2节点对象:Node
节点对象的三大属性:
nodeType:节点类型:
document: 9
element: 1
attribute: 2
text: 3
何时: 辨别获得的节点类型时
nodeName: 节点名:
document: #document
element: 标签名(全大写)
何时: 辨别元素的具体标签名
attribute: 属性名
text: #text
nodeValue: 节点值:
document: null
element: null
attribute: 属性值
text: 文本内容
2.3节点间关系:
节点树: 包含所有html内容的DOM树
-
父子关系:
parentNode: 父节点
childNodes: 所有直接子节点 (返回一个动态集合-类数组对象)
firstChild: 第一个子节点
lastChild: 最后一个子节点 -
兄弟关系:
nextSibling: 下一个兄弟
previousSibling: 前一个兄弟
何时使用: 已经获得一个节点，要找它周围的相邻的节点。
问题: 容易受看不见的空文本干扰
解决: 如果只需要获取元素，而不关心文本，可用元素树
元素树: 仅包含元素节点的树结构,强调: 不包含一切文本节点
-
父子关系:
parentElement: 父元素
children: 所有直接子元素 (返回一个动态集合-类数组对象)
firstElementChild: 第一个子元素
lastElementChild: 最后一个子节点 -
兄弟关系:
nextElementSibling: 下一个兄弟
previousElementSibling: 前一个兄弟
问题: 浏览器兼容性: IE9+
3.遍历节点:
2步:
- 先定义函数仅遍历直接子节点
- 对每个直接子节点应用和父节点相同的操作
算法: 深度优先遍历
childNodes和children:
live collection(动态集合):
不实际存储节点的完整属性
问题:每次访问集合时，都会重新查找DOM树
遍历:
for(var i=0;i<childNodes.length;i++)
造成反复查找DOM树
解决:
for(var i=0,len=childNodes.length;i<len;i++)
问题:递归的效率低
解决:用遍历API+循环
遍历API:
- 节点迭代器:
按照深度优先的原则，逐个返回每个子节点。
何时: 只要按照深度优先的顺序，遍历所有子代节点时。
如何:2步:
1.用指定父元素创建节点迭代器对象:
var iterator=
document.createNodeIterator(
parent,NodeFilter.SHOW_ALL,
.SHOW_ELEMENT
null,false
);
2.反复调用iterator的nextNode方法
返回正在遍历的当前节点对象
直到返回null为止
2.TreeWalker:
比节点迭代器更灵活的API:
基本用法和NodeIterator一样
只不过扩展了:
walker.parentNode()
walker.firstChild();
walker.lastChild();
walker.nextSibling();
walker.previousSibling();
如何: 2步:同NodeIterator
网友评论