JavaScript DOM基础（1）

最新推荐文章于 2022-11-19 19:59:04 发布

CodePoorFish

最新推荐文章于 2022-11-19 19:59:04 发布

阅读量462

点赞数

分类专栏：前端笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43350001/article/details/122801831

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM模型，包括其基本概念、节点类型，以及如何通过getElementById(), getElementsByTagName(), querySelector(), querySelectorAll()等方法获取元素。讲解了动态创建元素、插入、删除和复制操作，特别关注了与CSS选择器相关的query方法。

摘要由CSDN通过智能技术生成

一、简介

1、DOM是什么

DOM，全称Document Object Model（文档对象模型），它是由W3C定义的一个标准。DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。

2、DOM结构

DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素。
在这里插入图片描述
利用这种简单的“树形关系”，我们可以把各节点之间的关系清晰地表达出来。每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。

3、节点类型

在JavaScript中，节点也是分为很多类型的。DOM节点共有12种类型，不过常见的只有三种。

元素节点
属性节点
文本节点

<div class="wrapper">CSDN</div>

如上述代码中实际包含三个节点（而不是一个），虽然代码中只包含一个div元素，但是div元素只作为一个元素节点，除此之外还包含 class=“wrapper” 的属性节点，以及 CSDN 的文本节点，所以一共存在三个节点。

注意：节点跟元素是不一样的概念，节点是包括元素的。

在JavaScript中，我们可以使用nodeType属性来判断一个节点的类型。不同节点的nodeType属性值不同。
在这里插入图片描述
另外，需要注意的是，一个元素就是一个节点，这个节点称之为“元素节点”；属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点；只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。

二、获取元素

在JavaScript中，我们可以通过以下六种方式来获取指定元素。

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelector()和querySelectorAll()
getElementsByName()
document.title和document.body

1、getElementById()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function (){
				var oDiv = document.getElementById("div1");
				oDiv.style.color = "red";
			}
		</script>
	</head>
	<body>
		<div id="div1">JavaScript</div>
	</body>
</html>

运行结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMgux5m5-1644228855651)(img/1.jpg)]

其中：window.onload = function (){} 这一串代码的作用是：表示在整个页面加载完成后执行的代码块。
浏览器是从上到下解析一个页面的。这个例子的JavaScript代码在HTML代码的上面，
如果没有window.onload，浏览器解析到document.getElementById(“div1”)就会报错，
因为它不知道id为div1的元素究竟在哪。

2、getElementsByTagName

可以使用getElementsByTagName()方法来通过标签名选中元素。
getElementsByTagName()方法获取的是一堆元素。
实际上这个方法获取的是一个数组，如果我们想得到某一个元素，
可以使用数组下标的形式获取。准确来说，
getElementsByTagName()方法获取的是一个“类数组”（也叫伪数组），
也就是说这不是真正意义上的数组。
因为我们只能使用到length属性以及下标的形式，但是对于push()等方法是没办法在这里用的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var oUl = document.getElementById("list");
				var oLi = oUl.getElementsByTagName("li");
				oLi[2].style.color = "blue";
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
	</body>
</html>

运行结果：在这里插入图片描述

getElementById()和getElementsByTagName()这两个方法的一些重要区别。

getElementsByTagName()可以操作动态创建的DOM：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>03</title>
        <script type="text/javascript">
            window.onload = function(){
                document.body.innerHTML = "<input type='button' value='按钮' />" +
                    "<input type='button' value='按钮' />" +
                    "<input type='button' value='按钮' />";
                var oBtn = document.getElementsByTagName("input");
                oBtn[0].onclick = function(){
                    alert("一共有：" + oBtn.length + "个表单元素");
                }
            }
        </script>
    </head>
    <body>
        
    </body>
</html>

运行结果：在这里插入图片描述

点击第一个按钮后效果：在这里插入图片描述

document.body.innerHTML=……表示动态为body元素添加DOM元素。oBtn[0].onclick = function(){……}表示为第一个按钮添加点击事件。从这个例子可以看出，getElementsByTagName()方法可以操作动态创建的DOM元素。

getElementById()不可以操作动态创建的DOM：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>03</title>
        <script type="text/javascript">
            window.onload = function(){
                document.body.innerHTML = "<input type='button' id='btn' value='按钮' />" +
                    "<input type='button' value='按钮' />" +
                    "<input type='button' value='按钮' />";
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function(){
                    alert("一共有：" + oBtn.length + "个表单元素");
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

运行结果：在这里插入图片描述

从这个例子我们可以看出，getElementById()是无法操作动态创建的DOM的。getElementById()和getElementsByTagName()有以下三个明显的区别：

getElementById()获取的是一个元素，而getElementsByTagName()获取的是多个元素（伪数组）。
getElementById()前面只可以接document，也就是document.getElement ById()；getElementsByTagName()前面不仅可以接document，还可以接其他DOM对象。
getElementById()不可以操作动态创建的DOM元素，而getElementsBy TagName()可以操作动态创建的DOM元素。

3、querySelector()和querySelectorAll()

JavaScript新增了querySeletor()和querySeletorAll()这两个方法，使得我们可以使用CSS选择器的语法来获取我们所需要的元素。querySelector()表示选取满足选择条件的第一个元素，querySeletorAll()表示选取满足条件的所有元素。对于id选择器来说，由于页面只有一个元素，建议大家用getElementById()，因为getElementById()方法效率更高，性能也更好。当选取的只有一个元素时，querySelector()和querySelectorAll()是等价的。

querySelectorAll()的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oDiv = document.querySelectorAll(".test");
            oDiv[1].style.color = "red";
        }
    </script>
</head>
<body>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
    <div class="test">JavaScript</div>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
</body>
</html>

运行结果：在这里插入图片描述
document.querySelectorAll(".test")表示获取所有class为test的元素。由于获取的是多个元素，因此这也是一个类数组，想要精确得到某一个元素，也需要使用数组下标的形式来获取。

querySelector()的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oLi = document.querySelector("#list li:nth-child(3)");
            oLi.style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

运行结果：在这里插入图片描述

4、getElementsByName()

对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

单选按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oInput = document.getElementsByName("sex");
            oInput[2].checked = true;
        }
    </script>
</head>
<body>
    <label><input type="radio" name="sex" value="male">男</label>
    <label><input type="radio" name="sex" value="female">女</label>
    <label><input type="radio" name="sex" value="unknown">隐私</label>
</body>
</html>

运行结果：在这里插入图片描述

复选框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oInput = document.getElementsByName("color");
            for (var i=0; i<oInput.length; i++)
                oInput[i].checked = true;
        }
    </script>
</head>
<body>
    <label><input type="checkbox" name="color" value="red">红色</label>
    <label><input type="checkbox" name="color" value="blue">蓝色</label>
    <label><input type="checkbox" name="color" value="green">绿色</label>
</body>
</html>

运行结果：在这里插入图片描述

5、document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，即 document.title 和 document.body 方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            document.title = "我是谁";
            document.body.innerHTML = "<strong style='color: aqua;'>这是一个深刻的哲学问题我也回答不上来。</strong>";
        }
    </script>
</head>
<body>
</body>
</html>

运行结果：在这里插入图片描述

三、创建元素

在JavaScript中，我们可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。

1、创建简单元素（不带属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("content");
            var oStrong = document.createElement("strong");
            var oTxt = document.createTextNode("别叫我，我还能睡！");

            // 将文本节点插入strong元素中
            oStrong.appendChild(oTxt);
            // 将strong元素插入div中
            oDiv.appendChild(oStrong);
        }
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

运行结果：在这里插入图片描述

这里使用document.createElement(“strong”)动态创建了一个strong元素；然后我们使用document.createTextNode()创建了一个文本节点，并且使用appendChild()方法，把这个文本节点插入到strong元素中去；最后再使用appendChild()方法把已经创建好的“有内容的strong元素插入到div元素中，这时才会显示出内容。

2、创建复杂元素（带属性）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oInput = document.createElement("input");
            oInput.id = "submit";
            oInput.type = "button";
            oInput.value = "提交";

            document.body.appendChild(oInput);
        }
    </script>
</head>
<body>
    
</body>
</html>

运行结果：
在这里插入图片描述

3、动态创建图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oImg = document.createElement("img");
            oImg.className = "pic";
            oImg.src = "kenan.jpg";
            oImg.style.height = "400px"
            oImg.style.border = "1px solid silver";

            document.body.appendChild(oImg);
        }
    </script>
</head>
<body>
    
</body>
</html>

运行结果：
在这里插入图片描述
在操作动态DOM时，设置元素class用的是className而不是class，因为JavaScript中class已经作为保留字。

4、创建多个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 为表格设置合并边框模型 */
        table {border-collapse: collapse;}
        tr,td{
            width: 80px;
            height: 40px;
            border: 1px solid gray;
        }
    </style>
    <script>
        window.onload = function(){
            // 动态创建表格
            var oTable = document.createElement("table");
            for (var i=0; i<3; i++){
                var oTr = document.createElement("tr");
                for (var j=0; j<3; j++){
                    var oTd = document.createElement("td");
                    oTr.appendChild(oTd);
                }
                oTable.appendChild(oTr);
            }
            document.body.appendChild(oTable);
        }
    </script>
</head>
<body>
    
</body>
</html>

运行结果：
在这里插入图片描述

从上面几个例子，我们可以总结一下，如果想要创建一个元素，需要以下四步：

创建元素节点：createElement()
创建文本节点：createTextNode()
把文本节点插入元素节点：appendChild()
把组装好的元素插入到已有元素中：appendChild()

四、插入元素

在JavaScript中，插入元素有两种方法：

appendChild()
使用 appendChild() 把一个新元素插入到父元素的内部子元素的“末尾”。
```
A.appendChild(B);
```
其中A表示父元素，B表示动态创建好的新元素。
insertBefore()
使用 insertBefore() 方法将一个新元素插入到父元素中的某一个子元素“之前”。
```
A.insertBefore(B, ref);
```
A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            // 添加鼠标点击事件
            oBtn.onclick = function(){
                var oUl = document.getElementById("list");
                var oTxt = document.getElementById("txt");

                // 将文本框的内容创建为一个文本节点
                var textnode = document.createTextNode(oTxt.value);
                // 创建一个li元素
                var oLi = document.createElement("li");
                oLi.id = oTxt.value;
                // 将文本节点插入li元素中
                oLi.appendChild(textnode);
                oUl.appendChild(oLi);
            }

            var oBtn = document.getElementById("btn2");
            // 添加鼠标点击事件
            oBtn.onclick = function(){
                var oUl = document.getElementById("list");
                var oTxt = document.getElementById("txt");
                var oPlace = document.getElementById(document.getElementById("place").value);

                // 将文本框的内容创建为一个文本节点
                var textnode = document.createTextNode(oTxt.value);
                // 创建一个li元素
                var oLi = document.createElement("li");
                oLi.id = oTxt.value;
                // 将文本节点插入li元素中
                oLi.appendChild(textnode);
                oUl.insertBefore(oLi, oPlace);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li id="HTML">HTML</li>
        <li id="CSS">CSS</li>
        <li id="JavaScript">JavaScript</li>
    </ul>
        要插入的内容是：<input type="text" id="txt" /><input id="btn1" type="button" value="在尾部插入"><br>
        要插入的位置是在<input type="text" id="place" />之前！<input id="btn2" type="button" value="在特定位置插入">

</body>
</html>

运行结果：
初始时：
在这里插入图片描述
添加输入内容并点击在尾部插入按钮：

添加插入位置和内容，并点击在特定位置处插入按钮：

五、删除元素

使用removeChild()方法来删除父元素下的某个子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function(){
                var oUl = document.getElementById("list");
                oUl.removeChild(oUl.lastElementChild);
            }

            var oBtn = document.getElementById("btn2");
            oBtn.onclick = function(){
                var oUl = document.getElementById("list");
                document.body.removeChild(oUl);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li id="HTML">HTML</li>
        <li id="CSS">CSS</li>
        <li id="JavaScript">JavaScript</li>
        <li id="node.js">node.js</li>
        <li id="vue.js">vue.js</li>
    </ul>
        <input id="btn1" type="button" value="删除列表中最后一个元素"><br>
        <input id="btn2" type="button" value="删除整个列表">

</body>
</html>

初始时：
在这里插入图片描述
点击第一个按钮后：

点击第二个按钮后：

复制元素

使用cloneNode()方法来实现复制元素。
obj.cloneNode(bool)
参数obj表示被复制的元素，而参数bool是一个布尔值，取值为1或true时，表示复制元素本身以及复制该元素下的所有子元素；取值为0或false时，表示仅仅复制元素本身，不复制该元素下的子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function(){
                var oUl = document.getElementById("list");
                document.body.appendChild(oUl.cloneNode(1));
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li id="HTML">HTML</li>
        <li id="CSS">CSS</li>
        <li id="JavaScript">JavaScript</li>
        <li id="node.js">node.js</li>
        <li id="vue.js">vue.js</li>
    </ul>
        <!-- <input id="btn1" type="button" value="删除列表中最后一个元素"><br> -->
        <input id="btn" type="button" value="复制">

</body>
</html>