• 【Java 进阶篇】JavaScript DOM Document对象详解

    在这里插入图片描述

    在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。DOM的核心部分之一就是Document对象，它代表了整个HTML文档。在本篇博客中，我们将深入探讨Document对象，包括它的属性、方法以及如何使用它来操纵网页内容。

    什么是Document对象

    Document对象是DOM的根节点，代表整个HTML文档。通过Document对象，您可以访问和操纵HTML文档的各个部分，包括元素、属性、文本内容等。以下是一些Document对象的常见属性和方法：

    • document.getElementById(id): 通过元素的id属性获取元素。
    • document.getElementsByTagName(tagName): 通过标签名获取元素的集合。
    • document.createElement(tagName): 创建一个新的HTML元素。
    • document.querySelector(selector): 通过CSS选择器获取元素。
    • document.write(text): 将文本写入文档。
    • document.body: 获取文档的元素。
    • document.title: 获取或设置文档的标题。

    接下来，我们将逐一介绍这些属性和方法，并提供相应的案例以帮助理解。

    获取元素

    通过Document对象，我们可以使用不同的方法获取HTML文档中的元素。这些方法基于元素的id、标签名、类名、CSS选择器等，以下是一些常见的获取元素的方法：

    通过id获取元素

    使用getElementById方法可以通过元素的id属性获取元素。这是一种常见的操作，通常用于获取具体的DOM元素并进行操作。

    DOCTYPE html>
<html>
<head>
    <title>Get Element by ID Exampletitle>
head>
<body>
    <div id="myDiv">This is a div element.div>
    <script>
        // 获取id为"myDiv"的元素
        var divElement = document.getElementById("myDiv");
        divElement.innerHTML = "Element with id 'myDiv' has been updated!";
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在上述示例中，我们首先在HTML中创建一个

    元素，并为其设置了id属性为"myDiv"。然后，通过JavaScript的getElementById方法，我们获取了这个元素，并使用innerHTML属性来更新其内容。

    通过标签名获取元素

    使用getElementsByTagName方法可以获取特定标签名的元素集合。这对于获取文档中所有相同标签名的元素非常有用。

    DOCTYPE html>
<html>
<head>
    <title>Get Elements by TagName Exampletitle>
head>
<body>
    <ul>
        <li>Item 1li>
        <li>Item 2li>
        <li>Item 3li>
    ul>
    <script>
        // 获取所有
  • 元素
        var listItems = document.getElementsByTagName("li");
        for (var i = 0; i < listItems.length; i++) {
            listItems[i].style.color = "blue";
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    • 在上述示例中，我们使用getElementsByTagName方法获取了所有

  • 元素，并通过循环遍历这些元素来将它们的文本颜色设置为蓝色。

    通过CSS选择器获取元素

    使用querySelector方法可以通过CSS选择器获取元素。这允许您更灵活地选择特定元素，而不仅仅是根据id或标签名。

    DOCTYPE html>
<html>
<head>
    <title>Get Element by CSS Selector Exampletitle>
    <style>
        .highlighted {
            background-color: yellow;
        }
    style>
head>
<body>
    <p class="highlighted">This paragraph is highlighted.p>
    <p>This paragraph is not highlighted.p>
    <script>
        // 获取具有"highlighted"类的
    元素
        var highlightedElement = document.querySelector(".highlighted");
        highlightedElement.style.fontWeight = "bold";
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在上述示例中，我们首先定义了两个

    元素，其中一个具有class为"highlighted"，另一个没有。然后，通过querySelector方法选择具有"highlighted"类的元素，并将其font-weight属性设置为"bold"，从而使文本加粗显示。

    这些方法让您能够根据不同的需求选择文档中的元素，然后对它们进行各种操作，例如修改样式、添加事件监听器等。

    创建新元素

    通过Document对象，您可以创建新的HTML元素，然后将它们添加到文档中。使用createElement方法可以创建一个新的元素。

    DOCTYPE html>
<html>
<head>
    <title>Create Element Exampletitle>
head>
<body>
    <div id="container">
        
    div>
    <script>
        // 创建一个新的
    元素
        var newParagraph = document.createElement("p");
        newParagraph.innerHTML = "This is a new paragraph element.";
        
        // 获取容器元素并将新元素添加进去
        var container = document.getElementById("container");
        container.appendChild(newParagraph);
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在上述示例中，我们首先在HTML中创建了一个空的

    元素，并为其设置了id属性为"container"，表示新元素将会被添加到这个容器中。接着，通过JavaScript的createElement方法，我们创建了一个新的

    元素，并使用innerHTML属性来设置它的内容。最后，我们通过appendChild方法将新元素添加到容器中。

    这个过程可以动态地向文档中添加内容，非常适用于需要根据用户操作动态生成元素的情况，比如添加新的列表项或评论。

    写入文本

    Document对象还提供了一个方便的方法write，用于将文本写入文档。这对于动态生成内容或调试JavaScript非常有用。

    DOCTYPE html>
<html>
<head>
    <title>Write Text Exampletitle>
head>
<body>
    <script>
        // 写入文本
        document.write("Hello, World!");
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在上述示例中，我们使用document.write方法将文本"Hello, World!"写入文档中。这可以在页面加载时或在JavaScript代码中使用，以将内容动态添加到文档中。

    需要注意的是，document.write方法会替换整个文档内容，因此要慎用，以免破坏页面的结构。

    获取文档标题

    Document对象的title属性用于获取或设置文档的标题。

    DOCTYPE html>
<html>
<head>
    <title>Document Title Exampletitle>
head>
<body>
    <script>
        // 获取文档标题
        var title = document.title;
        alert("Document title: " + title);
        
        // 设置新的文档标题
        document.title = "New Document Title";
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在上述示例中，我们首先使用document.title来获取文档的标题，并使用alert方法显示出来。接着，我们通过document.title来设置新的文档标题。这对于在不刷新页面的情况下更改文档标题非常有用，比如在单页应用程序中。

    DOM事件

    Document对象也可以用于处理DOM事件。事件是与HTML元素相关的用户行为，例如单击、鼠标悬停、键盘输入等。JavaScript允许您捕获这些事件并执行相应的操作。以下是一些常见的DOM事件：

    • click: 当元素被单击时触发。
    • mouseover: 鼠标悬停在元素上时触发。
    • keydown: 键盘按键被按下时触发。
    • submit: 表单被提交时触发。
    • load: 页面和所有资源加载完毕时触发。

    让我们看一个示例，演示如何使用Document对象来处理DOM事件：

    DOCTYPE html>
<html>
<head>
    <title>DOM Event Exampletitle>
head>
<body>
    <button id="myButton">Click Mebutton>
    <script>
        // 获取按钮元素
        var button = document.getElementById("myButton");

        // 添加点击事件处理程序
        button.addEventListener("click", function() {
            alert("Button clicked!");
        });
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在上述示例中，我们首先获取了一个按钮元素，其id为"myButton"。然后，我们使用addEventListener方法来添加一个点击事件处理程序，当按钮被点击时，将触发alert弹窗。

    这样的事件处理程序允许您在用户与网页进行交互时执行特定的JavaScript代码，从而实现各种互动和反馈。

    DOM样式

    Document对象还允许您访问和修改元素的样式。这是通过style属性实现的，该属性包含了元素的CSS样式属性。

    DOCTYPE html>
<html>
<head>
    <title>DOM Style Exampletitle>
    <style>
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    style>
head>
<body>
    <div id="myDiv">This is a div element.div>
    <script>
        // 获取div元素
        var divElement = document.getElementById("myDiv");

        // 修改样式
        divElement.style.backgroundColor = "lightcoral";
        divElement.style.color = "white";
        divElement.style.fontSize = "16px";
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在上述示例中，我们首先定义了一个

    元素，其id为"myDiv"，并为其添加了一些CSS样式。然后，通过getElementById方法获取了这个元素，使用style属性修改了其背景颜色、文本颜色和字体大小。这使您能够通过JavaScript动态更改元素的外观。

    这只是Document对象的一小部分功能，但它足以展示出它的强大之处。使用这些方法和属性，您可以在网页上进行各种交互和操作。

    总结

    Document对象是DOM的核心，代表整个HTML文档。通过Document对象，您可以获取元素、创建新元素、写入文本、处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动，实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件，还是创建新的元素，Document对象都是前端开发不可或缺的工具之一。

    希望这篇博客对初学者有所帮助，使他们更好地理解Document对象及其用途。如果您想深入学习，建议查阅相关文档和继续探索更多关于DOM和JavaScript的内容。祝您在前端开发的道路上取得成功！

    作者信息

    作者 ： 繁依Fanyi
    CSDN： https://techfanyi.blog.csdn.net
    掘金：https://juejin.cn/user/4154386571867191
  • 相关阅读:
    《艾尔登法环 黄金树幽影》是什么？Mac电脑怎么玩《艾尔登法环》艾尔登法环下载
    Scala 简介一
    （39）STM32——FLASH闪存
    (fields.E180) SQLite does not support JSONFields.
    认真聊聊中断(软中断)
    监听U盘插入 拔出 消息，获得U盘盘符
    mybatisPlus的简单使用
    航空发动机小风扇
    1.10 - 总线
    GBase 8c V3.0.0数据类型——注释信息函数
  • 原文地址：https://blog.csdn.net/qq_21484461/article/details/133895229