欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript利用HTML DOM进行文档操作的方法_javascript技巧

程序员文章站 2022-03-09 11:33:36
...
HTML DOM 树

JavaScript利用HTML DOM进行文档操作的方法_javascript技巧

一、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.getElementsByTagName(name) :获取带有指定标签名称的所有元素

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()在当前元素节点设置属性节点,邀请调用此方法的节点的类型为元素类型,参数要设置的属性节点

示例:



使用DOM创建并添加节点
container.appendChild(pEle); //创建一个超链接标签节点 var aEle = document.createElement("a"); //创建文本节点 var txtOfA = document.createTextNode("博客园"); //在元素节点中添加文本节点,博客园 aEle.appendChild(txtOfA); //创建一个href属性节点 var attrOfA = document.createAttribute("href"); //将href属性节点设置其属性值 attrOfA.nodeValue = "http:www.cnblogs.com"; //将属性节点添加到超链接元素节点中,即设置a元素标签的属性节点 aEle.setAttributeNode(attrOfA); //将元素节点a添加到div中 container.appendChild(aEle); } //浏览器窗口加载时调用该方法 window.onload = createAndAddNode;