Skip to content

DOM编程

HTML文档的树状结构

graph TD A[文档: Document]:::root --> B[元素: html]:::html B --> C[元素: head]:::head B --> D[元素: body]:::body C --> E[元素: meta]:::element C --> F[元素: script]:::element C --> G[元素: title]:::element E --> H[属性: http-equiv]:::attr E --> I[属性: content]:::attr G --> J[文本: DOM结构]:::text D --> K[元素: a]:::element D --> L[元素: input]:::element K --> M[属性: href]:::attr K --> N[文本: 淘宝]:::text L --> O[属性: onclick]:::attr L --> P[属性: value]:::attr %% 苹果极简清淡配色 classDef root fill:#f5f5f7,stroke:#d2d2d7,color:#1d1d1f,stroke-width:1px classDef html fill:#e8edf2,stroke:#b7c4d1,color:#1d1d1f,stroke-width:1px classDef head fill:#fef2f2,stroke:#fccaca,color:#1d1d1f,stroke-width:1px classDef body fill:#f2f7f5,stroke:#c6e0d5,color:#1d1d1f,stroke-width:1px classDef element fill:#fef6fb,stroke:#f7d6e6,color:#1d1d1f,stroke-width:1px classDef attr fill:#f1f9ff,stroke:#b3d7f9,color:#1d1d1f,stroke-width:1px classDef text fill:#fdf8ee,stroke:#f9e0b7,color:#1d1d1f,stroke-width:1px

什么是DOM

DOM－Document Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件 。

示例：

  • 页面

  • 源代码

    动态改变HTML中的内容
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    <html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript">
    function changeLink() {
      document.getElementById('myAnchor').innerHTML = "搜狐";
      document.getElementById('myAnchor').href = "http://www.sohu.com";
    }
  </script>
  <title>DOM结构</title>
</head>

<body>
  <a id="myAnchor" href="http://www.taobao.com">淘宝</a>
  <input type="button" onclick="changeLink()" value="使用DOM改变链接">
</body>

</html>

DOM对象模型

DOM对象模型

graph TD %% 层级节点 A[Window]:::layer1 B[History]:::layer2 C[Document]:::layer2 D[Location]:::layer2 E[Link]:::layer3 F[Form]:::layer3 G[Anchor]:::layer3 H[Text]:::layer4 I[Textarea]:::layer4 J[Radio]:::layer4 K[Checkbox]:::layer4 L[Button]:::layer4 M[Option]:::layer4 N[Reset]:::layer4 O[Submit]:::layer4 P[Select]:::layer4 %% 关联连线 A --> B A --> C A --> D C --> E C --> F C --> G E --> H E --> I E --> J E --> K E --> L E --> M E --> N E --> O E --> P %% 苹果Apple原生极简磨砂浅色系 classDef layer1 fill:#f5f5f7,stroke:#d2d2d7,color:#1d1d1f classDef layer2 fill:#e8edf2,stroke:#b7c4d1,color:#1d1d1f classDef layer3 fill:#fef2f2,stroke:#fccaca,color:#1d1d1f classDef layer4 fill:#f2f7f5,stroke:#c6e0d5,color:#1d1d1f