Dow的简介

HQw_25

已于 2022-08-02 11:21:27 修改

阅读量354

点赞数

文章标签： html 前端 javascript

于 2022-08-02 11:20:11 首次发布

本文链接：https://blog.csdn.net/HQw_25/article/details/126109483

版权

1.DOM的概念
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

总结：W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、样式。

DOM节点树

DOM 又称为文档树模型

（1）文档：一个网页可以称为文档，DOM中使用 document 表示

（2）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中用 node 表示

（3）元素：网页中的标签，DOM中使用 element 表示

（4）属性：标签的属性

注：DOM 把文档、节点、元素都看作是对象

3. 常用事件监听方法
（1）绑定 HTML 元素属性。

<input type="button" id="btn" value="点我有惊喜" onclick="alert('点我做什么')" />

（2）绑定 DOM 对象属性。

<body>
	<input type="button" id="btn" value="点我有惊喜" />
    <script>
      var btn = document.getElementById("btn");
      btn.onclick = function () {
        alert("惊喜");
      };
    </script>
</body>

4.节点关系

根节点：一个HTML文档只有一个根，它就是HTML节点。

子节点：某一个节点的下级节点。

父节点：某一个节点的上级节点。

兄弟节点：两个子节点同属于一个父节点。

5.点击换图片


<body>
    <input type="button" value="点击" id="btn" /><br />
    <img src="images/a.jpg" id="pic" width="400" height="300" />
    <script>
      var btn = document.getElementById("btn");
      var pic = document.getElementById("pic");
      var num = 1;
      btn.onclick = function () {
        if (num === 1) {
          pic.src = "images/b.jpg";
          num = 2;
        } else {
          pic.src = "images/a.jpg";
          num = 1;
        }
      };
    </script>
</body>

6.点击隐藏图片

* {
  margin: 0;
  padding: 0;
}
div {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.hide {
  display: none;
}
.show {
  display: block;
}

<body>
    <input type="button" value="点击隐藏" id="button" />
    <div id="box"></div>
    <script>
      var btn = document.getElementById("button");
      var box = document.getElementById("box");
      btn.onclick = function () {
        if (this.value === "点击隐藏") {
          box.className = "hide";
          this.value = "点击显示";
        } else {
          box.className = "show";
          this.value = "点击隐藏";
        }
      };
    </script>
</body>