DOM 是 W3C 制定的用于访问诸如 XML 和 Xhtml 等结构化文档的标准。通过本文给大家介绍 JavaScript 利用 HTML DOM 进行文档操作的方法,需要的朋友参考下吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
HTML DOM 树
一、DOM 简介
DOM 是 W3C 制定的用于访问诸如 XML 和 XHTML 等结构化文档的标准。
W3C 文档对象模型 (DOM) 是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口
核心 DOM:用于任何结构化文档的标准模型
XML DOM:用于 XML 文档的标准模型。是用于获取、更改、添加或删除 XML 元素的标准。
HTML DOM: 用于 HTML 文档的标准模型。定义了所有 HTML 元素的对象和属性,以及访问它们的方法(接口)。
二、DOM 节点
根据 DOM 规范,文档中的每个成分都是一个节点。DOM 的规定:
整个文档是一个文档节点,又称为根节点
注释属于注释节点
2.1DOM 接口及其属性和方法
DOM 把文档模拟为一系列节点接口。可通过 JavaScript 或其他编程语言来访问节点。对
DOM 的编程接口是通过一套标准的属性和方法来定义的。
2.1.1DOM 属性
一些典型的 DOM 属性:
x.nodeName:x 的名称
x.nodeValue:x 的值
x.parentNode:x 的父节点,,除了根节点外,只有唯一一个父节点
x.childNodes:x 的子节点,可以有多个子节点
x.attributes:x 的属性节点集合,可以有多个属性
其中,x 是一个节点对象
2.1.2DOM 方法
一些典型的 DOM 方法:
x.appendChild(node) : 向 x 插入子节点
x.removeChild(node) : 从 x 删除子节点
实例:
- //获得文档标题的文本内容
- document.getElementsByTagName("title")[0].childNode[0].nodeValue
2.1.3 访问节点
方法一:通过使用 getElementsByTagName() 方法
方法二:通过循环遍历节点树
方法三:通过利用节点的关系在节点树中导航
2.1.4 节点信息:
nodeName : 获取节点的名称,是只读的。
nodeValue: 获取或设置节点的值
nodeType:节点的类型,是只读的。1,表示元素,2 表示属性,3 表示文本,8
表示注释,9 表示文档
三、节点操作
3.1 创建节点
createElement(tagName): 创建元素节点
createTextNode(text):创建文本节点
createAttribute(attrName):创建属性节点
3.2 添加节点
新创建的节点需要与其他已经存在的节点组织关系,才能让它真正属于文档树。
appendChild(node) 在当前节点内部最后一个子节点后面添加新的子节点,参数为新的子节点
insertBefore(newNode,node) 在当前节点内部指定的子节点之前添加新的子节点,第一个参数为新的子节点,第二个参数为当前节点内部指定的子节点
insertAfter() 在当前节点内部指定的子节点之后添加新的子节点,第一个参数为新的子节点,第二个参数为当前节点内部指定的子节点
setAttributeNode() 在当前元素节点设置属性节点,邀请调用此方法的节点的类型为元素类型,参数要设置的属性节点
示例:
3.3 修改节点
改变节点一般指改变元素内部的文本,或改变元素的属性值。这两种情况都可以在访问到文本节点或属性节点后,为其 nodeValue 赋值来实现更改。对于后者,还可以
在元素节点上调用 setAttribute 方法来实现属性值的改变。
示例:
3.3 删除节点
删除节点一般指从元素节点内部删除子元素或元素包含的文本,也可实现对元素节点包含的属性节点的删除
四、小结
DOM 是文档在内存中表现的树形结构,称为 DOM 树;DOM 是 W3C 制定的访问文档的标准方法和属性,称为 DOM 接口
文档中的每个数据在树形结构上表示为一个节点,由所有节点组成的树形结构称为节点树或 DOM 树
节点有多种类型,常见的有元素节点、属性节点、文本节点、根节点、等。节点有名称和值,但不同类型的节点其名称和值含义不同
createElement() 方法用于创建元素节点,createAttribute() 方法用于创建属性节点,createTextNode() 方法用于创建文本节点,向元素节点内添加子元素节点或文本节点,可使用 appendChild() 方法。还有 insertAfter() 和 insertBefore() 方法用于在特定的节点前后插入新的节点。需要注意的是为元素节点添加属性节点的方法却是 setAttributeNode() 方法。
要修改文本节点的值或更改属性节点的值,应使用节点的 nodeValue 属性
删除节点使用 removeChild() 方法。
关于 JavaScript 利用 HTML DOM 进行文档操作的方法,小编就给大家介绍这么多,希望对大家有所帮助!
来源: http://www.phperz.com/article/17/0402/266536.html