DOM整理

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

动态改变页面元素

与用户进行交互等

DHTML 对象模型包括BOM和DOM

DOM整理_第1张图片

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 对象是一棵文档树的根

节点树

DOM整理_第2张图片

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

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

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

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

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

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

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

DOM整理_第3张图片

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

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

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

Document  document节点对象的父类型

Element      所有元素节点的父类型

Attr            属性节点的类型

Text           文本节点对象的类型

Comment    注释节点对象的类型

DOM整理_第4张图片

nodeName:节点名称,String类型属性,只读

DOM整理_第5张图片

nodeType:节点类型,Number类型属性

DOM整理_第6张图片

nodeValue:节点值,String属性类型

DOM整理_第7张图片

节点间关系:父节点,子节点,兄弟节点

DOM整理_第8张图片
DOM整理_第9张图片

元素树

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

DOM整理_第10张图片

元素间关系

DOM整理_第11张图片

递归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”)   //返回全部匹配

你可能感兴趣的:(DOM整理)