首页手记 DOM基础入门：轻松掌握网页元素操作

DOM基础入门：轻松掌握网页元素操作

标签：

Html/CSS

概述

DOM基础入门介绍了DOM的基本概念和核心特点，包括DOM的层次结构和动态性，以及DOM与HTML之间的关系。文章详细讲解了如何选择和访问DOM元素，包括使用ID、类名、标签名和CSS选择器。同时，文章还涵盖了DOM元素的属性操作、文本内容操作和样式操作，以及元素的创建、插入和删除方法。

1. DOM基础概念介绍

1.1 什么是DOM？

文档对象模型（Document Object Model，DOM）是一种与平台和语言无关的接口，它将文档视为树形结构，使得程序可以动态地访问和修改文档的内容、结构和样式。在Web开发中，DOM主要用于操作HTML和XML文档。DOM的核心在于它将文档视为一个树形结构，每个节点都是一个对象，每个对象都可以执行特定的方法和属性。通过JavaScript，可以对这些节点进行各种操作，如读取、修改、添加和删除。

1.2 DOM的核心特点

DOM具有以下核心特点：

层次结构：DOM将文档视为一个树形结构，每个节点在树中都有一个特定的位置，这使得DOM可以方便地表示和操作文档的结构。
动态性：DOM允许开发者在运行时动态地修改文档内容、结构和样式，从而实现丰富的交互效果和用户界面。
可访问性：DOM的接口是与平台和语言无关的，这意味着它可以在不同的浏览器和编程语言中工作，大大提高了跨平台的兼容性。
事件处理：DOM提供了丰富的事件处理功能，可以监听和响应用户操作，如鼠标点击、键盘输入等，增强了交互性。

1.3 DOM和HTML的关系

DOM和HTML之间有密切的关系：

文档表示：HTML文件是文档的文本表示形式，而DOM是该文档的树形结构表示。HTML文件被浏览器解析后，会生成一个DOM树，每个HTML标签在DOM树中都有一个对应的节点。
节点类型：DOM中节点的类型与HTML标签类型相对应。例如，HTML元素标签如<div>、<span>等在DOM中表现为元素节点，而文本内容则表现为文本节点。
属性操作：DOM允许通过JavaScript操作HTML元素的属性，例如获取、设置和删除元素的属性值。
事件处理：DOM中的事件处理机制允许JavaScript对HTML元素上的事件进行监听和响应，例如当用户点击某个按钮时，触发相应的事件处理器。

DOM和HTML的关系示例

<!DOCTYPE html>
<html>
<head>
    <title>DOM和HTML关系示例</title>
</head>
<body>
    <div id="myDiv">
        <p>Hello, DOM!</p>
    </div>
    <script>
        // 通过DOM访问HTML元素
        var myDiv = document.getElementById("myDiv");
        console.log(myDiv);  // 输出: <div id="myDiv">...</div>

        // 通过DOM操作HTML元素
        myDiv.innerHTML = "<p>DOM 已修改内容。</p>";
    </script>
</body>
</html>

在上述示例中，HTML文件被解析为DOM树，其中<div>标签在DOM中被表示为一个元素节点。JavaScript通过getElementById方法获取到<div>元素，并通过设置innerHTML属性来修改其内容。

2. 如何选择和访问DOM元素

2.1 使用ID和类名选择元素

ID选择器

ID选择器通过元素的id属性选择唯一的一个DOM元素。ID在HTML文档中必须是唯一的。

类名选择器

类名选择器通过元素的class属性选择一个或多个DOM元素。类名可以在HTML文档中重复使用。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>选择DOM元素示例</title>
    <style>
        .highlight { color: red; }
    </style>
</head>
<body>
    <div id="myDiv1">这是ID选择的元素</div>
    <div class="highlight">这是类名选择的元素1</div>
    <div class="highlight">这是类名选择的元素2</div>
    <script>
        // 通过ID选择元素
        var myDiv1 = document.getElementById("myDiv1");
        console.log(myDiv1);  // 输出: <div id="myDiv1">这是ID选择的元素</div>

        // 通过类名选择元素
        var highlights = document.getElementsByClassName("highlight");
        for (var i = 0; i < highlights.length; i++) {
            console.log(highlights[i]);  // 输出: <div class="highlight">...</div>
        }
    </script>
</body>
</html>

示例解释

在上述示例中，通过getElementById方法获取到id为myDiv1的<div>元素。使用getElementsByClassName方法获取到所有class为highlight的<div>元素，然后通过循环输出这些元素。

2.2 使用标签名选择元素

标签名选择器通过元素的标签名选择一个或多个DOM元素。这种方式返回的是一个节点列表。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>选择DOM元素示例</title>
</head>
<body>
    <p>这是标签名选择的元素1</p>
    <p>这是标签名选择的元素2</p>
    <div>这是其他元素</div>
    <script>
        var paras = document.getElementsByTagName("p");
        for (var i = 0; i < paras.length; i++) {
            console.log(paras[i]);  // 输出: <p>...</p>
        }
    </script>
</body>
</html>

示例解释

在上述示例中，通过getElementsByTagName方法获取到所有<p>标签元素，然后通过循环输出这些元素。

2.3 使用CSS选择器选择元素

CSS选择器是一种更强大的选择器，支持复杂的组合选择。常用的CSS选择器包括：

标签选择器：选择特定标签的所有元素。
类选择器：选择具有特定类名的所有元素。
ID选择器：选择具有特定ID的元素。
属性选择器：选择具有特定属性的元素。
伪类选择器：选择具有特定状态的元素，如:hover、:active等。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>选择DOM元素示例</title>
    <style>
        .highlight { color: red; }
    </style>
</head>
<body>
    <p id="p1">这是标签名选择的元素1</p>
    <p id="p2">这是标签名选择的元素2</p>
    <div class="highlight">这是类名选择的元素</div>
    <script>
        // 使用CSS选择器选择元素
        var element = document.querySelector("#p1");
        console.log(element);  // 输出: <p id="p1">这是标签名选择的元素1</p>

        var elements = document.querySelectorAll(".highlight");
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i]);  // 输出: <div class="highlight">...</div>
        }
    </script>
</body>
</html>

示例解释

在上述示例中，通过querySelector方法获取到id为p1的<p>元素，通过querySelectorAll方法获取到所有class为highlight的元素，然后通过循环输出这些元素。

3. DOM元素的属性操作

3.1 获取元素属性

获取元素属性通常使用getAttribute方法。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>获取DOM元素属性示例</title>
</head>
<body>
    <div id="myDiv" data-custom="custom-value">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        var customValue = myDiv.getAttribute("data-custom");
        console.log(customValue);  // 输出: custom-value
    </script>
</body>
</html>

示例解释

在上述示例中，通过getAttribute方法获取到id为myDiv的<div>元素的data-custom属性值。

3.2 设置元素属性

设置元素属性通常使用setAttribute方法。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>设置DOM元素属性示例</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.setAttribute("data-custom", "new-value");
        console.log(myDiv.getAttribute("data-custom"));  // 输出: new-value
    </script>
</body>
</html>

示例解释

在上述示例中，通过setAttribute方法设置id为myDiv的<div>元素的data-custom属性值为new-value，然后通过getAttribute方法获取到该属性值。

3.3 删除元素属性

删除元素属性通常使用removeAttribute方法。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>删除DOM元素属性示例</title>
</head>
<body>
    <div id="myDiv" data-custom="custom-value">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.removeAttribute("data-custom");
        console.log(myDiv.getAttribute("data-custom"));  // 输出: null
    </script>
</body>
</html>

示例解释

在上述示例中，通过removeAttribute方法删除id为myDiv的<div>元素的data-custom属性，然后通过getAttribute方法获取到该属性的值为null，表示属性已被删除。

4. DOM元素的文本内容操作

4.1 获取元素的文本内容

获取元素的文本内容通常使用textContent或innerText属性。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>获取DOM元素文本内容示例</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        console.log(myDiv.textContent);  // 输出: 这是一个div元素
    </script>
</body>
</html>

示例解释

在上述示例中，通过textContent属性获取到id为myDiv的<div>元素的文本内容。

4.2 修改元素的文本内容

修改元素的文本内容通常使用textContent或innerText属性。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>修改DOM元素文本内容示例</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.textContent = "文本内容已修改";
        console.log(myDiv.textContent);  // 输出: 文本内容已修改
    </script>
</body>
</html>

示例解释

在上述示例中，通过textContent属性设置id为myDiv的<div>元素的新文本内容为“文本内容已修改”，然后通过textContent属性获取到修改后的文本内容。

4.3 删除元素的文本内容

删除元素的文本内容通常使用textContent属性。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>删除DOM元素文本内容示例</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.textContent = "";
        console.log(myDiv.textContent);  // 输出: 
    </script>
</body>
</html>

示例解释

在上述示例中，通过textContent属性将id为myDiv的<div>元素的文本内容设置为空字符串，然后通过textContent属性获取到该元素的文本内容为空。

5. DOM元素的样式操作

5.1 获取元素样式

获取元素样式通常使用style属性，或者使用getComputedStyle函数。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>获取DOM元素样式示例</title>
    <style>
        #myDiv { color: red; }
    </style>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        console.log(myDiv.style.color);  // 输出: red

        var computedStyle = window.getComputedStyle(myDiv);
        console.log(computedStyle.color);  // 输出: red
    </script>
</body>
</html>

示例解释

在上述示例中，通过style属性获取到id为myDiv的<div>元素的color样式值，通过getComputedStyle函数获取到该元素的计算后的color样式值。

5.2 设置元素样式

设置元素样式通常使用style属性。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>设置DOM元素样式示例</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.style.color = "blue";
        console.log(myDiv.style.color);  // 输出: blue
    </script>
</body>
</html>

示例解释

在上述示例中，通过style属性设置id为myDiv的<div>元素的color样式值为blue，然后通过style属性获取到该元素的color样式值。

5.3 删除元素样式

删除元素样式通常使用style属性设置为""。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>删除DOM元素样式示例</title>
    <style>
        #myDiv { color: red; }
    </style>
</head>
<body>
    <div id="myDiv" style="color: red;">这是一个div元素</div>
    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.style.color = "";
        console.log(myDiv.style.color);  // 输出: ""
    </script>
</body>
</html>

示例解释

在上述示例中，通过style属性将id为myDiv的<div>元素的color样式值设置为空字符串，然后通过style属性获取到该元素的color样式值为空字符串。

6. DOM元素的创建、插入和删除

6.1 创建新的DOM元素

创建新的DOM元素通常使用document.createElement方法。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>创建DOM元素示例</title>
</head>
<body>
    <script>
        var myDiv = document.createElement("div");
        myDiv.id = "myDiv";
        myDiv.textContent = "这是一个新创建的div元素";
        document.body.appendChild(myDiv);  // 将新元素添加到body
    </script>
</body>
</html>

示例解释

在上述示例中，通过createElement方法创建一个新的<div>元素，然后通过id属性设置该元素的id，通过textContent属性设置该元素的文本内容，最后通过appendChild方法将新创建的元素添加到body元素中。

6.2 插入DOM元素到页面中

插入DOM元素通常使用appendChild、insertBefore等方法。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>插入DOM元素示例</title>
</head>
<body>
    <div id="container">容器</div>
    <script>
        var container = document.getElementById("container");
        var newDiv = document.createElement("div");
        newDiv.textContent = "新创建的div元素";
        container.appendChild(newDiv);  // 将新元素添加到容器元素的末尾
    </script>
</body>
</html>

示例解释

在上述示例中，通过getElementById方法获取到id为container的<div>元素，通过createElement方法创建一个新的<div>元素，然后通过textContent属性设置该元素的文本内容，最后通过appendChild方法将新创建的元素添加到容器元素的末尾。

6.3 删除DOM元素

删除DOM元素通常使用removeChild方法。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>删除DOM元素示例</title>
</head>
<body>
    <div id="container">
        <div id="toDelete">要删除的元素</div>
    </div>
    <script>
        var container = document.getElementById("container");
        var toDelete = document.getElementById("toDelete");
        container.removeChild(toDelete);  // 删除指定元素
    </script>
</body>
</html>

示例解释

在上述示例中，通过getElementById方法获取到id为container的<div>元素，通过getElementById方法获取到id为toDelete的<div>元素，最后通过removeChild方法删除该元素。

通过以上内容，你可以详细了解和掌握DOM的基本概念、选择和访问DOM元素的方法、元素属性、文本内容和样式的操作，以及创建、插入和删除DOM元素的方法。这些操作是网页开发中不可或缺的基础技能，掌握它们可以帮助你更好地构建动态的网页和进行交互设计。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

狐的传说

手记
篇

粉丝

88

获赞与收藏

555

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

Pandas 入门教程

25个小节 18599 341

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

DOM基础入门：轻松掌握网页元素操作

1.1 什么是DOM？

1.2 DOM的核心特点

1.3 DOM和HTML的关系

2.1 使用ID和类名选择元素

2.2 使用标签名选择元素

2.3 使用CSS选择器选择元素

3.1 获取元素属性

3.2 设置元素属性

3.3 删除元素属性

4.1 获取元素的文本内容

4.2 修改元素的文本内容

4.3 删除元素的文本内容

5.1 获取元素样式

5.2 设置元素样式

5.3 删除元素样式

6.1 创建新的DOM元素

6.2 插入DOM元素到页面中

6.3 删除DOM元素

阅读免费教程