Javascript DOM的简介,节点和获取元素详解

2023年6月10日上午11:29 • JavaScript

下面我来详细讲解一下Javascript DOM的简介，节点和获取元素的详解。

Javascript DOM简介

DOM（Document Object Model）是JavaScript操作网页的主要方式之一，它定义了文档的逻辑结构，并允许JavaScript脚本动态地访问和修改网页的内容、结构和样式。DOM提供了一种跨平台的标准API，允许程序和脚本可以动态地更新文档中的内容。

节点

在DOM中，文档中的每个组成部分都是节点。节点可以是HTML元素、属性、文本、注释等。在DOM中，节点是以树形结构进行组织和访问的，我们称之为DOM树。

节点类型有很多种，其中常见的包括元素节点、属性节点、文本节点、注释节点等。可以通过节点的类型和名称来访问、修改节点的属性和内容。

获取元素

在JavaScript中，可以通过以下方法获取文档中的元素节点：

1. getElementById()

该方法通过元素的id属性获取元素节点。例如：

let elem = document.getElementById("demo");

2. getElementsByTagName()

该方法通过元素的标签名获取元素节点。例如：

let elems = document.getElementsByTagName("p");

3. getElementsByClassName()

该方法通过元素的类名获取元素节点。例如：

let elems = document.getElementsByClassName("red");

示例说明

示例一：获取元素并修改内容

<!DOCTYPE html>
<html>
<body>

<h2>示例一：获取元素并修改内容</h2>

<p id="demo">Hello World!</p>

<button onclick="myFunction()">点击修改内容</button>

<script>
function myFunction() {
  let elem = document.getElementById("demo");
  elem.innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

在这个示例中，我们通过getElementById()方法获取了一个id为“demo”的元素节点，并在点击按钮时将其内容修改为“Hello JavaScript!”。

示例二：遍历节点列表

<!DOCTYPE html>
<html>
<body>

<h2>示例二：遍历节点列表</h2>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

<button onclick="myFunction()">点击遍历节点</button>

<script>
function myFunction() {
  let elems = document.getElementsByTagName("p");
  let txt = "";
  for (let i = 0; i < elems.length; i++) {
    txt = txt + elems[i].innerHTML + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

<p id="demo"></p>

</body>
</html>

在这个示例中，我们通过getElementsByTagName()方法获取了所有的p元素节点，并在点击按钮时遍历所有p元素节点的内容，并显示在一个id为“demo”的元素节点中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript DOM的简介,节点和获取元素详解 - Python技术站