Javascript教程（十三）——真正的JS开始了，宿主对象之DOM (1)

Microbabyshine

于 2021-02-12 20:32:53 发布

阅读量264

点赞数 1

分类专栏： JavaScript教程文章标签： js javascript dom 文档对象模型

本文链接：https://blog.csdn.net/qq_32755875/article/details/113796379

版权

JavaScript教程专栏收录该内容

13 篇文章 6 订阅

订阅专栏

DOM

一、DOM简介

DOM，全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
- 文档 —— 文档表示的就是整个的HTML网页文档
- 对象 —— 对象表示将网页中的每一个部分都转换为了一个对象
- 模型 —— 使用模型来表示对象之间的关系，这样方便我们获取对象

二、节点

1、节点简介

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
- 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。
- 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
节点的类型不同，属性和方法也都不尽相同。

2、节点分类

Node——构成HTML文档最基本的单元

常用节点分四类
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容

3、节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	★文本内容

3.1 文档节点document

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			/*
			 * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			console.log(document);   //直接在控制台中打印完整的网页结构
			
			//获取到button对象
			var btn = document.getElementById("btn");   //通过id寻找，找到id为btn的元素
			
			// 现在这个变量btn就是上面那个按钮对象
			//修改按钮的文字
			// 就是修改按钮里面的Html标签里的文字
			btn.innerHTML = "I'm Button";
		</script>
	</body>
</html>

在这里插入图片描述

事件

一、事件简介

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
JavaScript与 HTML之间的交互是通过事件实现的。
对于Web 应用来说，有下面这些代表性的事件：
- 点击某个元素、
- 将鼠标移动至某个元素上方、
- 关闭窗口、
- 按下键盘上某个键，等等。

二、事件的处理

我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--下面这行写法 是直接在标签里，通过属性直接绑定，
			我们称为结构和行为耦合，不方便维护，不推荐使用	-->
		<!--<button id="btn" οnmοusemοve="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
		
		<!--以下代码推荐-->
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			//获取按钮对象
			// 一定要先获取对象，没有对象，什么都不好操作
			var btn = document.getElementById("btn");
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时，其对应的函数将会被调用
			 */
			//绑定一个单击事件（onclick）
			// 补充：ondblclick——双击事件   // onmousemove——鼠标移动
			//像这种为单击事件绑定的函数，我们称为单击响应函数
			btn.onclick = function(){
				alert("你还点~~~");
			};
		</script>
	</body>
</html>

文档加载顺序

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行
如果将script标签写到页面的上边，在上面的JS代码执行时，页面还没有加载，页面没有加载的话DOM对象也没有加载，所以也会导致上面的 var btn = document.getElementById("btn")无法获取到DOM对象
所以就会把script代码写到下部，这样按钮对象先加载完毕，才执行后面的js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			// 写到这里，去点击button时是会报错的，
			/*
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};	
			*/
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		
		<script type="text/javascript">
			/*
			 * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
		</script>-->
	</body>
</html>

那如果我就想把script代码写到上面，写到head里呢？
这时就要用到onload事件，而且是对于window这个对象绑定onload事件，
该事件可以使其对应的响应函数，在页面全部加载完毕之后再执行，
这样可以确保我们响应函数中的JS代码执行时，所有的DOM对象都已经加载完毕了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行，
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 * 	
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
			
			
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
	</body>
</html>