DOM整理

DHTML的功能    //DHTML不是新语言，DNTML=HTML+css+JavaScript

动态改变页面元素

与用户进行交互等

DHTML 对象模型包括BOM和DOM

BOM和DOM

BOM：Browser Object Model，浏览器对象模型 ，用来访问和操纵浏览器窗口，使 JavaScript 有能力与浏览器“对话”

通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作

没有相关标准，但被广泛支持

DOM：Document Object Model，文档对象模型，用来操作文档

定义了访问和操作 HTML 文档的标准方法

通过对 DOM 树的操作，实现对 HTML 文档内容的操作

W3C组织定义相关的操作标准

DOM 是 W3C（万维网联盟）的标准， 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

HTML DOM：针对HTML文档的对象模型

当网页被加载时，浏览器会创建页面的文档对象模型

通过 DOM，可以访问所有的 HTML元素，连同它们所包含的文本和属性

可以对其中的内容进行修改和删除，同时也可以创建新的元素

文档中的所有节点组成了一个文档树（或节点树）

document 对象是一棵文档树的根

节点树

整个文档是一个文档节点(document node)

每个 HTML 标签是一个元素节点 (element node)

包含在 HTML 元素中的文本是文本节点 (text node)

每一个 HTML 属性是一个属性节点 (attribute node)

注释属于注释节点(comment node)

浏览器内置的JS解释器会为载入的每一个HTML文档创建一个对应的document对象

通过document对象，可以从脚本中对HTML页面的所有的元素进行访问。

DOM1级定义了Node类型。Node类型是所有节点类型的父类型，所以Node类型提供了所有节点对象共有的基本属性和方法。

除此之外，还提供了节点关系的属性以及增加，删除节点的方法。

每种节点对应一种节点类型

Document  document节点对象的父类型

Element      所有元素节点的父类型

Attr            属性节点的类型

Text           文本节点对象的类型

Comment    注释节点对象的类型

nodeName：节点名称，String类型属性，只读

nodeType：节点类型，Number类型属性

nodeValue：节点值，String属性类型

节点间关系：父节点，子节点，兄弟节点

元素树

元素树是节点树的一个子集，只包括其中的元素节点

元素间关系

递归API

NodeIterator对象

迭代器对象：从指定对象开始，以深度优先原则，依次遍历每一个子对象，自动判断要遍历的下一节点。

var  Iterator= document。createNodeIterator(root,whattoshaw,null,false);

前两个参数

root：开始节点对象

whatToShow：NodeFilter.SHOW_ALL

NodeFilter.SHOW_ELEMENT

访问每个节点：iterator.nextNode()

返回下一个节点对象

循环遍历每个节点：2步

1. 必须先执行一次nextNode()，才是第一个节点！

2. while循环，直到nextNode()返回null为止！

while(currNode=iterator.nextNode()){//null结束

//操作当前节点对象：currNode

}

获取元素

通过元素HTML

通过元素ID名获取  document.getElementById();

通过元素标签获取  node.getElementsByTagName()

通过name属性获得取 document.getElementsByName

通过class类名获取   node.getElementsByClassName('className')

通过css获取元素

node.querySelector("selector")     //返回第一个匹配的

node.querySelectorAll(“selector”)   //返回全部匹配