DOM概述,DOM树,遍历节点-01

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树
  1. 父子关系:
    parentNode: 父节点
    childNodes: 所有直接子节点 (返回一个动态集合-类数组对象)
    firstChild: 第一个子节点
    lastChild: 最后一个子节点

  2. 兄弟关系:
    nextSibling: 下一个兄弟
    previousSibling: 前一个兄弟
    何时使用: 已经获得一个节点,要找它周围的相邻的节点。
    问题: 容易受看不见的空文本干扰
    解决: 如果只需要获取元素,而不关心文本,可用元素树

元素树: 仅包含元素节点的树结构,强调: 不包含一切文本节点
  1. 父子关系:
    parentElement: 父元素
    children: 所有直接子元素 (返回一个动态集合-类数组对象)
    firstElementChild: 第一个子元素
    lastElementChild: 最后一个子节点

  2. 兄弟关系:
    nextElementSibling: 下一个兄弟
    previousElementSibling: 前一个兄弟
    问题: 浏览器兼容性: IE9+

3.遍历节点:

2步:

  1. 先定义函数仅遍历直接子节点
  2. 对每个直接子节点应用和父节点相同的操作
    算法: 深度优先遍历

childNodes和children:
live collection(动态集合):
不实际存储节点的完整属性
问题:每次访问集合时,都会重新查找DOM树
遍历:
for(var i=0;i 造成反复查找DOM树
解决:
for(var i=0,len=childNodes.length;i

问题:递归的效率低
解决:用遍历API+循环
遍历API:

  1. 节点迭代器:
    按照深度优先的原则,逐个返回每个子节点。
    何时: 只要按照深度优先的顺序,遍历所有子代节点时。
    如何: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

你可能感兴趣的:(DOM概述,DOM树,遍历节点-01)