master

分支 (1)

管理

管理

master

my-test
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>DOM操作示例</title>
    <style>
      /* 样式表 */
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 id="title">这是一个标题</h1>
    <p class="red">这是一个红色的段落</p>
    <ul id="list">
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
    <script>
      // 获取元素
      const titleElement = document.getElementById('title');
      const redParagraphElements = document.getElementsByClassName('red');
      const listElement = document.querySelector('#list');
      const listItemElements = document.querySelectorAll('#list li');

      // 操作元素属性
      titleElement.setAttribute('class', 'blue');
      redParagraphElements[0].style.backgroundColor = 'yellow';
      listElement.addEventListener('click', () => {
        console.log('列表被点击了');
      });

      // 操作元素内容
      titleElement.textContent = '新的标题';
      listElement.removeChild(listItemElements[1]);

      // 创建新元素
      const newListItemElement = document.createElement('li');
      const newListItemTextElement = document.createTextNode('列表项4');
      newListItemElement.appendChild(newListItemTextElement);
      listElement.appendChild(newListItemElement);
    </script>
  </body>
</html>