HTML DOM实例操作教学

HTML DOM(文档对象模型)是一种用于访问和操作HTML元素的API。通过使用HTML DOM,我们可以动态地改变网页的内容、样式和结构。在本文中,我们将介绍一些常见的HTML DOM实例操作,帮助你更好地理解和应用HTML DOM。

  • 实例1:操作元素内容 HTML DOM允许我们修改元素的内容。以下是一个操作元素内容的示例代码:
<!DOCTYPE html>
<html>
<head>
  <script>
    function changeText() {
      var element = document.getElementById("myText");
      element.innerHTML = "Hello, HTML DOM!";
    }
  </script>
</head>
<body>
  <h1 id="myText">原始文本</h1>
  <button onclick="changeText()">点击修改文本</button>
</body>
</html>

在上面的示例中,我们定义了一个changeText函数,该函数用于改变idmyText的元素的内容。当点击按钮时,调用changeText函数,从而修改文本内容。

  • 实例2:操作元素样式 HTML DOM还允许我们修改元素的样式。以下是一个操作元素样式的示例代码:
<!DOCTYPE html>
<html>
<head>
  <script>
    function changeStyle() {
      var element = document.getElementById("myText");
      element.style.color = "red";
      element.style.fontSize = "24px";
    }
  </script>
</head>
<body>
  <h1 id="myText">原始文本</h1>
  <button onclick="changeStyle()">点击修改样式</button>
</body>
</html>

在上面的示例中,我们定义了一个changeStyle函数,该函数用于改变idmyText的元素的样式。当点击按钮时,调用changeStyle函数,从而修改文本颜色和字体大小。

  • 实例3:操作元素结构 HTML DOM还允许我们修改元素的结构,例如添加、删除和移动元素。以下是一个操作元素结构的示例代码:
<!DOCTYPE html>
<html>
<head>
  <script>
    function changeStructure() {
      var parent = document.getElementById("myList");
      var child = document.createElement("li");
      child.innerHTML = "新元素";
      parent.appendChild(child);
    }
  </script>
</head>
<body>
  <ul id="myList">
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
  </ul>
  <button onclick="changeStructure()">点击添加元素</button>
</body>
</html>

在上面的示例中,我们定义了一个changeStructure函数,该函数用于在idmyList的列表中添加一个新的元素。当点击按钮时,调用changeStructure函数,从而添加新元素到列表中。

祝你在HTML DOM操作中取得成功!

© 版权声明
THE END
喜欢就支持一下吧
点赞150 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容