Dow的简介

Dow的简介

科技前沿 • 2025-04-11 07:56 • 阅读 28

大家好，我是讯享网，很高兴认识大家。

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 把文档、节点、元素都看作是对象

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

讯享网

讯享网<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>

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

4.节点关系

相关推荐

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