DOM模型

最新推荐文章于 2024-07-17 09:44:02 发布

minisal

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量129

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/xx_yan/article/details/105159052

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM - Document Object Model 文档对象模型

简介

DOM是呈现或者操作HTML或者XML文档的API。DOM是浏览器中加载的文档模型，以节点树的形式来表现文档，每个节点都是文档构成的一部分。
DOM允许运行在浏览器中的代码访问并操作文件中的节点。节点上可以绑定事件监听器，当事件被触发时，节点可以被创建、移动、修改。

常见的将web页面与脚本或者编程语言连接起来的DOM文档对象模型为JavaScript，所以它也被称为DOM0。但是JS并没有为HTML、SVG、XML文档建模，只是利用了DOM的逻辑树文档模型。树的分支的终点为一个节点，每个节点都包含一个对象。DOM的方法提供了操作逻辑树的方式，节点结构、样式、内容都可以被更改。

DOM实例

以下为使用了DOM的web和XML的例子。例子使用了公共API和JS中的模式来操作这些文档对象。

Example 1: 更改宽度

<!DOCTYPE html>
<html lang="en">
<head>
<title>Modifying an image border</title>

<script>
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
</script>
</head>

<body>
<p>
  <img id="img1"
       src="https://profile.csdnimg.cn/F/8/A/3_xx_yan"
       style="border: 5px solid green;"
       width="100" height="100" alt="border test">
</p>

<form name="FormName">
  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
</form>

</body>
</html>

minisal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM模型

DOM - Document Object Model 文档对象模型简介DOM是呈现或者操作HTML或者XML文档的API。DOM是浏览器中加载的文档模型，以节点树的形式来表现文档，每个节点都是文档构成的一部分。DOM允许运行在浏览器中的代码访问并操作文件中的节点。节点上可以绑定事件监听器，当事件被触发时，节点可以被创建、移动、修改。常见的将web页面与脚本或者编程语言连接起来的DOM文档...
复制链接

扫一扫