常见的DOM操作示例

关注我，持续分享逻辑思维&管理思维&面试题； 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导；

推荐专栏《10天学会使用asp.net编程AI大模型》，目前已完成所有内容。一顿烧烤不到的费用，让人能紧跟时代的浪潮。从普通网站，到公众号、小程序，再到AI大模型网站。干货满满。学成后可接项目赚外快，绝对划算。不仅学会如何编程，还将学会如何将AI技术应用到实际问题中，为您的职业生涯增添一笔宝贵的财富。

-------------------------------------正文----------------------------------------

DOM（文档对象模型）的例子非常丰富，这里我列举几个常见的DOM操作示例，以帮助你理解DOM在实际开发中的应用。

示例一：修改元素内容

假设我们有一个简单的HTML页面，包含一个按钮和一个<div>元素，我们想要通过点击按钮来修改<div>元素中的内容。

HTML代码：

<button class="btn">点击修改内容</button>  
<div>初始内容</div>

JavaScript代码：

// 获取按钮和div元素  
var btn = document.querySelector('.btn');  
var div = document.querySelector('div');  
  
// 为按钮添加点击事件监听器  
btn.onclick = function() {  
    // 修改div元素的innerHTML属性来改变其内容  
    div.innerHTML = '新内容';  
};

在这个例子中，我们通过document.querySelector方法获取了按钮和<div>元素，并给按钮添加了一个点击事件监听器。当按钮被点击时，我们修改了<div>元素的innerHTML属性，从而改变了其内容。

示例二：分时问候

这个示例展示了如何根据当前时间显示不同的问候语。

<div id="greeting">早上好！</div>

// 获取div元素  
var greeting = document.getElementById('greeting');  
  
// 获取当前小时数  
var now = new Date();  
var hour = now.getHours();  
  
// 根据时间修改问候语  
if (hour < 12) {  
    greeting.innerHTML = '早上好！';  
} else if (hour < 18) {  
    greeting.innerHTML = '下午好！';  
} else {  
    greeting.innerHTML = '晚上好！';  
}

在这个例子中，我们首先获取了<div>元素，并通过Date对象获取了当前的小时数。然后，我们根据小时数的不同，使用条件语句修改了<div>元素的innerHTML属性，从而显示了不同的问候语。

示例三：动态添加元素

假设我们想要在用户点击按钮时，动态地向页面中添加一个新的段落元素。

<button id="addParagraph">添加段落</button>  
<div id="content"></div>

// 获取按钮和div元素  
var btn = document.getElementById('addParagraph');  
var content = document.getElementById('content');  
  
// 为按钮添加点击事件监听器  
btn.onclick = function() {  
    // 创建一个新的段落元素  
    var p = document.createElement('p');  
    // 设置段落元素的文本内容  
    p.textContent = '这是一个新添加的段落。';  
    // 将段落元素添加到div元素中  
    content.appendChild(p);  
};

在这个例子中，我们首先通过document.getElementById方法获取了按钮和<div>元素。然后，我们为按钮添加了一个点击事件监听器。当按钮被点击时，我们使用document.createElement方法创建了一个新的段落元素，并通过textContent属性设置了它的文本内容。最后，我们使用appendChild方法将新创建的段落元素添加到了<div>元素中。

以上示例展示了DOM在Web开发中的一些基本应用，包括修改元素内容、根据条件动态显示内容以及动态添加元素等。通过这些示例，你可以更好地理解DOM的作用和用法。

感兴趣的同学辛苦 关注/点赞 ，持续分享逻辑、算法、管理、技术、人工智能相关的文章。

有意找工作的同学，请参考博主的原创：《面试官心得--面试前应该如何准备》，《面试官心得--面试时如何进行自我介绍》， 《做好面试准备，迎接2024金三银四》。
或关注博主免费专栏【程序员宝典--常用代码分享】里面有大量面试涉及的算法或数据结构编程题。

博主其它经典原创：《管理心得--如何高效进行跨部门合作》，《技术心得--如何成为优秀的架构师》、《管理心得--如何成为优秀的架构师》、《管理心理--程序员如何选择职业赛道》，及
《C#实例：SQL如何添加数据》，《C#实战分享--爬虫的基础原理及实现》欢迎大家阅读。