📌  相关文章
📜  HTML DOM 输出对象(1)

📅  最后修改于: 2023-12-03 15:15:34.008000             🧑  作者: Mango

HTML DOM 输出对象

在 JavaScript 中，HTML DOM（文档对象模型）是用于访问 HTML 元素的编程接口。

当 JavaScript 与 HTML DOM 一起使用时，您能够：

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的属性
  • 改变 HTML 元素的样式
  • 添加或删除 HTML 元素

HTML DOM 的输出对象有以下几种：

1. Document 对象

在 HTML 页面中，根节点是<html>标签。这个标签的所有子元素都是它的子节点。 文档对象模型（DOM）在页面载入完成后被创建，并可通过 JavaScript 来访问。

Document 对象表示整个 HTML 页面，它是我们操作 DOM 的入口。可以通过以下方式获取 Document 对象:

var doc = document;

相比其他输出对象， Document 对象更为重要，因为它是处理 DOM 的入口。

2. Element 对象

Element 对象是 HTML 文档中所有 HTML 元素的父对象。通过获取 Element 对象，我们可以获取元素的属性，样式，子节点等信息。获取 Element 对象的方式有很多，比较常见的方式是通过元素的 ID 或标签名获取：

var elementById = document.getElementById('myId');
var elementsByTagName = document.getElementsByTagName('div');
3. NodeList 对象

NodeList 对象是一组有序的节点集合，可以通过一些方法获取它们，通常使用最多的获取方式是通过查询一个或多个元素的标签名或者类名。获取 NodeList 的示例代码如下：

var nodes = document.querySelectorAll('div');
4. Attr 对象

Attr 对象表示 HTML 属性，它通常是由 Element 对象的 attributes 属性返回。可以通过以下方式获取 attributes 最终返回 Attr 对象:

var attr = element.attributes.getNamedItem('id');
5. Text 对象

Text 对象是 DOM 树中的文本节点，通常由 Element 对象的 childNodes 属性返回。获取 Text 对象的方式如下：

var textNode = element.childNodes[0];
6. HTMLCollection 对象

HTMLCollection 对象类似于 NodeList 对象，但只包含元素节点（即不包含文本节点等）。通常通过 Element 对象的 children 属性返回。获取 HTMLCollection 对象的示例代码如下：

var children = element.children;

以上就是 HTML DOM 的输出对象，它们可以进行丰富的操作来对 HTML 页面进行细致的控制和修改。