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

    在这里插入图片描述

    JavaScript是一门广泛用于网页开发的脚本语言，而DOM（文档对象模型）是JavaScript在网页中操作HTML和XML文档的核心。DOM以树状结构表示文档，允许开发者以编程方式访问、操作和修改文档的内容和结构。在DOM中，Element对象是代表HTML元素的关键对象之一。本篇博客将详细介绍JavaScript DOM中的Element对象，帮助基础小白更好地理解和应用这一概念。

    什么是DOM Element对象？

    在DOM中，每个HTML元素都是一个Element对象。这意味着Element对象代表网页中的每个标签，如

    、

    、等。Element对象包含有关元素的信息，如元素的标签名、属性、样式、内容和相关事件。通过Element对象，您可以以编程方式访问和操作网页中的元素。

    获取Element对象

    在JavaScript中，您可以使用多种方式获取Element对象。最常用的方法是通过以下几种方式：

    1. 使用document.getElementById方法： 通过元素的id属性获取元素。例如：

      var myElement = document.getElementById("myId");

      • 1

    2. 使用document.querySelector方法： 使用CSS选择器获取元素。例如：

      var myElement = document.querySelector(".myClass");

      • 1

    3. 使用document.getElementsByTagName方法： 使用标签名获取元素的集合。例如：

      var paragraphs = document.getElementsByTagName("p");

      • 1

    4. 使用document.getElementsByClassName方法： 使用类名获取元素的集合。例如：

      var elements = document.getElementsByClassName("myClass");

      • 1

    这些方法允许您在JavaScript中选择文档中的元素，并将它们存储为Element对象以供后续操作。

    操作DOM Element对象

    一旦您获取了Element对象，就可以执行各种操作。以下是一些常见的DOM操作：

    1. 修改元素内容

    使用innerHTML属性可以设置或获取元素的HTML内容。例如：

    var myElement = document.getElementById("myId");
myElement.innerHTML = "新的内容";

    • 1
    • 2

    这将更改元素的内容为"新的内容"。

    2. 修改元素属性

    可以使用setAttribute和getAttribute方法来设置和获取元素的属性。例如：

    var myElement = document.getElementById("myId");
myElement.setAttribute("class", "newClass");
var classValue = myElement.getAttribute("class");

    • 1
    • 2
    • 3

    上述代码将更改元素的class属性为"newClass"，然后获取该属性的值。

    3. 修改元素样式

    Element对象的style属性允许您以编程方式修改元素的CSS样式。例如：

    var myElement = document.getElementById("myId");
myElement.style.color = "red";
myElement.style.fontSize = "16px";

    • 1
    • 2
    • 3

    这将更改元素的文本颜色和字体大小。

    4. 添加/移除类

    使用classList属性可以添加或移除元素的类。例如：

    var myElement = document.getElementById("myId");
myElement.classList.add("newClass");
myElement.classList.remove("oldClass");

    • 1
    • 2
    • 3

    上述代码将为元素添加新类并删除旧类。

    5. 处理事件

    Element对象允许您附加事件处理程序以响应用户操作。例如：

    var myElement = document.getElementById("myId");
myElement.addEventListener("click", function() {
    alert("元素被点击了！");
});

    • 1
    • 2
    • 3
    • 4

    这将在元素被点击时弹出一个警报。

    Element对象属性和方法

    Element对象拥有众多属性和方法，用于操作元素的不同方面。以下是一些常用的Element对象属性和方法：

    属性

    • tagName：获取元素的标签名，如"DIV"或"P"。
    • id：获取或设置元素的id属性。
    • className：获取或设置元素的class属性。
    • innerHTML：获取或设置元素的HTML内容。
    • style：获取元素的样式属性对象。
    • classList：获取元素的类列表，用于操作元素的类。
    • parentElement：获取元素的父元素。
    • children：获取元素的子元素集合。
    • attributes：获取元素的所有属性集合。

    方法

    • getAttribute(name)：获取指定属性的值。
    • setAttribute(name, value)：设置指定属性的值。
    • removeAttribute(name)：移除指定属性。
    • getBoundingClientRect()：获取元素的大小和位置信息。
    • querySelector(selector)：选择匹配指定选择器的第一个子元素。
    • querySelectorAll(selector)：选择匹配指定选择器的所有子元素。
    • addEventListener(event, handler)：添加事件监听器。
    • removeEventListener(event, handler)：移除事件监听器。
    • focus()：使元素获得焦点。
    • blur()：移除元素的焦点。

    示例：创建一个交互式按钮

    为了更好地理解Element对象的用法，让我们创建一个简单的交互式按钮。我们将使用HTML、CSS和JavaScript来完成这个任务。

    DOCTYPE html>
<html>
<head>
    <style>
        .myButton {
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    style>
head>
<body>
    <button id="myButton" class="myButton">点击我button>

    <script>
        var button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            button.innerHTML = "按钮被点击了！";
            button.style.backgroundColor = "green";
        });
    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

    在这个示例中，我们首先创建了一个按钮元素，然后使用getElementById方法获取了该按钮的Element对象。接着，我们附加了一个点击事件监听器，以便在按钮被点击时修改按钮的文本和样式。

    这只是一个简单的示例，演示了如何使用Element对象来操作元素。您可以根据需要创建更复杂的交互性元素。

    总结

    Element对象是DOM中的核心，用于代表HTML元素，使开发者能够以编程方式操作和修改网页内容。通过本博客，您应该对Element对象的基本概念和常见操作有了更深入的了解。要深入学习DOM操作，练习和实践是关键。希望这篇博客对您在网页开发中更好地使用JavaScript DOM Element对象有所帮助。

    不要害怕尝试新事物，继续探索和构建令人印象深刻的网页！

    作者信息

    作者 ： 繁依Fanyi
    CSDN： https://techfanyi.blog.csdn.net
    掘金：https://juejin.cn/user/4154386571867191
  • 相关阅读:
    如理解WPF绑定中的UpdateSourceTrigger
    知识管理系统中的在线编辑，让共享协作更简便
    设计模式——观察者模式
    并发程序的噩梦——数据竞争
    Python-Flask：编写自动化连接demo脚本：v1.0.0
    【鸿蒙开发】第十七章 Web组件（一）
    MySQL MMM高可用架构
    vscode中用go get下载模块失败
    Android WIFI工具类 特别兼容Android12
    JavaScript中Map的使用
  • 原文地址：https://blog.csdn.net/qq_21484461/article/details/133895481