javascript_19-DOM初体验

DOM

DOM: 文档对象模型（Document Object Model），又称为文档树模型。是一套操作HTML和XML文档的API。

DOM可以把HTML和XML描述为一个文档树。树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的某一部分。

DOM的相关概念

DOM就是把HTML视为一个层次结构（树形结构）的文档
文档（Document）：就是指HTML或者XML文件
节点（Node）：HTML文档中的所有内容都可以称之为节点
元素（Element）：HTML文档中的标签可以称之为元素
文档元素（根元素）：文档的第一个元素，HTML文档元素就是<html>
文本节点
属性节点
父节点 parent
子节点 child
兄弟节点 silbing

DOM可以做什么

找对象（元素）
设置元素的属性
设置元素的样式
动态创建和删除元素
事件--触发响应
- 事件源（事件的触发者）
- 事件名称
- 事件响应程序

DOM初体验

<a onclick="alert('aaa'); return false"></a> 取消a标签的默认行为。
找到id是link1的dom对象（a标签）

要等到标签生成之后，再来获取对应的dom对象。所以要注意<script>在文档中的位置。

var link1 = document.getElementById("link1");

//给link1注册单击事件
//事件的三要素
	//事件源--事件的触发者link1
	//事件处理程序--onclick == 匿名函数
	//事件名称 click

link1.onclick = function(){
	alert("hahah");
	//取消a标签默认行为的执行
	return false;
}

给a标签注册多个事件

//1 能够点击
	//获取页面上的a标签
	document.getElementById();

	var links =document.getElementsByTagName();
	for (var i = 0; i<links.length;i++){
		var link =links[i]; //获取每一个a标签
		//给link对象注册时间
		link.onclick = function(){

			//....
			//获取 要改变的dom元素对象
			//获取 要改变的动作
			//替换 
							
			//取消a的默认行为
			return false;
		}		
	}