常见的DOM操作-白红宇

常见的DOM操作

阅读量：6221 次

发布时间：2019-06-21

本文共 5185 字，大约阅读时间需要 17 分钟。

DOM---文档对象模型。可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说这是表示和处理一个html或xml文档的常用方法。

DOM对象树

DOM将每一个html或xml的文档都看待成内存中的一个对象树。

浏览器中的一个页面对应一个html文档。因此有一颗与之对应的html的DOM树。

在DOM树种文档内容对应了很多不同类型的节点，他们都是一个NODE对象。

DOM 代码中最常用的任务就是在页面的DOM树中导航。比方说，可以通过其“id”属性定位一个form，然后开始处理那个form中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的input 元素，以及其他HTML 元素（如img）和链接（a元素）。如果元素和文本是完全不同的类型，就必须为每种类型编写完全不同的代码。如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点，只有当需要对元素或文本作某种特殊处理时才需要考虑节点的类型。如果仅仅在DOM树中移动，就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时，如元素的属性，才需要对节点类型作专门处理。将DOM树中的所有对象都看作节点可以简化操作。记住这一点之后，接下来我们将具体看看DOM节点构造应该提供什么，首先从属性和方法开始。

NODE对象有一个nodeType的属性可用于判断节点类型

接口	nodeType常量（IE不支持）	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点（标签）
Atrr	Node.ATTRIBUTE_NODE	2	属性节点（属性）
Text	Node.TEXT_NODE	3	文本节点（文本）
Comment	Node.COMMENT_NODE	8	注释节点（注释）
Document	Node.DOCUMENT_NODE	9	文本根节点

元素节点是文档中最常见的节点，HTML或XML文档中的标签<body>,<input>,<div>都对应DOM树中的元素节点。

属性节点表示的是一个元素节点上定义的某个属性，例如<input>中定义的value属性就对应DOM树种的一个属性节点。

文本节点表示文档中的一段文字信息，例如HTML文档中定义<div>abcdef</div>其中的“abcdef”就是一个文本节点。

注释节点对应文档中的注释信息，例如<!—Comment Message-->的内容就是一个注释节点。

根节点顾名思义，表示的整个文档的根，但是需要注意它不对应文档中的任何内容。

在Javascript中有一个特殊的对象document，它可以表示当前HTML页面的根节点。

DOM对象树不同节点的名值对比

节点	nodeName（节点名）	nodeValue(节点值)	nodeType值
Element元素节点	对应标签名的大写形式如：HTML	Null	1
Attr属性节点	文档中定义的属性名如：type	文档中定义的属性值如：button	2
Text文本节点	#text	文本内容如：133	3
Comment注释节点	#comment	注释内容如：comment	8
Document根节点	#document	Null	9

根节点的属性和方法：

属性	描述
documentElement	表示文档的根元素节点在HTML文档中，它表示<html>这个标签代表的元素节点
方法	描述
getElementById()	返回文档中具有制定id属性的Element节点
方法参数为节点的id的属性值
getElementByTagName（）	以数组方式返回文档中具有制定标签的Element节点，其书序为在文档中出现的顺序标签名指的是像body，table这样的HTML标签
方法参数为标签名称。
createElement()	用指定的标记名创建新的Element节点对象
方法参数为节点标签的名字
createTextNode()	用指定的文本创建新的文本节点对象
方法参数为文本信息
createAttibute()	用指定名字创建新的Attr节点对象
方法参数为属性的名字
createComment()	用指定的字符串创建新的Comment节点对象
方法参数为注释信息

[html]

<script type="text/javascript" >

function testapi(){

//获得根节点元素

var htmlrootElement=document.documentElement;

//获得指定的元素节点

var divNode=document.getElementById("div1");

//获得整个页面所有的div元素节点

var divNodes=document.getElementsByTagName("div");

//创建元素节点

var newdivNode=document.createElement("div");

//创建文本节点

var newTextNode=document.createTextNode("aaaa");

}

</script>

元素节点的属性和方法

属性	描述
tagName	元素节点对应的标签的大写名字，例<table>元素的标签名字为Table
方法	描述
getElementsByTabName()	以数组方式返回当前与元素节点的子孙节点中具有指定标签名的所有元素节点，其准许为在文档中出现的顺序
方法参数为节点的标签名
getAttribute()	以字符串形式返回指定属性的值
方法参数为属性名称
getAttributeNode()	以属性节点对象的形式返回指定属性的值
方法参数为属性名称
setAttribute()	设置指定的属性的值，如果该属性不存在则添加新属性
方法的第一个参数为属性的名称方法的第二个参数为属性的值
setAttributeNode()	把指定的属性节点添加到该元素的属性列表中
方法的参数为属性节点对象
has Attribute()	如果该元素具有制定名字的属性，则返回true
removeAttribute()	从元素节点中删除指定的属性
	方法参数为属性的名称
removeAttributeNode()	从元素节点的属性列表中删除指定的Attr节点
方法参数为属性的名称

元素节点的操作：

[html]

//根据标签名获得元素节点

var divNode2=document.getElementById("div2");

var divNodes2=divNode2.getElementsByTagName("div");

//操作属性

var inputtext=document.getElementById("inputtext");

var flag=inputtext.hasAttribute("value");

inputtext.setAttribute("value", "aaacede");

var textValue=inputtext.getAttribute("value");

flag=inputtext.hasAttribute("value");

inputtext.removeAttribute("value");

alert("完成");

另一种操作元素属性的方法：

[html]

//另一种操作元素属性的方法

.value="另一种操作元素属性的方法";

两种方法的差异（以onclick事件为例）：

当我们操纵按钮单击事件时，第一种方式不显示结果，而第二种方式才显示

[html]

var clic=document.getElementById("clic");

//不显示结果，操纵无效

clic.setAttribute("onclick", function(){alert("不显示")});

//显示结果，操纵有效

clic.onclick=function(){alert("显示")};

属性节点的属性和方法（因为很少用，所以这里就不举例了）：

属性	描述
Name	属性名
Value	属性值

所有节点（Node）都拥有的属性和方法

属性	描述
attributes	表示该节点的所有属性节点对象的数组
nodeType	代表节点的类型
nodeName	返回节点的名字
nodeValue	代表节点的内容
childNodes	当前节点的所有子节点数组，如果没有子节点，则返回空数组
parentNode	返回当前节点的父节点，如果没有父节点，则返回null
firstChild	返回当前节点的一个子节点，如果没有子节点，则返回null
lastChild	返回当前节点的最后一个子节点，如果没有子节点，则返回null
nextSibling	返回当前节点的下一个兄弟节点。如果没有这样的节点，则返回null
previousSibling	返回当前节点的上一个兄弟节点，如果没有这样的节点则返回null
方法	描述
hasChildNodes()	如果当前节点拥有子节点，则返回true
appendChild()	给当前节点增加一个子节点，增加的子节点位于当前节点的所有子节点的末尾
方法参数为Node对象
InsertBefore()	插入一个节点，为止在当前节点的指定子节点之前，如果指定子节点不存在，则执行效果和appendChild方法相同。如果插入的已经是当前节点的子节点，则将这个节点移动到指定节点前
方法第一个参数是要插入的节点。方法的第二个参数是当前节点的指定子节点，新插入的节点位于这个节点之前。
removeChild()	从文档树中删除当前节点的指定子节点，同时返回指定的子节点。
方法的参数是呀哦删除的子节点。
replaceChild()	用另一个节点替换当前节点的一个子节点，并且返回指定的子节点。
方法第二个参数是新的子节点。方法第二个参数是被替换的子节点。
cloneNode()	复制当前节点，或者复制当前节点以及它的所有子孙节点。
方法参数为true或false。True表示递归的复制所有子孙节点，false表示只复制当前节点。