DOM节点的获取和操作
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；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
width:100px;
height: 100px;
margin: 5px;
list-style: none;
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li class="box1"></li>
<li id="box2">
<div>1</div>
<div>2</div>
</li>
<li class="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
</ul>
<script>
//父节点
var box2=document.getElementById("box2");
box2.parentNode.style.backgroundColor="green";
//兄弟节点(前一个和后一个)previous next
/* box2.previousElementSibling.style.backgroundColor="red";
box2.nextElementSibling.style.backgroundColor="yellow";*/
var next=box2.nextElementSibling||box2.nextSibling;
var pre=box2.previousElementSibling||box2.previousSibling;
pre.style.backgroundColor="red";
next.style.backgroundColor="yellow";
//单个子元素
var first=box2.parentNode.firstElementChild||box2.parentNode.firstChild;
var last=box2.parentNode.lastElementChild||box2.parentNode.lastChild;
first.style.backgroundColor="orange";
last.style.backgroundColor="brown";
//所有子元素
var arr=box2.parentNode.children;
for(var i=0;i<arr,length;i++){
arr[i].style.backgroundColor="red";
}
console.log(box2.parentNode.childNodes);
</script>
</body>
</html>
10.节点操作
节点的访问关系都是属性，节点的操作时函数或者方法
1.创建节点document.createElement();
var aaa=document.createElement("li");
2.插入节点appendChild（insertBefore）
var box1=document.getElementById("box");
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa);
3.删除节点removeChild
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);
4.复制节点oldNode.cloneNode（true）
var ccc=box1.cloneNode();
var ddd=box1.cloneNode(true);//深沉复制
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");
11.Value和innerHTMl和innerText
老版本火狐不支持innerText，IE678不支持textContent
P不能嵌套P，h1不能嵌套H1，a连接内部不能嵌套a连接
12 nodeType和nodeName和nodeValue
nodeType=1（元素节点）nodeType=2（属性节点）
nodeType=3（文本节点）
nodeName=div（元素节点）nodeName=id（属性节点）
nodeName=#text（文本节点）
nodeValue=null（元素节点）nodeValue=box（属性节点）
nodeValue=值（文本节点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">你好</div>
<script>
var div=document.getElementById("box");//元素节点
var att=div.getAttributeNode("id");//属性节点
var text=div.firstChild;//文本节点
//nodeType
console.log(div.nodeType);//1元素节点
console.log(att.nodeType);//2属性节点
console.log(text.nodeType);//3文本节点
//nodeName
console.log(div.nodeName);
console.log(att.nodeName);
console.log(text.nodeName);
//nodeValue
console.log(div.nodeValue);
console.log(att.nodeValue);
console.log(text.nodeValue);
</script>
</body>
</html>