带你彻底学会JS DOM技术之获取元素

世界尽头与你

已于 2024-01-29 10:56:03 修改

阅读量703

点赞数 2

分类专栏： HTML + CSS + JS 文章标签： html 前端 javascript

于 2022-10-06 14:44:36 首次发布

本文链接：https://blog.csdn.net/Gherbirthday0916/article/details/127157038

版权

HTML + CSS + JS 专栏收录该内容

23 篇文章 9 订阅

订阅专栏

带你彻底学会JS DOM技术之获取元素

1.DOM概述
- DOM对象
- DOM结构
2.节点类型
3.获取元素

1.DOM概述

DOM对象

DOM，全称是“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。

在实际开发中，我们有时候需要实现这样的效果：鼠标移到元素上改变元素的颜色，或者动态添加新元素及删除元素等。这些效果就是通过DOM提供的方法来实现的。

简单地说，DOM里面有很多方法，我们可以通过它提供的方法来操作一个页面中的某个元素，如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。

DOM结构

DOM采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title></title>
<body>
<h1>jst</h1>
<p>jst</p>
<p>jst</p>
</body>
</html>

对于上面这个HTML文档，DOM会将其解析为如图所示的树形结构：

在这里插入图片描述

每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作

2.节点类型

在JavaScript中，节点分为很多种类型。DOM节点共有12种类型，但是常见的只有下面3种

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

在这里插入图片描述

对于节点类型，我们需要注意以下几点内容：

一个元素就是一个节点，这个节点称为“元素节点”。
属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。

3.获取元素

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

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

getElementById

在JavaScript中，如果想通过id来选中元素，我们可以使用getElementById()方法来实现

语法：

document.getElementById（"id名"）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oDiv = document.getElementById("div1");
            oDiv.style.color = "blue";
        }
    </script>
</head>
<body>
<div id="div1">JavaScript</div>
</body>
</html>

在这里插入图片描述

getElementById()获取的是一个DOM对象，我们在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开，这可以让我们一眼就看出这是一个DOM对象

getElementsByTagName

在JavaScript中，如果想通过标签名来选中元素，我们可以使用getElementsByTagName()方法来实现

语法：

document.getElementsByTagName（"标签名"）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oUl = document.getElementById("list");
            const oLi = oUl.getElementsByTagName("li");
            oLi[2].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>

在这里插入图片描述

首先使用getElementById()方法获取id为list的ul元素，然后使用getElementsByTagName()方法获取该ul元素下的所有li元素

oLi[0]表示获取第1个li元素，oLi[1]表示获取第2个li元素，……，以此类推

getElementById()和getElementsByTagName()区别

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

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

在这里插入图片描述

点击按钮1后会弹出一个网页对话框，显示元素数量：

在这里插入图片描述

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

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

在这里插入图片描述

点击按钮1，此时将无法显示元素的个数：

在这里插入图片描述

从这个例子中，我们可以看出，getElementById()是无法操作动态创建的DOM的

3、综合区别

①getElementById()获取的是1个元素，而getElementsByTagName()获取的是多个元素（伪数组）

②getElementById()前面只可以接document，也就是document.getElementById()。getElementsByTagName()前面不仅可以接document，还可以接其他DOM对象

③getElementById()不可以操作动态创建的DOM元素，而getElementsByTagName()可以操作动态创建的DOM元素

getElementsByClassName

在JavaScript中，如果想通过class来选中元素，我们可以使用getElementsByClassName()方法来实现

语法：

document.getElementsByClassName（"类名"）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oLi = document.getElementsByClassName("select");
            oLi[1].style.color = "red";
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li class="select">JavaScript</li>
    <li class="select">jQuery</li>
    <li class="select">Vue.js</li>
</ul>
</body>
</html>

浏览器显示效果如下：

在这里插入图片描述

getElementsByClassName()不能操作动态DOM。实际上，对于getElementById()、getElementsByClassName()和getElementsByTagName()这3个方法来说，只有getElementsByTagName()这一个方法能够操作动态DOM

querySelector()和querySelectorAll()

JavaScript新增了两个方法：querySelector()和querySelectorAll()，这让我们可以使用CSS选择器的语法来获取所需要的元素

querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素

语法：

document.querySelector（"选择器"）;
document.querySelectorAll（"选择器"）;

对于id选择器来说，由于页面只有一个元素，建议大家使用getElementById()，而不要用querySelector()或querySelectorAll()。因为getElementById()方法效率更高，性能也更好

案例演示：

<!DOCTYPE html>
<html lang="ena">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oDiv = document.querySelectorAll(".test");
            oDiv[1].style.color = "red";
        }
    </script>
</head>
<body>
<div>1</div>
<div class="test">2</div>
<div class="test">3</div>
<div>4</div>
<div class="test">5</div>
</body>
</html>

在这里插入图片描述

案例2：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const 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>

在这里插入图片描述

“document.querySelector("#list li:nth-child(3)")”表示选取id为"list"的元素下的第3个元素，nth-child(n)属于CSS3的选择器

getElementsByName

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

语法：

getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标的方式来获取。getElementsByName()只用于表单元素，一般只用于单选按钮和复选框

document.getElementsByName（"name名"）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload=function()
         {
             const oInput = document.getElementsByName("status");
             oInput[2].checked=true;
         }
    </script>
</head>
<body>
你的最高学历：
<label><input type="radio" name="status" value="本科" />本科</label>
<label><input type="radio" name="status" value="硕士" />硕士</label>
<label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>

在这里插入图片描述

document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门提供了两个非常方便的方法：document.title和document.body

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload=function()
         {
             document.title="炭火";
             document.body.innerHTML="<strong style='color:red'>新一代渗透测试全流程工具</strong>";
         }
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

世界尽头与你

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
带你彻底学会JS DOM技术之获取元素

DOM，全称是“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。在实际开发中，我们有时候需要实现这样的效果：鼠标移到元素上改变元素的颜色，或者动态添加新元素及删除元素等。这些效果就是通过DOM提供的方法来实现的。简单地说，DOM里面有很多方法，我们可以通过它提供的方法来操作一个页面中的某个元素，如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。DOM采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。对于上
复制链接

扫一扫