Javascript DOM 基本操作小结

在编写基于Web的Javascript应用程序时，经常需要对Document Object Model（DOM）进行操作。本文将介绍DOM基本操作的相关知识，并提供一些示例。

什么是DOM？

DOM是指文档对象模型（Document Object Model），用于在HTML或XML文档中表示和操作元素。DOM将整个文档表示为一个树形结构，可以通过Javascript操作DOM来改变文档的外观、内容和行为。

DOM基本操作

以下是DOM基本操作的一些示例。

获取元素

要获取文档中的元素，请使用document.getElementById或document.querySelector函数。这两个函数都接收一个字符串参数，用于指定要查找的元素。

// 通过ID查找元素
let element = document.getElementById("myElement");
// 通过CSS选择器查找元素
let element = document.querySelector(".myClass");

操作元素

一旦找到了要更改的元素，您可以使用以下方法来更改其内容和样式：

更改元素内容

// 获取元素并更新其内容
let element = document.getElementById("myElement");
element.innerHTML = "New content";

更改元素样式

// 获取元素并更新其样式
let element = document.getElementById("myElement");
element.style.color = "red";

示例

以下示例演示如何使用DOM更改文档元素的内容和样式：

示例1：更改标题

<html>
<head>
  <title>DOM示例</title>
</head>
<body>
  <h1 id="myTitle">原始标题</h1>
  <button onclick="changeTitle()">更改标题</button> 
  <script>
    function changeTitle() {
      let titleElement = document.getElementById("myTitle");
      titleElement.innerHTML = "新标题";
      titleElement.style.color = "red";
    }
  </script>
</body>
</html>

该示例包括一个标题和一个按钮。当用户单击按钮时，它会调用changeTitle函数来改变标题的内容和样式。

示例2：更改列表项

<html>
<head>
  <title>DOM示例</title>
</head>
<body>
  <ul>
    <li id="item1"><a href="#">项1</a></li>
    <li id="item2"><a href="#">项2</a></li>
    <li id="item3"><a href="#">项3</a></li>
  </ul>
  <button onclick="changeList()">更改列表项</button> 
  <script>
    function changeList() {
      let item2 = document.getElementById("item2");
      item2.innerHTML = "新列表项";
      item2.style.backgroundColor = "yellow";
    }
  </script>
</body>
</html>

该示例包括一个带有三个列表项的无序列表和一个按钮。当用户单击按钮时，它会调用changeList函数来更改第二个列表项的内容和样式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript dom 基本操作小结 - Python技术站