JavaScript HTML DOM - 改变 HTML 功能 用法运用 详解

JavaScript中的HTML DOM提供了强大的功能来改变HTML文档的内容和结构。通过JavaScript，我们可以动态地更新网页上的文本、属性、样式以及整个HTML结构。以下是对这些功能的详细解释和用法示例：

一、改变HTML内容

1. 使用innerHTML：

   • innerHTML属性用于获取或设置元素的HTML内容。这是最常用的改变HTML内容的方法。
   • 用法：

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

   • 示例：

     <div id="myElement">原始内容</div>
     <script>document.getElementById("myElement").innerHTML = "<strong>新的内容</strong>";
     </script>
     

2. 使用innerText：

   • innerText属性用于获取或设置元素的文本内容，不包括HTML标签。
   • 用法：

     document.getElementById("myElement").innerText = "新的文本内容";
     

   • 示例：

     <div id="myElement">原始文本</div>
     <script>document.getElementById("myElement").innerText = "新的文本内容";
     </script>
     

3. 使用textContent：

   • textContent属性与innerText类似，但它在处理隐藏元素和性能上有所不同。
   • 用法：

     document.getElementById("myElement").textContent = "新的文本内容";
     

   • 示例：

     <div id="myElement">原始文本</div>
     <script>document.getElementById("myElement").textContent = "新的文本内容";
     </script>
     

二、改变HTML属性

1. 使用setAttribute()：

   • setAttribute()方法用于设置元素的属性。
   • 用法：

     document.getElementById("myElement").setAttribute("属性名", "属性值");
     

   • 示例：

     <img id="myImage" src="old-image.jpg" alt="Old Image">
     <script>document.getElementById("myImage").setAttribute("src", "new-image.jpg");
     </script>
     

2. 直接修改属性：

   • 也可以直接通过JavaScript对象的方式修改元素的属性。
   • 用法：

     document.getElementById("myElement").属性名 = "属性值";
     

   • 示例：

     <img id="myImage" src="old-image.jpg" alt="Old Image">
     <script>document.getElementById("myImage").src = "new-image.jpg";
     </script>
     

三、改变HTML样式

1. 使用style属性：

   • style属性允许直接修改元素的内联样式。
   • 用法：

     document.getElementById("myElement").style.属性名 = "属性值";
     

   • 示例：

     <div id="myElement">内容</div>
     <script>document.getElementById("myElement").style.color = "blue";document.getElementById("myElement").style.backgroundColor = "yellow";
     </script>
     

2. 添加或移除CSS类：

   • 使用classList属性可以方便地添加、移除或切换CSS类。
   • 用法：

     document.getElementById("myElement").classList.add("className");
     document.getElementById("myElement").classList.remove("className");
     document.getElementById("myElement").classList.toggle("className");
     

   • 示例：

     <div id="myElement">内容</div>
     <style>.highlight {color: red;background-color: yellow;}
     </style>
     <script>document.getElementById("myElement").classList.add("highlight");
     </script>
     

四、改变HTML结构

1. 创建和插入新元素：

   • 使用document.createElement()创建新元素，并使用appendChild()、insertBefore()等方法插入到DOM中。
   • 用法：

     var newElement = document.createElement("元素名");
     document.getElementById("parentElement").appendChild(newElement);
     

   • 示例：

     <div id="parentElement">父元素</div>
     <script>var newDiv = document.createElement("div");newDiv.innerHTML = "新子元素";document.getElementById("parentElement").appendChild(newDiv);
     </script>
     

2. 删除元素：

   • 使用removeChild()或remove()方法删除元素。
   • 用法：

     document.getElementById("parentElement").removeChild(childElement);
     childElement.remove();
     

   • 示例：

     <div id="parentElement"><div id="childElement">子元素</div>
     </div>
     <script>var child = document.getElementById("childElement");document.getElementById("parentElement").removeChild(child);
     </script>
     

五、运用场景

1. 动态内容更新：根据用户操作或外部数据更新网页内容，如新闻滚动、商品推荐等。
2. 用户交互：响应用户事件（如点击、输入）并更新页面元素，如表单验证反馈、按钮点击效果等。
3. 动画效果：通过改变样式和结构实现动画效果，如元素显示/隐藏、位置移动等。

六、注意事项

1. 性能优化：频繁操作DOM会导致性能下降，尽量合并操作或使用文档片段（DocumentFragment）来减少重排和重绘。
2. 浏览器兼容性：确保代码在不同浏览器中都能正常工作，特别是旧版本的浏览器。
3. 安全性：避免直接插入用户输入到HTML中，以防止XSS攻击。使用textContent或转义处理用户输入。

通过JavaScript改变HTML内容、属性、样式和结构，可以创建动态、交互丰富的网页应用。掌握这些功能并合理运用，可以显著提升用户体验和网页的互动性。