📌  相关文章
📜  HTML | DOM 强对象(1)

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

HTML | DOM 强对象

HTML文档中的所有元素都是DOM（Document Object Model）的对象。通过DOM，程序员可以对HTML文档中的所有元素进行访问、操作或者修改。

DOM 树

当浏览器加载HTML文档时，它会创建一个DOM树，DOM树中包含HTML文档中的所有元素。DOM树是一个由父子节点组成的层级结构，如下所示：

<html>
  <head>
    <title>HTML | DOM 强对象</title>
  </head>
  <body>
    <p>通过DOM,程序员可以对HTML文档中的所有元素进行访问、操作或者修改。</p>
  </body>
</html>

在DOM树中，<html>是根节点，它有两个子节点：<head>和<body>。<head>节点有一个子节点：<title>，而<body>节点有一个子节点：<p>。

强对象

在DOM树中，每个元素都是一个对象，这就是所谓的强对象。这意味着我们可以使用JavaScript来访问这些元素，并通过改变对象的属性或方法来改变元素的样式、内容或行为。

例如，我们可以访问<p>元素，改变它的文本内容：

// 获取p元素
var p = document.getElementsByTagName("p")[0];
// 修改p元素的文本内容
p.innerHTML = "DOM是一种跨浏览器，跨平台的API，用于与HTML、SVG和XML文档交互。";

在上面的例子中，document.getElementsByTagName("p")[0]是通过DOM树获取第一个<p>元素的方法。它返回的是一个强对象，我们可以使用强对象的HTML属性来获取或设置元素内容。

DOM 的属性和方法

强对象拥有许多属性和方法，以下是一些常见的属性和方法：

HTML 属性
  • innerHTML：用于获取或设置元素的HTML内容。
  • textContent：用于获取或设置元素的文本内容。
  • id：用于获取或设置元素的ID。
样式属性
  • style：用于获取或设置元素的样式。样式属性为JavaScript的驼峰命名方式，如backgroundColor。
  • classList：用于获取元素的类列表，可以进行添加、删除和切换等操作。
获取元素
  • getElementById(id)：根据元素的ID获取元素。
  • getElementsByClassName(class)：根据元素的类名获取元素。
  • getElementsByTagName(tagName)：根据元素的标签名获取元素。
  • querySelector(selector)：根据CSS选择器获取元素。
  • querySelectorAll(selector)：根据CSS选择器获取多个元素。
修改元素
  • appendChild(node)：在元素末尾添加新的子节点。
  • removeChild(node)：从元素中删除子节点。
  • insertBefore(node, referenceNode)：在参考节点之前插入新的子节点。
  • setAttribute(name, value)：设置元素的属性。
  • removeAttribute(name)：移除元素的属性。
  • addEventListener(type, function)：添加事件监听器。
  • removeEventListener(type, function)：移除事件监听器。
总结

通过DOM，我们可以轻松地访问、操作或修改HTML文档中的所有元素。强对象是DOM树中的元素对象，具有许多属性和方法，可以更改元素的样式、内容或行为。我们可以根据元素的ID、类名、标签名或CSS选择器来获取或修改元素。