JS document文档的简单操作完整示例

2023年6月10日下午12:15 • JavaScript

JS document 文档是操作网页元素的核心接口。它可以通过 js 代码来获取、修改和新增 HTML 元素，以实现网页动态变化。接下来将通过两个示例介绍基本的 JS document 操作。

示例1：获取元素

在 HTML 文档中，标签是最基本的元素，通过 JS document 可以获取 HTML 中指定标签的元素。获取标签元素需要使用 getElementById、getElementsByTagName 和 getElementsByClassName 等方法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">我是一个div元素</div>
  <ul>
    <li>列表1</li>
    <li>列表2</li>
  </ul>
  <p class="text">我是一段文本</p>
  <script>
    // 获取id为box的div元素
    let boxEle = document.getElementById('box');
    console.log(boxEle.innerHTML);

    // 获取ul元素的列表项
    let listEles = document.getElementsByTagName('li');
    for(let listEle of listEles){
      console.log(listEle.innerHTML);
    }

    // 获取class为text的元素
    let textEle = document.getElementsByClassName('text');
    console.log(textEle[0].innerHTML);
  </script>
</body>
</html>

代码中通过 getElementById 获取了 id 为 box 的 div 元素，通过 getElementsByTagName 获取了 ul 元素的所有列表项元素，并通过 getElementsByClassName 获取了 class 为 text 的元素。获取到的元素可以进行修改和操作。

示例2：修改元素

获取到元素之后，可以通过修改元素内容、样式和属性等方法，改变网页元素的外观和行为。以下是一个改变网页标题和背景色的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1 id="title">这是一个网页标题</h1>
  <script>
    // 修改标题
    let titleEle = document.getElementById('title');
    titleEle.innerHTML = '我是新标题';

    // 修改背景色
    document.body.style.backgroundColor = 'lightblue';
  </script>
</body>
</html>

代码中通过 getElementById 获取了 id 为 title 的 h1 标题元素，并通过修改 innerHTML 属性将标题内容修改为“我是新标题”。在修改背景色时，通过 document.body.style.backgroundColor 直接修改了 body 元素的背景颜色属性。

以上是 JS document 文档的简单操作示例，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS document文档的简单操作完整示例 - Python技术站