JavaScript DOM

最新推荐文章于 2024-10-06 23:08:58 发布

今日份学习

最新推荐文章于 2024-10-06 23:08:58 发布

阅读量26

点赞数

文章标签：学习 javascript

本文链接：https://blog.csdn.net/m0_73648753/article/details/133755775

版权

本文介绍了文档对象模型(DOM)的基础概念，包括元素节点、属性节点、文本节点，以及如何通过id、标签名、类名和CSS选择器查找HTML元素。实例演示了JavaScript操作DOM的方法。

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

1、DOM概述：

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

JavaScript可以创建动态HTML的所有元素、属性、样式

2、DOM文档节点

概念：网页中的每一个部分都可以称为是一个节点，是网页构成的最基本的组成部分

html标签、属性、文本、注释、整个文档等都是一个节点

常用节点分类：

（1）文档节点Document：代表的是整个HTML文档，网页中的所有节点都是它的子节点

document对象作为window对象的属性存在的，可以直接使用，不用获取

（2）元素节点（Element）：最常用的节点，HTML中的各种标签都是元素节点

浏览器会将页面中所有的标签都转换为元素节点，我们可以通过document的方法来获取元素节点，例如：document.getElementById()

（3）属性节点：表示的是在标签中的一个个的属性

可以通过元素节点来获取指定的属性节点：例如：元素节点.getAttributeNode("属性名")

（4）文本节点：表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点，包含可以字面解释的纯文本内容，例如：元素节点.firstChild

3、查找 HTML 元素

（1）通过元素 id 来查找元素

<!-- HTML代码 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="button">我是按钮</button>

<!-- JavaScript代码 -->
<script>
    var btn = document.getElementById("button");
    console.log(button);
</script>
</body>
</html>


//输出结果：
    <button id="button">我是按钮</button>

（2）通过标签名来查找元素

<!-- HTML代码 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>我是按钮</button>

<!-- JavaScript代码 -->
<script>
    var button = document.getElementsByTagName("button按钮");
    console.log(button);
</script>
</body>
</html>

//输出结果：
HTMLCollection [button按钮]

（3）通过类名来查找元素


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">我是按钮</button>

<!-- JavaScript代码-->
<script>
    var btn = document.getElementsByClassName("btn");
    console.log(btn);
</script>
</body>
</html>


//输出结果
HTMLCollection [button.btn]

(4)通过CSS选择器选择一个元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">我是按钮</button>

<!-- JavaScript代码 -->
<script>
    var btn = document.querySelector(".btn");
    console.log(btn);
</script>
</body>
</html>

//输出结果

    <button class="btn">我是按钮</button>