HTML | DOM 标签对象

简介

HTML（Hypertext Markup Language）是用于构建网页的标准标记语言，它通过使用不同的标记来描述网页的结构。DOM（Document Object Model）是一种表示和操作HTML文档的API，它将HTML文档表示为树形结构，使得程序员可以通过操作DOM来修改网页内容、结构和样式。

在DOM中，每一个HTML元素都被表示为一个标签对象，标签对象提供了许多属性和方法，用于访问和操作HTML元素。

标签对象属性

innerHTML

属性：innerHTML

描述：获取或设置HTML元素的内容。

示例：

<div id="example"></div>
<script>
  const element = document.getElementById("example");
  element.innerHTML = "Hello, World!";
  console.log(element.innerHTML); // 输出：Hello, World!
</script>

className

属性：className

描述：获取或设置HTML元素的class属性。

示例：

<div id="example" class="my-class"></div>
<script>
  const element = document.getElementById("example");
  console.log(element.className); // 输出：my-class
  element.className = "new-class";
</script>

style

属性：style

描述：获取或设置HTML元素的样式属性。

示例：

<div id="example" style="color: red;"></div>
<script>
  const element = document.getElementById("example");
  console.log(element.style.color); // 输出：red
  element.style.color = "blue";
</script>

value

属性：value

描述：获取或设置表单元素的值。

示例：

<input id="example" type="text" />
<script>
  const inputElement = document.getElementById("example");
  console.log(inputElement.value); // 输出：输入框中的值
  inputElement.value = "新的值";
</script>

标签对象方法

getElementById()

方法：getElementById(id)

描述：根据id获取HTML元素。

示例：

<div id="example">Hello, World!</div>
<script>
  const element = document.getElementById("example");
  console.log(element.innerHTML); // 输出：Hello, World!
</script>

getElementsByTagName()

方法：getElementsByTagName(tagName)

描述：根据标签名获取一组HTML元素。

示例：

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>
<script>
  const listItems = document.getElementsByTagName("li");
  for (let i = 0; i < listItems.length; i++) {
    console.log(listItems[i].innerHTML);
  }
</script>

querySelector()

方法：querySelector(selector)

描述：根据选择器获取匹配的第一个HTML元素。

示例：

<div class="example">Hello</div>
<div class="example">World</div>
<script>
  const element = document.querySelector(".example");
  console.log(element.innerHTML); // 输出：Hello
</script>

addEventListener()

方法：addEventListener(event, handler)

描述：为HTML元素添加事件监听器。

示例：

<button id="example">Click Me</button>
<script>
  const button = document.getElementById("example");
  button.addEventListener("click", function() {
    console.log("Button clicked");
  });
</script>

总结

HTML标签对象提供了丰富的属性和方法，用于访问和操作HTML元素。通过使用这些属性和方法，程序员可以在网页中动态修改内容、样式和行为。熟练掌握HTML标签对象的使用可以帮助开发人员更有效地构建交互性和动态性的网页应用程序。