Skip to content

DOM编程

HTML文档的树状结构

HTML文档的树状结构

什么是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; Window --> History; Window --> Document; Window --> location; Document --> Link; Document --> Form; Document --> Anchor; Link --> Text; Link --> Textarea; Link --> Radio; Link --> Checkbox; Link --> Button; Link --> Option; Link --> Reset; Link --> Submit; Link --> select;