深入剖析DOM对象中的常用属性

2023-10-14 02:44:55





## DOM对象概述

DOM（Document Object Model）是W3C组织推荐的处理可扩展标记语言（HTML、XML）的编程接口。它将整个页面组织成一个树形结构，其中每个节点都是DOM对象。DOM对象代表了页面中的元素、文本、注释等内容。

## DOM对象中的常用属性

DOM对象拥有许多属性，其中最常用的包括innerHTML、innerText、className和style属性。

### 1. innerHTML属性

innerHTML属性用于获取或设置元素的HTML内容。它返回元素及其所有子元素的HTML代码。

标题

段落

```

效果截图：

innerHTML属性效果截图

2. innerText属性

innerText属性用于获取或设置元素的文本内容。它返回元素及其所有子元素的文本内容，而不包括HTML标签。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="myDiv">
    <h1>标题</h1>
    <p>段落</p>
  </div>

  <script>
    // 获取元素的innerText
    var text = document.getElementById("myDiv").innerText;

    // 设置元素的innerText
    document.getElementById("myDiv").innerText = "新的内容";
  </script>
</body>
</html>

效果截图：

innerText属性效果截图

3. className属性

className属性用于获取或设置元素的class属性值。class属性用于为元素添加样式。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="myDiv" class="my-class">
    <h1>标题</h1>
    <p>段落</p>
  </div>

  <script>
    // 获取元素的className
    var className = document.getElementById("myDiv").className;

    // 设置元素的className
    document.getElementById("myDiv").className = "new-class";
  </script>
</body>
</html>

效果截图：

className属性效果截图

4. style属性

style属性用于获取或设置元素的样式。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="myDiv">
    <h1>标题</h1>
    <p>段落</p>
  </div>

  <script>
    // 获取元素的style
    var style = document.getElementById("myDiv").style;

    // 设置元素的style
    document.getElementById("myDiv").style.color = "red";
  </script>
</body>
</html>