JavaScript第十讲：DOM编程（1）：节点概念，如何获取元素节点，节点属性，样式练习题

作者：小丑西瓜9 | 2024-06-11 00:50:01

踩

前言

上一节是本文的知识点讲解，有需要的码客们先看一下，本文是练习题

题目要求

编写一个HTML文档，展示DOM编程的基础知识，包括节点概念的理解、如何获取元素节点、节点属性的操作以及样式调整。要求文档中包含一个带有特定ID的div元素，以及一个按钮。当用户点击按钮时，应触发一系列DOM操作，包括修改div元素的文本内容、改变其背景色、添加class以及读写自定义的data-*属性。

源代码


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>DOM编程基础探索</title>  
<style>  
    /* 初始样式 */  
    #myDiv {  
        width: 200px;  
        height: 200px;  
        background-color: lightgray;  
        color: black;  
        padding: 20px;  
        text-align: center;  
        font-size: 20px;  
    }  
      
    /* 新增的class样式 */  
    .new-class {  
        border: 2px solid red;  
    }  
</style>  
</head>  
<body>  
  
<!-- 带有id的div元素 -->  
<div id="myDiv">我是一个可操作的div元素</div>  
  
<!-- 触发DOM操作的按钮 -->  
<button onclick="exploreDOM()">探索DOM</button>  
  
<script>  
function exploreDOM() {  
    // 获取元素节点  
    var divNode = document.getElementById('myDiv');  
    console.log('获取到的元素节点：', divNode);  
  
    // 修改节点属性：文本内容  
    divNode.textContent = 'DOM编程基础探索';  
    console.log('修改后的文本内容：', divNode.textContent);  
  
    // 修改节点样式：背景色  
    divNode.style.backgroundColor = 'lightblue';  
    console.log('修改后的背景色：', divNode.style.backgroundColor);  
  
    // 修改节点属性：添加class  
    divNode.classList.add('new-class');  
    console.log('添加的class：', divNode.className);  
  
    // 读取节点属性：自定义data-*属性（假设不存在）  
    var customData = divNode.getAttribute('data-custom');  
    if (customData) {  
        console.log('自定义data-*属性值：', customData);  
    } else {  
        console.log('未找到自定义data-*属性');  
    }  
  
    // 设置节点属性：添加自定义data-*属性  
    divNode.setAttribute('data-custom', 'helloDOM');  
    console.log('已添加的自定义data-*属性：', divNode.getAttribute('data-custom'));  
}  
</script>  
  
</body>  
</html>

在这个HTML文档中，我们首先定义了一个带有ID myDiv 的div元素，并为其指定了初始样式。然后，我们添加了一个按钮，当按钮被点击时，会触发exploreDOM函数。这个函数执行了一系列DOM操作，包括获取元素节点、修改文本内容、改变背景色、添加class以及读写自定义的data-*属性。通过控制台输出，我们可以验证每一步操作的结果。

今天的JS学习就到这里，我是星途，愿我们共同进步。

respect！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/701026