DOM的常见操作API

最新推荐文章于 2024-04-11 19:58:23 发布

IT__learning

最新推荐文章于 2024-04-11 19:58:23 发布

阅读量1k

点赞数 5

分类专栏： Java基础文章标签： javascript html5

本文链接：https://blog.csdn.net/IT__learning/article/details/113712276

版权

Java基础专栏收录该内容

28 篇文章 10 订阅

订阅专栏

DOM的常见操作API

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。一个web页面是一个文档。DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

一、DOM中常用的Node数据类型

1、Document
Document表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性。Document有下面的特性：
（1）nodeType为9
（2）nodeName为#document
（3）nodeValue为null
（4）parentNode为null
（5）子节点可能是一个DocumentType或Element
2、Element类型
Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。Element有下面几条特性：
（1）nodeType为1
（2）nodeName为元素标签名，tagName也是返回标签名
（3）nodeValue为null
（4）parentNode可能是Document或Element
（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference
3、Text类型
Text表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。Text有下面的特性：
（1）nodeType为3
（2）nodeName为#text
（3）nodeValue为文本内容
（4）parentNode是一个Element
（5）没有子节点
4、Attr类型
Attr类型表示元素的特性，相当于元素的attributes属性中的节点，它有下面的特性：
（1）nodeType值为2
（2）nodeName是特性的名称
（3）nodeValue是特性的值
（4）parentNode为null
5、Comment类型
Comment表示HTML文档中的注释，它有下面的几种特征：
（1）nodeType为8
（2）nodeName为#comment
（3）nodeValue为注释的内容
（4）parentNode可能是Document或Element
（5）没有子节点
6、DocumentFragment类型
DocumentFragment是所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点。DocumentFragment有下面的特性：
（1）nodeType为11
（2）nodeName为#document-fragment
（3）nodeValue为null
（4）parentNode为null
7、nodeList
nodeList 是一个元素的数组，如从 getElementsByTagName() 方法返回的就是这种类型。 nodeList 中的条目由通过下标有两种方式进行访问：list.item(1)和list[1]。
两种方式是等价的，第一种方式中 item() 是 nodeList 对象中的单独方法。后面的方式则使用了经典的数组语法来获取列表中的第二个条目。
8、namedNodeMap
namedNodeMap 和数组类似，但是条目是由name或index访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。出于这个目的， namedNodeMap 有一个 item() 方法，你也可以从 namedNodeMap 添加或移除条目。

二、DOM中常用的API

1、节点创建型API

（1）createElement()
createElement()方法通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签。

var li = document.createElement("li");

注意：使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中。
（2）createTextNode()
createTextNode()方法用来创建一个文本节点，createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要appendChild将其添加到HTML文档树中。

var textNode = document.createTextNode("textNode");

（3）cloneNode()
cloneNode()方法是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素。

var parent = document.getElementById("parentElement"); 
var parent1 = parent.cloneNode(true);// 传入true
parent1.id = "parent1";

注意：
①和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中。
②如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id。
③调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同。
④如果被复制的节点通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件；如果是内联方式绑定，副本节点同样会触发事件。
（4）createDocumentFragment()
createDocumentFragment方法用来创建一个DocumentFragment。在前面我们说到DocumentFragment表示一种轻量级的文档，它的作用主要是存储临时的节点用来准备添加到文档中。createDocumentFragment方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中。

创建型API总结
创建型api主要包括createElement，createTextNode，cloneNode和createDocumentFragment四个方法，需要注意下面几点：
①它们创建的节点只是一个孤立的节点，要通过appendChild添加到文档中；
②cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题；
③使用createDocumentFragment来解决添加大量节点时的性能问题。

2、节点查询型API

（1）getElementById()
根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。

<body>
    <div id="time">
        2020.11.15
    </div>
    <script>
    	var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);
    </script>
</body>

console.log 可以打印返回的元素对象，更好的查看里面的属性和方法。
使用这个接口有几点要注意：
①元素的Id是大小写敏感的，一定要写对元素的id；
②HTML文档中可能存在多个id相同的元素，则返回第一个元素；
③只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的；
（2）getElementsByTagName()
根据元素标签名获取元素，返回一个即时的HTMLCollection类型。
使用该接口有几点要注意：
①如果要对HTMLCollection集合进行循环操作，最好将其长度缓存起来，因为每次循环都会去计算长度，暂时缓存起来可以提高效率；
②如果没有存在指定的标签，该接口返回的不是null，而是一个空的HTMLCollection；
③“*”表示所有标签；
（3）getElementsByName()
根据指定的name属性来获取元素，它返回一个即时的NodeList对象。
使用这个接口有几点要注意：
①返回对象是一个即时的NodeList，它是随时变化的；
②在HTML元素中，并不是所有元素都有name属性，比如div是没有name属性的，但是如果强制设置div的name属性，它也是可以被查找到的；
③在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name；
（4）getElementsByClassName()
根据元素的class返回一个即时的HTMLCollection。
使用这个接口有几点要注意：
①返回结果是一个即时的HTMLCollection，会随时根据文档结构变化；
②IE9以下浏览器不支持；
③如果要获取2个以上classname，可传入多个classname，每个用空格相隔；
（5）querySelector()和querySelectorAll()
根据css选择器来查找元素。
document.querySelector()返回第一个匹配的元素，如果没有匹配的元素，则返回null。
document.querySelectorAll()在于它返回的是所有匹配的元素，而且可以匹配多个选择符。
使用这个接口有几点要注意：
①querySelectorAll也是通过深度优先搜索，搜索的元素顺序和选择器的顺序无关
②返回的是一个非即时的NodeList，也就是说结果不会随着文档树的变化而变化

3、节点修改型API

（1）改变元素内容
①element.innerHTML()
获取或修改起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。
②element.innerText()
获取或修改起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

<html>
	<head><title>innerHTML</title></head>
	<body>
		<div id="d1"><p id="p1">hello world </p></div>
		<script>
			var content = document.getElementById("d1");
			alert(content.innerHTML);
			alert(content.innerText)
		</script>
	</body>
</html>

通过IE浏览器打开，弹出内容为 hello world  和 hello world。
通过 Firefox 浏览器打开，弹出内容为 hello world  和 undefined。
通过 chrome 浏览器打开，弹出内容为 hello world  和 hello world。
通过上面两个示例，可以看出：innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
②element.value
获取或修改某个按钮、隐藏域、文本域等的值。

//创建文本框
UserName：<input type="text" name="uname" class="u"> 
//通过id获取文本框内容
document.getElementById("name").value;
//通过标签名文本框内容
document.getElementsByTagName("input")[0].value;
//通过name获取文本框内容
document.getElementsByName("uname")[0].value;
//通过class获取文本框内容
document.getElementsByClassName("u")[0].value

（2）改变元素属性
①setAttribute()
根据名称和值修改元素的特性。

element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。
②getAttribute()
返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。

var value = element.getAttribute("id");

③直接添加或修改节点属性

//创建文本框
<input type="text" name="uname" class="u">
//给input元素添加id属性
document.getElementsByTagName("input")[0].id="name";

4、节点关系型API

（1）父关系型api
①parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment。
②parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null。
（2）兄弟关系型api
①previousSibling：节点的前一个节点，如果该节点是第一个节点，则为null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
②previousElementSibling：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
③nextSibling：节点的后一个节点，如果该节点是最后一个节点，则为null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
④nextElementSibling：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
（3）子关系型api
①childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。
②children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。
③firstNode：第一个子节点
④lastNode：最后一个子节点
⑤hasChildNodes方法：可以用来判断是否包含子节点。

5、节点增删型API
（1）appendChild()
将指定的节点添加到调用该方法的节点的子元素的末尾。
注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方。
（2）removeChild()
删除指定的子节点并返回。
注意：如果被删除的节点不是其子节点，则程序将会报错，可以通过节点自己获取节点的父节点然后将自身删除。
（3）replaceChild()
使用一个节点替换另一个节点。oldChild是被替换的节点，newChild是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置。

parent.replaceChild(newChild,oldChild);

（4）insertBefore()
添加一个节点到一个参照节点之前。parentNode表示新节点被添加后的父节点，newNode表示要添加的节点，refNode表示参照节点，新节点会添加到这个节点之前。

parentNode.insertBefore(newNode,refNode);

IT__learning

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
DOM的常见操作API

DOM的常见操作API 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。...
复制链接

扫一扫

专栏目录