DOM基础
1.DOM：文档对象模型
BOM：浏览器对象模型
JS以事件驱动为核心的一门语言
2.事件三要素
事件源（执行者），-----引发后续事件的标签
事件（执行的事情），-------JS定义好直接使用
事件处理程序（结果）-------对样式和HTML的操作
3.执行事件步骤
a） 获取事件源
b） 绑定事件（事件源.事件=function(){事件}）
c） 书写事件驱动程序
4.获取事件方式（5种）
var div=document.getElementById(“box”）;
var arr1=document.getElementsByTagName(“div”) ;//通过标签名找元素
var arr2=document.getElementsByClassName(“leimin”);//通过类名
通过类名查找HTMl元素在IE5,6,7,8中无效
var arr3=document.getElementsByName(“aaa”);
var arr4=document.getElementsByTagNameNS("");
5.绑定事件方式
//1.匿名绑定
div.function () {
alert(1);
//事件处理程序可以操作事件样式
div.style.width=“200px”
}
// 2.不能写返回值
div.fn;
function fn() {
alert(1);
}
//3.行内绑定
function fn() {
alert(1);
}
6.Onload事件
页面加载（图片文本）完毕的时候触发这个事件
用途：Js的加载和HTML同步加载
如果使用元素在定义元素之前，容易报错
7.小案例
京东广告栏（类）
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.top-banner{
background-color: pink;
height:80px;
}
.w{
width:1210px;
margin: 10px auto;
position: relative;
}
img{
width:1210px;
height:80px;
background-color: blue;
}
a{
text-decoration: none;
position: absolute;
top:5px;
right:5px;
background-color: #000;
width: 20px;
height: 20px;
font-size: 20px;
font-family: "Adobe Arabic";
font-weight: 700;
text-align: center;
}
.top-banner .hide{
diaplay:none;
}
</style>
<div class="top-banner" id="topbanner">
<div class="w" id="aaa">
<img alt="">
<a href="#" id="closeBanner">X</a>
</div>
</div>
<script>
//需求：点击a按钮，隐藏盒子
//1.获取事件源
var close=document.getElementById("closeBanner");
var topbanner=document.getElementById("topbanner");
//2.绑定事件
close.function () {
//3.书写事件驱动程序
topbanner.className="hide";
topbanner.className+=" hide";
}
</script>
京东狗（this）
<meta charset="UTF-8">
<title>Title</title>
<script>
//window.onload页面加载完毕
window.function () {
var img=document.getElementById("box");
/* img.function () {
img.src="jd2.jpg";
}
img.function () {
img.src="jd1.jpg";
}*/
img.fn1;
img.fn2;
function fn1() {
img.src="jd2.jpg";
}
function fn2() {
img.src="jd1.jpg";
}
}
</script>
<img id="box" src="jd2.jpg" style="cursor: pointer;border: 1px solid #cccccc">
京东手机（前两个结合）作业
8.DOM解析过程
HTMl加载完毕后，渲染引擎会在内存中把HTMl文档生成一个DOM树，getElementBYId是获取DOM上的元素，然后操作的时候是修改的是该元素的属性
9.获取节点
3.1父节点（parentNode）
3.2兄弟节点（兄弟：sibling 下一个：next 前一个：previous）
Nextsibling调用者是节点ie678中指下一个元素节点（标签）
而在火狐谷歌IE9之后都是指的下一个节点（包括空文档和换行）
Nextelementsibling在火狐谷歌IE9之后都是指的下一个元素节点
总结：在IE678中用nextsubling，在火狐谷歌IE9之后用Nextelementsibling
3.3所有子节点（childNodes）
childNodes它返回指定元素的子元素集合，包括HTMl节点，所有属性文本节点。
nodeType=1时才是元素节点（标签）=2时表示属性节点=3时表示文本节点
子节点数组=父节点.childNodes；获取所有节点
子节点数组=父节点.children；
10.节点操作
4.1创建节点document.createElement();
var aaa=document.createElement("li");
4.2插入节点appendChild（insertBefore）
var box1=document.getElementById("box");
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa);
4.3删除节点removeChild
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);
4.4复制节点oldNode.cloneNode（true）
var ccc=box1.cloneNode();
var ddd=box1.cloneNode(true);//深沉复制
4.5节点属性
var elenode=document.getElementsByTagName("img")[0];
1.元素节点.属性或者元素节点【属性】
console.log(elenode.src);
console.log(elenode["title"]);
2.元素节点.方法（）
console.log(elenode.getAttribute("id"));
elenode.setAttribute("id","aaa");
elenode.removeAttribute("id");
10.Value和innerHTMl和innerText
老版本火狐不支持innerText，IE678不支持textContent
P不能嵌套P，h1不能嵌套H1，a连接内部不能嵌套a连接