DOM基础

最新推荐文章于 2023-01-20 15:50:44 发布

半成熟、

最新推荐文章于 2023-01-20 15:50:44 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/bs775926015/article/details/115429708

版权

DOM是什么

首先DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。就是说DOM就是基于文档来执行的操作。也可以说DOM就是一张映射表，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API。
HTML DOM树：
在这里插入图片描述
DOM的基本功能
1.查询某个元素。
2.查询某个元素的祖先、兄弟以及后代元素。
3.获取、修改元素的属性。
4.获取、修改元素的内容。
5.创建、插入和删除元素。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过JavaScript，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目。

JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
DOM操作Checkbox实例


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM操作checkbox</title>
<script type="text/javascript">
	//当html页面加载完后;执行以下函数
	window.onload = function() {
		document.getElementById("btn").onclick = function() {
			var inputs = document.getElementsByTagName("input");
			for ( var i = 0; i < inputs.length; i++) {
				if (inputs[i].type = "checkbox") {
					if (inputs[i].value % 2 != 0) {
						inputs[i].checked = true;
					}
				}
			}
		}
	}
</script>
</head>
<body>
	<input type="checkbox" value="1" />
	<input type="checkbox" value="2" />
	<input type="checkbox" value="3" />
	<input type="checkbox" value="4" />
	<input type="checkbox" value="5" />
	<input type="checkbox" value="6" />
	<input type="checkbox" value="7" />
	<input type="checkbox" value="8" />
	<input type="checkbox" value="9" />
	<input type="checkbox" value="10" />
	<button id="btn">选中奇数</button>
</body>

代码效果：
在这里插入图片描述

半成熟、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础

DOM是什么首先DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。就是说DOM就是基于文档来执行的操作。也可以说DOM就是一张映射表，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API。HTML DOM树：DOM的基本功能1.查询某个元素。2.查询某个元素的祖先、兄弟以及后代元素。3.获取、修改元素的属性。4.获取、修改元素的内容。5.创建、插入和删除元素。DOM实际上是以面向对象
复制链接

扫一扫