JavaScript DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42760119/article/details/107475264

这篇博客详细介绍了JavaScript中的DOM（文档对象模型），包括DOM的概念、节点类型、元素节点的获取、DOM访问关系、节点操作、设置节点属性以及DOM操作样式。重点讲解了如何使用querySelector和querySelectorAll方法获取元素，以及通过style属性和修改className来改变样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOM（Document object Model文档对象模型）

**DOM：**文档对象模型（Document object Model），操作网页上元素的API。比如盒子移动、变色、轮播图等。

ECMAscript： javascript的语法标准。包括一些基本语法，比如：变量、表达式、函数、运算符、函数、if语句、for语句等。

**BOM：**浏览器对象模型（Browser object Model），操作浏览器部分功能的API。比如：让浏览器自动滚动。

这三部分是javascript基础的重要组成部分。

DOM

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。在Html中，一切都是节点，在dom树的数据结构中也是可以很清楚的看到的。整个html就是一个文档节点，所有节点都是object。

**解析过程：**HTML加载完成后，渲染引擎会在内存中把HTML文档生成一个DOM树，getElemenById是获取DOM上的元素节点，然后操作的时候修改的是该元素的属性。

DOM树的数据结构：
在这里插入图片描述

节点：

节点是构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。

节点的具体类行是不同的，常见的节点主要分为四类：

文档节点（文档）：整个html文档就是一个节点。
元素节点（标签）：html标签就是元素节点。
属性节点（属性）：元素的属性。
文本节点（文本）：html标签中的文本内容。（包括标签之间的空格、换行）

节点的类型不同，属性和方法也就不同。但是所有的节点都是object。

Dom可以做什么？

找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

二、元素节点的获取

DOM节点的获取方式就是获取事件源的方式。

ES5之前的获取对象的方式：

获取DOM节点的三种方式：

//方式一：通过id获取。由于id名是唯一的，所以获取的是一个元素节点。
var div1 = document.getElementById("box1");

//方式二：通过class名获取。由于clss名不是唯一的，所以获取的是一组元素节点，以数组形式返回。
var arr1 = document.getElementsByClassName("class_Name");

//方式三：通过标签名获取。由于标签名不是唯一的，所以获取的是一组元素节点，以数组形式返回。
var arr1 = document.getElementsByTagName("tag_Name");

注：方式二和三获取的都是数组，所以需要先遍历之后再使用。

特殊情况：即使方式二和三获取的数组中值只有一个，那它也被封装在数组里的。该值的获取方式：

document.getElementsByTagName("tag_Name")[0];    //取数组中的第一个元素
document.getElementsByClassName("Class_Name")[0];  //取数组中的第一个元素

ES5之后的元素的获取方式：（推荐使用下面的方法）

1、document.querySelector(“选择器”)：返回的是最先匹配的第一个对象

例如：

<body>
  <h1>hello  world1</h1>
  <h1>hello  world2</h1>
  <h1 id = "abc">hello  world3</h1>
  <h1 class = "asd">hello world4</h1>
  <h1 class = "asd">hello world5</h1>
  
  <script type="text/javascript">
   //document.querySelector()返回最先匹配的第一个对象
            var asd1 = document.querySelector('.asd')  //获取第一个类名是asd的元素对象
   var asd2 = document.querySelector('.asd:nth-child(4)')
   console.log(asd1);
   console.log(asd2);
   
   var abc = document.querySelector("#abc");  //参数是选择器的名称，和css书写方式一样
   console.log(abc);
   
   var abc1 = document.getElementById("abc");
   console.log(abc1);
   //通过document.querySelector()和 document.getElementById（）获取的对象是一样的
   console.log(abc === abc1)  //输出结果是true
   
  </script>

2、doument.querySelectorAll (“选择器”) 获取所有匹配的元素对象。

var asd = document.querySelectorAll(".asd");   //获取所有类名是asd的元素对象

三、DOM访问关系的获取

DOM的节点之间并不是相互孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

节点的访问关系是以属性的方式存在的。

在这里插入图片描述

获取父节点：

调用者就是节点，一个节点只有一个父节点。

调用方式：节点.parentNode。

获取兄弟节点：

1、下一个节点

（1）nextSibling：

火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。
IE678版本：指下一个元素节点（标签）。

（2）nextElementSibling：

火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。

总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

2、前一个节点

（1）previousSibling：

火狐、谷歌、IE9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。
IE678版本：指前一个元素节点（标签）。

（2）previousElementSibling：

火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。

总结：为了获取前一个元素节点，我们可以这样做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，综合这两个属性，可以这样写：

    前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

获取单个的子节点

1、第一个字节点

（1）firstChild：

火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。
IE678版本：指第一个子元素节点（标签）。

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。

总结：为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：

    第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

2、最后一个子节点

（1）lastChild：

火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。
IE678版本：指最后一个子元素节点（标签）。

（2）lastElementChild：

火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。

总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：

    最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

获取所有的子节点

（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。

火狐谷歌等高本版会把换行也看做是子节点。

用法：

    子节点数组 = 父节点.childNodes;   //获取所有节点。

（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】

它只返回HTML节点，甚至不返回文本节点。
在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。

虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

用法：（用的最多）

    子节点数组 = 父节点.children;   //获取所有节点。用的最多。

四、DOM节点的操作【重要！！！】

节点的操作都是函数（方法）。节点的访问关系都是属性。

1、创建节点

语法格式：

新的标签（元素节点） = document.createElement("标签名")

比如：如果我们需要创建一个li标签，或者创建一个不存在的abc标签。

<script type="text/javascript">
    var a1 = document.createElement("li");   //创建一个li标签
    var a2 = document.createElement("abc");   //创建一个不存在的标签

    console.log(a1);
    console.log(a2);

    console.log(typeof a1);    //属于object类型
    console.log(typeof a2);    //属于object类型
</script>

2、插入节点

方式一：父节点的最后插入一个新的子节点

父节点.appendChild(新的子节点);

方式二：在参考节点前插入一个新的节点。若参考节点为null，则他将在父节点里面的最后插入一个子节点。

父节点.insertBefore(新的子节点,作为参考的子节点);

<script type="text/javascript">
    var a1 = document.createElement("li");   //创建一个li标签
    var a2 = document.createElement("abc");   //创建一个不存在的标签

    var box1 = document.getElementsByClassName("box1")[0];

	box1.appendChild(a1);
	box1.insertBefore(b1,a1);   
</script>

神奇的情况~：

关于appendChild方法，有一个神奇的情况：

<div class="box1">
    <div class="box11">泪一滴在左手</div>
</div>

<div class="box2">
    <div class="box21">凝固成为寂寞</div>
</div>

在这个例子中，box11是在box1中的，box21是在box2中的。如果调用box1.appendChild(box21)，则产生结果是：box21将会称为box1中的子标签，box2中将没有这个标签。

3、删除节点

格式：

父节点.removeChild(子节点)

用父节点删除子节点，必须指定是删除哪个子节点。

如果想删除自己这个节点，可以这么做：

 node1.parentNode.removeChild(node1);

4、复制节点（克隆节点）

格式：

 要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。
 要复制的节点.cloneNode(true);

不带参数或者带参数false：只复制节点本身，不复制子节点。

带参数true：既复制节点本身，也复制所有的子节点。

五、设置节点的属性

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

1、获取节点的属性值

方式一：

    元素节点.属性名;
    元素节点[属性名];

<body>
<img src="images/1.jpg" class="image-box" title="易烊千玺" alt="时尚芭莎" id="a1">

<script type="text/javascript">
    var myNode = document.getElementsByTagName("img")[0];
	
	//获取方式：元素节点.属性名
    console.log(myNode.src);
    console.log(myNode.className);    //注意，是className，不是class
    console.log(myNode.title);

    console.log("------------");
	//获取方式：元素节点[属性名]
    console.log(myNode["src"]);
    console.log(myNode["className"]); //注意，是className，不是class
    console.log(myNode["title"]);
</script>
</body>

方式二：

 元素节点.getAttribute("属性名称");

 console.log(myNode.getAttribute("src"));
 console.log(myNode.getAttribute("class"));   //注意是class，不是className
 console.log(myNode.getAttribute("title"));

方式一和方式二的区别：

前者是直接操作标签，后者是把标签作为DOM节点，建议使用方式二。

2、设置节点的属性值

方式一：

元素节点.属性名 = 改变后的属性值

myNode.src = "images/2.jpg";     //修改src的属性值
myNode.ClassName = "image2";     //修改的class的name

方式二：

元素节点.setAttrubute(属性名，新的属性值);

myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");

3、删除节点的属性

格式：

元素节点.removeAttribute(属性名);

myNode.removeAttribute("class");
myNode.removeAttribute("id");

小结：

获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的。

方式一的元素节点.属性和元素节点[属性]:绑定的属性值不会出现在标签上。
方式二的get/set/removeAttribut: 绑定的属性值会出现在标签上。

这其实很好理解，方式一操作的是属性而已，方式二操作的是标签本身。

另外，需要注意的是：这两种方式不能交换使用，get值和set值必须使用用一种方法。

<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>

    var div = document.getElementById("box");

    //采用方式一进行set
    div.aaaa = "1111";
    console.log(div.aaaa);    //打印结果：1111。可以打印出来，但是不会出现在标签上

    //采用方式二进行set
    div.setAttribute("bbbb","2222");    //bbbb作为新增的属性，会出现在标签上

    console.log(div.getAttribute("aaaa"));   //打印结果：null。因为方式一的set，无法采用方式二进行get。
    console.log(div.bbbb);                   //打印结果：undefined。因为方式二的set，无法采用方式一进行get。

</script>
</body>

六、DOM对象的属性

DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。

1、innerHTML和innerText的区别

value：标签的value属性。
innerHTML：双闭合标签里面的内容（识别标签）。
innerText：双闭合标签里面的内容（不识别标签）。（老版本的火狐用textContent）
**outerHtml：**将本身以及内部的标签和内容都显示出来。

	<body>
		<div class="d1">
			hello world1
			<h1>child1</h1>
			<h1>child2</h1>
			<h1>child3</h1>
			
		</div>
		<div class="d2">
			hello world2
		</div>
		<div class="d3">
			hello world3
		</div>
		
		<script type="text/javascript">
			var d1 = document.querySelector('.d1');
			
			console.log(d1.innerHTML);   //获取文本以及里面的标签（携带标签）
			console.log(d1.innerText);   //获取里面的文本内容
			
			console.log(d1.outerHTML);  //把本身以及内部的标签和内容都先显示出来
			
		</script>
	</body>

结果：

在这里插入图片描述

2、nodeType属性（很少用）

nodeType == 1 表示的是元素节点（标签）。记住：元素就是标签。
nodeType == 2 表示是属性节点。
nodeType == 3 是文本节点。

例：

<div id="box1" value="111">
    焦虑和不安全感都是由于实力不足而产生的虚无感。
</div>

上面的标签中包含了三种节点：元素节点、属性节点、文本节点

获取这三种节点的方式：

获取节点的nodeType、nodeName、nodeValue

 var element = document.getElementById("box1");  //获取元素节点（标签）
    var attribute = element.getAttributeNode("id"); //获取box1的属性节点
    var txt = element.firstChild;                   //获取box1的文本节点

    //获取nodeType
    console.log(element.nodeType);       //1  元素节点
    console.log(attribute.nodeType);     //2  属性节点
    console.log(txt.nodeType);           //3  文本节点

    console.log("--------------");

    //获取nodeName
    console.log(element.nodeName);       //DIV
    console.log(attribute.nodeName);     //id
    console.log(txt.nodeName);           //#text

    console.log("--------------");

    //获取nodeValue
    console.log(element.nodeValue);     //null    
    console.log(attribute.nodeValue);   //box1    
    console.log(txt.nodeValue);         //焦虑和不安全感都是由于实力不足而产生的虚无感。

七、DOM操作修改样式（主要掌握前两种）

1、通过style属性修改样式

			var d1 = document.querySelector("#d1");
			console.log(d1);
			
			d1.style.width = "200px";
			d1.style.height = "200px";
			d1.style.backgroundColor = "skyblue";

注意：

1、通过style属性设置的值，优先级是最高的，因为是直接修改标签的style属性。
2、在设置css属性的时候，如果css属性是由多个单词组成，那么js中就需要使用驼峰命名法。

2、通过修改className类名，从而修改样式

var d2 = document.querySelector("#d2");
d2.className = "redBg";     //redBg是个类名

注意：修改类型还可以通过classlist属性的add/remove/replace进行修改className

d2.classList.add("bogFont");
d2.classList.replace("bigFont","smallFont");
d2.classList.remove("redBg");

3、通过增减style标签，来修改样式（不常用）

	var style = document.createElement("style");
			//反引号：可以放置多行字符串内容
			style.innerHTML = `
			.donghuad3{
				width: 300px;
				height: 300px;
				background-color: purple;
				animation: donghua 3s alternate infinite;
			}
			@keyframes  donghua{
				from{
					transform: translate(0,0);
				}
				to{
					transform: translate(600px, 0);
				}
			}
			`
			
			var body = document.querySelector("body");
			body.appendChild(style);