DOM-1124

文档对象模型

DOM  Document Object Model

html标签 == 元素 == 节点  Element

事件

<!-- 
在事件对应的属性中设置一些js代码
当事件触发时，执行此代码
			 
此种方式我们成为结构与行为的耦合
不方便维护 ，不推荐使用
-->

button绑定单机事件

<button onclick="alert('hello world')">按钮</button>

** 对div标签绑定了鼠标移入的事件**

<div onmouseover="alert('hello javascript')"></div>

事件:浏览器与用户之间交互的行为
鼠标移动 鼠标点击

文档加载

window.onload = function(){
	var id =document.getElementById("btn")
	console.log(id)
}

1- 浏览器加载页面时，自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的顶部
在执行代码时，页面没有加载，页面也没有加载dom对象就会导致无法获取dom对象
2- onload 事件在整个页面加载完成之后才触发
可以给window绑定onload事件
此事件的回调处理函数在页面加载完成时候执行	
确保咱们可以执行所有的dom对象

html dom 元素访问

根据指定id信息获取元素对象，返回:对象

var btn = document.getElementById("btn")

加粗样根据指定标签信息获取元素对象的集合 返回:数组式

var button = document.getElementsByTagName("button")

加粗样根据指定name信息获取元素对象，返回:数组式

var btn1 = document.getElementsByName("btn1")

根据指定class信息获取元素对象，返回:数组

var c1 = document.getElementsByClassName("c1")

根据id名称获取指定元素button，返回一个button对象

var btn = document.getElementById("button")

根据标签名称获取指定元素p ，返回一个数组 数组中包含多个p对象

var p = document.getElementsByTagName("p")

给btn注册单击事件

btn.onclick = function(){
// 当事件触发
// 循环遍历数组中的每一个元素 
for(var i=0;i < p.length;i++){
	// console.log(p[i])
	// 设置元素的内容为 hello kitty
	p[i].innerHTML = "hello kitty"
	}
}