JavaScript:DOM对象模型(一)

最新推荐文章于 2024-07-19 12:58:53 发布

年少有为✘

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量144

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46454139/article/details/115705285

版权

文章目录

一、DOM对象模型
- 初始DOM
- Node节点以及访问Node结点

一、DOM对象模型

初始DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
DOM的特性：
1、DOM可以用于任何编程语言
2、DOM技术使得用户页面可以动态地变化，增强页面交互性
3、操作DOM是表示和处理一个HTML或XML文档的常用方法

通过操作DOM树，JS可以实现：
1、改变页面中任意的HTML元素
2、改变页面中任意的HTML属性
3、改变页面中任意的CSS样式
4、删除页面中任意的HTML元素和属性
5、添加任意的HTML元素和属性到页面中
6、对页面中任意的事件做出响应
7、对页面中的任意元素添加事件

DOM对象模型可用树形结构表示

<!DOCTYPE html>
<html>
	<head> //第一级
		<meta charset="UTF-8">
		<title>标题</title> //第二级
	</head>
	<body> //第一级
		<div> //第二级
			<a>哈哈哈</a>  //第三级
		</div>
		<p>嘿嘿嘿</p> //第二级
	</body>
</html>

在这里插入图片描述

Node节点以及访问Node结点

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
HTML中的所有内容都可以用节点（Node）来描述

节点共有12种类型，常见的节点类型有
元素节点 elementNode
属性节点 attributeNode
文本节点 textNode

使用getElement系列方法可以访问指定元素

方法	说明	返回值
getElementById()	根据ID查找对应元素	单个值
getElementsClassName()	根据class名查找对应元素	数组
getElementsTagName()	根据标签名查找对应元素	数组
getElementsByName()	根据表单元素name值查找对应元素	数组

这里注意，四个方法中只有getElementById()的返回值是单个值，其余都是数组形式的返回值。在书写的时候也会有区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题</title>
	</head>
	<body>
		<select id="t1" name="aa" class="a1">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<script type="text/javascript">
			var se1=document.getElementsByName('aa')[0];
			console.log(se1);
			var se2=document.getElementsByClassName('a1')[0];
			console.log(se2);
			var se3=document.getElementsByTagName('select')[0];
			console.log(se3);
			var se4=document.getElementById('aa');
			console.log(se4);
		</script>
	</body>
</html>

控制台输出的结果如下：
在这里插入图片描述

通过层级关系访问结点

方法	说明	返回值
node.parentNode	访问父节点	单个值
node.childNodes	访问子节点集合	数组
node.childNodes	访问第一个子节点	单个值
node.lastChild	访问最后一个子节点	单个值
node.previousSibling	访问前一个兄弟节点	单个值
node.nextSibling	访问后一个兄弟节点	单个值

特别注意：
使用以上方法时：换行符和空白符也是一个结节点。在DOM树中也会专门用一个节点表示
每个Node节点包括如下属性
节点类型：NodeType
节点名：NodeName
节点值： NodeValue

通过层级关系访问元素

方法	说明	返回值
element.parentElment	访问父元素	单个值
element.children	访问子元素集合	数组
element.firtElementChild	访问第一个子元素	单个值
element.lastElementChild	访问最后一个子元素	单个值
element.previousElementSibling	访问前一个兄弟元素	单个值
element.nextElementSibling	访问后一个兄弟元素	单个值

练习：
不修改以下HTML代码，编写JS代码，使用按钮的点击事件为下拉菜单添加文本值1、2、3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题</title>
	</head>
	<body>
		<select name="aa">
			<option value="1"></option>
			<option value="2"></option>
			<option value="3"></option>
		</select>
		<input type="button" value="初始化" onclick="dis()" />
		<p id="result"></p>
		<script type="text/javascript">
			function dis(){
				var se=document.getElementsByName('aa')[0];
				 console.log(se);
				 for(var i=0;i<se.length;i++){
				 	se[i].innerHTML=i+1;
				 }
				 document.getElementById('result').innerHTML="当你点击了初始化按钮之后，你就能看到我了";
			}
		</script>
	</body>
</html>

实现之后效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="获取" id="t1" onclick="dis()" />
		<a>点击按钮获取验证码</a>
		<p id="check"></p>
		<script type="text/javascript">
			function dis() {
				window.get = document.getElementById('t1');
				get.disabled = true;
				get.value = '获取冷却中...';
				window.count = 3;
				js();
			}

			function js() {
				var sj = setTimeout(js, 1000);
				if(count != 0) {
					document.getElementById('check').innerHTML = count + "秒后发送验证码";
				} else {
					document.getElementById('check').innerHTML = null;
					get.disabled = false;
					get.value = "获取";
					clearTimeout(sj);
				}
				count--;
			}
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述

年少有为✘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript:DOM对象模型(一)

文章目录一、DOM对象模型初始DOMNode节点以及访问Node结点二、使用步骤1.引入库一、DOM对象模型初始DOM当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）DOM的特性：1、DOM可以用于任何编程语言2、DOM技术使得用户页面可以动态地变化，增强页面交互性3、操作DOM是表示和处理一个HTML或XML文档的常用方法通过操作DOM树，JS可以实现：1、改变页面中任意的HTML元素2、改变页面中任意的HTML属性3、改变页面中任意的CS
复制链接

扫一扫