html dom是什么-猿码集

1. HTML DOM是什么

HTML DOM（文档对象模型）是一种用于HTML和XML文档的API（应用程序编程接口），它可以让开发者通过编程语言如 JavaScript 来修改文档的内容、结构和样式。HTML DOM 将 HTML 和 XML 文档表示为树形结构，可以通过 JavaScript 来遍历和访问文档中的每个节点，如元素、文本和属性等。

2. HTML DOM的基本概念

2.1 节点（Node）

节点是HTML和XML文档中最基本的单位，例如：元素节点、属性节点、文本节点等。节点之间有父子和兄弟关系，用树形结构表示。

例如，下面的HTML代码中，<a>是元素的子节点，元素则是<body>的子节点。

<body>
  <p>这是一个<a href="https://www.example.com">链接</a></p>
</body>

在 JavaScript 中，可以通过document对象的方法来获取节点。

例如，获取上述代码中的<a>元素节点：

var link = document.getElementsByTagName("a")[0];
//getElementsByTagName方法返回的是一个数组，需要使用[]来获取特定的元素

2.2 属性（Attribute）

属性是元素节点中的键值对，例如：id、class、href等。JavaScript中可以通过节点对象的getAttribute()和setAttribute()方法来获取和设置节点的属性。

例如，获取上述代码中的href属性：

var hrefValue = link.getAttribute("href");

设置href属性：

link.setAttribute("href", "https://www.example2.com");

2.3 HTML集合（HTMLCollection）

HTML集合是一个节点的列表，例如：HTML文档中的所有元素等。可以使用 JavaScript 的document对象的许多方法获取 HTML 集合，如getElementById()、getElementsByTagName()等方法。

例如，获取所有元素：

var pElements = document.getElementsByTagName("p");

2.4 节点列表（Node List）

节点列表类似于 HTML 集合，也是一个节点的列表，但是它更通用，可以包含各种节点类型。节点列表可以是静态的，也可以是动态的（在节点改变时自动更新）。可以使用 JavaScript 的document对象的许多方法获取节点列表，如querySelectorAll()等方法。

例如，获取所有class为example的元素节点：

var elements = document.querySelectorAll(".example");

3. 使用HTML DOM操作HTML元素

JavaScript 可以通过 HTML DOM 来修改 HTML 元素的内容、结构和样式。

3.1 HTML内容

可以使用 JavaScript 来修改 HTML 元素的内容，比如给 元素添加一些文本。

var pElement = document.getElementsByTagName("p")[0];
pElement[xss_clean] = "这是一个段落。";

3.2 访问和修改HTML属性

可以使用 JavaScript 来访问和修改 HTML 元素的属性，比如修改 <a> 元素的 href 属性。

var link = document.getElementsByTagName("a")[0];
link.href = "https://www.example2.com";

3.3 修改HTML样式

可以使用 JavaScript 来修改 HTML 元素的样式，比如修改  元素的背景颜色。

var pElement = document.getElementsByTagName("p")[0];
pElement.style.backgroundColor = "yellow";

4. HTML DOM事件

HTML DOM 事件是文档或元素发生的事情，比如点击按钮、加载页面或输入文本。JavaScript 可以使用 HTML DOM 来处理这些事件。

4.1 调用JavaScript函数

可以将 JavaScript 函数与 HTML 元素的事件关联，当事件发生时就会调用 JavaScript 函数。

例如，下面的 HTML 代码中，当按钮被点击时，会调用 JavaScript 函数 myFunction()：

<button onclick=myFunction()">点击按钮</button>

在 JavaScript 中，可以定义myFunction()函数来处理点击事件：

function myFunction() {
  //处理点击事件
}

4.2 添加和移除事件监听器

可以使用 JavaScript 来添加和移除事件监听器，可以使用addEventListener()和removeEventListener()方法来处理事件。

例如，下面的 HTML 代码中，元素会在鼠标移入和移出时调用不同的函数：

<p id="myp">这是一个段落。</p>

在 JavaScript 中，可以添加事件监听器：

var pElement = document.getElementById("myp");
pElement.addEventListener("mouseover", mouseOverFunction);
pElement.addEventListener("mouseout", mouseOutFunction);
function mouseOverFunction() {
  this.style.backgroundColor = "yellow";
}
function mouseOutFunction() {
  this.style.backgroundColor = "white";
}

5. HTML DOM与AJAX

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，通过 JavaScript 使用 XML 或 JSON 载入新数据并显示的技术。

可以使用 HTML DOM 与 AJAX 一起使用，将数据动态插入到 HTML 页面中。

例如，使用 AJAX 来载入一个外部文本文件，并将其插入到 HTML 页面中：

<div id="myDiv"></div>

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("myDiv")[xss_clean] = this.responseText;
  }
};
xhttp.open("GET", "text.txt", true);
xhttp.send();

其中，readystate属性存有 XMLHttpRequest 的状态信息，true表示异步执行，open()方法规定请求类型、URL 和异步标志，send()方法将请求发送到服务器。

6. 总结

HTML DOM 是一种用于 HTML 和 XML 文档的 API，它可以让开发者通过编程语言如 JavaScript 来修改文档的内容、结构和样式。HTML DOM 将 HTML 和 XML 文档表示为树形结构，可以通过 JavaScript 来遍历和访问文档中的每个节点，如元素、文本和属性等。

本文介绍了 HTML DOM 的基本概念，节点、属性、HTML 集合、节点列表等；以及如何使用 HTML DOM 来操作 HTML 元素，修改 HTML 内容、访问和修改 HTML 属性，以及修改 HTML 样式。此外，本文还介绍了 HTML DOM 事件和 AJAX 技术。通过 HTML DOM 和 AJAX 技术，可以实现动态的网页效果。

html dom是什么