DOM介绍
事件介绍
文档加载
DOM查询
DOM介绍
浏览器已经提供了文档节点对象 时window属性，可以在页面中直接使用（document文档节点代表整个网页）
<button id ="btn">按钮</button>
<script>
//获取button对象
var btn = document.getElementById("btn");
console.log(btn);
//修改按钮文字
btn.innerHTML = "被修改过的按钮" //获取标签内部html内容
</script>
事件介绍
事件就是用户和浏览器之间的交互行为，如：点击按钮、鼠标移动、关闭窗口……
处理事件
定义onclick我们可以在事件对于的属性中设置一些js代码，当事件被触发时这些代码会被执行。
<button id ="btn" onclick="alert('点我干嘛')">按钮</button>
可以为按钮的对应事件绑定处理函数的形式来响应事件 （象这种为单击事件绑定的函数一般称为单击事件绑定函数）
<button id ="btn">按钮</button>
<script>
//获取按钮对象
var btn = document.getElementById("btn");
//绑定单击事件
btn.onclick = function(){
alert("点我干嘛")；
}
</script>文档加载
onload事件会整个页面加载完成之后才会被触发
//为window绑定响应事件
window.onload = function(){
//触发代码
}DOM查询
获取元素节点
通过document调用
1. getElementById()
– 通过id属性获取一个元素节点对象
2. getElementsByTagName()
– 通过标签名获取一组元素节点对象
3. getElementsByName()
– 通过name属性获取一组元素节点对象
获取元素节点的子节点
通过具体元素节点调用
1. getElementsByTagName()
– 方法，返回当前节点的指定标签名后代节点
2. childNodes
– 属性，表示当前节点的所有子节点
3. firstChild
– 属性，表示当前节点的第一个子节点
4. lastChild
– 属性，表示当前节点的最后一个子节点
元素节点的属性
• 获取，元素对象.属性名
例：
element.value
element.id
element.className
• 设置，元素对象.属性名=新的值
例：element.value = “hello”
element.id = “id01”
element.className = “newClass”
• nodeValue
– 文本节点可以通过nodeValue属性获取和设置
文本节点的内容
• innerHTML
– 元素节点通过该属性获取和设置标签内部的
html代码
节点的修改
• 这里的修改我们主要指对元素节点的操作。
• 创建节点
– document.createElement(标签名)
• 删除节点
– 父节点.removeChild(子节点)
• 替换节点
– 父节点.replaceChild(新节点 , 旧节点)
• 插入节点
– 父节点.appendChild(子节点)
– 父节点.insertBefore(新节点 , 旧节点)
