HTML 寻找改变DOM元素的JavaScript代码

在本文中，我们将介绍如何通过HTML找到改变DOM元素的JavaScript代码，并提供一些示例说明。

阅读更多：HTML 教程

查找DOM元素

要查找DOM元素，可以使用JavaScript的getElementById、getElementsByClassName、getElementsByTagName等方法。

下面是一个示例，演示如何通过id查找DOM元素：

<!DOCTYPE html>
<html>
  <head>
    <title>查找DOM元素</title>
  </head>
  <body>
    <div id="myDiv">这是一个DIV元素</div>

    <script>
      // 通过id查找DOM元素
      var element = document.getElementById('myDiv');
      console.log(element);
    </script>
  </body>
</html>

在上述示例中，我们通过getElementById方法查找了id为myDiv的元素，并将其赋值给变量element。然后，我们使用console.log输出了该元素对象。

类似地，我们也可以使用getElementsByClassName和getElementsByTagName方法来查找DOM元素。

监听DOM元素变化

要监听DOM元素的变化，可以使用addEventListener方法，将自定义的事件处理函数绑定到DOM元素上。

下面是一个示例，演示如何监听DOM元素的点击事件：

<!DOCTYPE html>
<html>
  <head>
    <title>监听DOM元素变化</title>
  </head>
  <body>
    <button id="myButton">点击我</button>

    <script>
      // 获取DOM元素
      var button = document.getElementById('myButton');

      // 添加点击事件监听器
      button.addEventListener('click', function(event) {
        console.log('按钮被点击了');
      });
    </script>
  </body>
</html>

在上述示例中，我们通过getElementById方法获取了id为myButton的按钮元素，然后使用addEventListener方法将一个点击事件处理函数绑定到该按钮上。当按钮被点击时，事件处理函数将被触发，并输出一条信息到控制台。

类似地，我们还可以监听其他事件，如鼠标移入移出、键盘按下松开等。

修改DOM元素属性

要修改DOM元素的属性，可以直接对该属性进行赋值。

下面是一个示例，演示如何修改DOM元素的文本内容和样式：

<!DOCTYPE html>
<html>
  <head>
    <title>修改DOM元素属性</title>
  </head>
  <body>
    <div id="myDiv">这是一个DIV元素</div>

    <script>
      // 获取DOM元素
      var div = document.getElementById('myDiv');

      // 修改文本内容
      div.textContent = '这是修改后的文本内容';

      // 修改样式
      div.style.backgroundColor = 'red';
      div.style.fontSize = '18px';
    </script>
  </body>
</html>