JavaScript 之DOM一
文章目录
DOM?
一、事件
1.事件的行内写法
2.事件绑定处理函数的写法
二、文档的加载
1.文档加载的顺序
2.onload事件改变加载顺序
三、DOM查询
轮播图实验
全选练习
添加删除员工练习
DOM?
DOM全称为Document Object Model , 即JS当中的宿主对象 .
一个网页就是一个文档对象 , 一个每个标签都可以看作一个对象

结点 : 构成网页的最基本部分, 网页的每部分都是一个结点

文档结点: 整个网页,document对象
元素结点: HTML标签
属性结点: 元素的属性
文本结点: 标签中的文本内容 <_{>文本节点</}>

提示：以下是本篇文章正文内容，下面案例可供参考

一、事件
JS与HTML通过事件实现交互

1.事件的行内写法

这是一个按钮

缺点 : 不利于维护

2.事件绑定处理函数的写法

这是一个按钮

维护更加方便

二、文档的加载
1.文档加载的顺序
在HTML文件中,通常都是从上往下逐行加载的,也就是说会先加载head标签中的内容,再加载body中的内容

代码如下（示例）：

var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert('dian');
		};
<button id="btn" value="按钮">这是一个按钮</button>

这种写法会报空指针异常,因为btn还没加载出来

2.onload事件改变加载顺序
onl oad事件会在整个页面加载完以后再触发 , 但是会影响性能

注意需要将onload事件绑定给window对象

代码如下（示例）：

	window.onload = function() {
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function() {
				alert("hello");
			};
		};
<button id="btn" value="按钮">这是一个按钮</button>

这样写就不能有空指针异常了

三、DOM查询
1.document对象的几个查询方法 :

1.document.getElementById(); 根据id获取元素对象
2.document.getElementsByTagName(); 根据标签名获取一组元素对象
3.document.getElementsByName(); 根据input框的name属性获取元素对象[radio]
4.document.querySelector(".info"); 根据标签属性查询,返回一个值
5.document.querySelectorAll(".info"); 根据标签属性查询,返回一个数组

2.查询实验 :

	window.onload = function(){
			var btn01 = document.getElementById("bj");	
			var btn02 = document.getElementsByName("gender");
			var btn03 = document.getElementsByTagName("li");
			alert(btn01.innerHTML); //提示出 "北京"
			for(var i = 0 ; i <btn02.length ; i++){
				alert(btn02[i].className);
				alert(btn02[i].name);
			}
			
			for(var j = 0; j < btn03.length ; j++){
				alert(btn03[i].innerHTML);
			}
			
		};

注 : document.getElementsByName(param); 方法,如果要获取class,需要使用className取值 , 其它的属性与html标签中的属性名保持一致

querySelector()与querySelectorAll()实验 :

	<script type="text/javascript">
		
		window.onload = function(){
			var div = document.querySelector(".info");
			console.log(div.innerHTML);
			
			var divList = document.querySelectorAll(".info");
			for(var i = 0 ; i < divList.length ; i++){
				console.log(divList[i].innerHTML );
			}
		};
		
	</script>
HTML