DOM 文档对象模型（Document Object Model）
对象的 HTML DOM 树
节点：
| nodeName | nodeType | nodeValue | |
| 文档节点：整个HTML文档 | #document | 9 | null |
| 元素节点：HTML标签 | 标签名 | 1 | null |
| 属性节点：元素的属性 | 属性名 | 2 | 属性值 |
| 文本节点：HTML标签中的文本内容 | #text |
3 | 文本内容 |
1.DOM查询
获取元素（标签） 节点：通过document调用
document.getElementById(elementId)
document.getElementsByName(elementName) //返回类似数组
document.getElementsByTagName(tagname) //返回类似数组 document.getElementByClassName("box");//根据class属性获取，不支持IE8及以下
通过css选择器获取标签：
document.querySelector()
- 需要一个选择器的字符串作为参数，可以根据一个css选择器查询一个元素节点
- IE8支持
- 返回唯一的元素，如果满足条件的有多个，只返回第一个
document.querySelectorAll();
-将符合条件的放到一个数组中
-符合条件的只有一个也返回数组例：var div=document.querySelector(".box1 div");
读取标签的属性值： 标签。属性
设置标签的属性值： 标签。属性=新属性
//获取body标签
//var body=document.getElementsByTagName("body")[0];
var body=document.body;
console.log(body);
//html根标签
var html=document.documentElement;
console.log(html);
获取元素（标签）节点的子节点：通过元素节点调用
元素节点 . getElementsByTagName(tagname) //当前节点的后代节点
元素节点.childNodes
//childNodes属性获取元素节点的所有子节点（包括文本节点，标签间的空白也会当成文本节点）
元素节点.children
//children属性获取元素的所有子元素（子标签）
元素节点 . firstChild //当前节点的第一个子节点，包括空白
元素节点 . lastChild //当前节点的最后一个子节点，包括空白
//获取元素节点
var dr=document.getElementById("drink");
//childNodes属性获取元素节点的所有子节点（包括文本节点，标签间的空白也会当成文本节点）
var cns=dr.childNodes;
alert(cns.length);
//children属性获取元素的所有子元素
var cns2=dr.children;
alert("children"+cns2.length);
获取父节点和兄弟节点：通过具体节点调用
parentNode //当前节点的父节点
previousSibling //当前节点的前一个兄弟节点，也可能获得空白文本
previousElementSibling //当前节点的前一个兄弟元素，不包括空白文本 ，IE8及以下不支持
nextSibling //当前节点的后一个兄弟节点，也可能获得空白文本
//获取到button对象
var btn=document.getElementById("btn");
//修改按钮的文字
alert(btn.innerHTML);
btn.innerHTML="I'm button";innerHTML用于获取元素内部的HTML代码，对于自结束标签没有意义。
自结束标签使用：元素.属性名 （class属性不能采用这种方式，要用：元素.className）
文档的加载顺序：
自上到下，读取一行，执行一行。
2.DOM增删改
document . createElement(" tagName " ) ; //创建元素节点对象，需要标签名做参数，返回创建好的对象
document . createTextNode(" data " ); //创建文本节点对象，需要文本内容作为参数，返回创建好的对象
父节点 . appendChild( 子节点 ); //向元素添加新的子节点，作为最后一个子节点。
父节点 . insertBefore( newChild, refChild ) ; //在指定子节点前插入新的子节点
父节点 . replaceChild( newnode,oldnode ); //用新的子节点，替换指定节点
父节点 . removeChild( oldChild )； // 删除指定节点
btn01.οnclick=function(){
//创建一个广州节点，添加到#city下
//1.创建广州节点<li>广州</li>
var li= document.createElement("li");//创建li元素节点
var gzText= document.createTextNode("广州");//创建文本节点
//2.将文本节点设置为元素节点的子节点
li.appendChild(gzText);
//3.获取#city
var city=document.getElementById("city");
//4.为#city添加子节点
city.appendChild(li);
/*利用innerHTML添加元素*/
//1.获取#city
var city=document.getElementById("city");
city.innerHTML+="<li>广州</li>";
};
/*点击超链接，删除员工信息*/
//获取超链接：
var allA=document.getElementsByTagName("a");
for(var i=0;i<allA.length;i++)
{ allA[i].οnclick=function(){
//获取超链接所在行的<tr>标签
var tr=this.parentNode.parentNode;
//删除之前的提示框
var flag=confirm("确定删除吗？");//点击确定返回true，点击取消返回false
if(flag){
//删除<tr>
tr.parentNode.removeChild(tr);
}
return false;//点击超链接后会跳转是默认行为，通过return取消默认行为
};
};
confirm（"确定删除吗？"） 弹出一个带有确认和取消按钮的提示框，需要一个字符串参数作为提示信息，
点击确认返回true，点击取消返回false
事件：用户与浏览器间的交互行为。
1.在事件的属性中设置js代码，结构和行为耦合，不方便维护
<button id="btn" οnclick="alert('点击了按钮')">我是一个按钮</button>
2. 获取到对象，添加事件，为事件绑定响应函数
<script type="text/javascript">
/*文档自上而下加载，为避免按钮还没加载，alert就执行了，
为window绑定一个onload事件，该事件在页面加载完触发，
*/
window.οnlοad=function(){
//获取到button对象
var btn=document.getElementById("btn");
//为事件绑定响应函数
btn.οnclick=function show(){
alert("谁点了按钮！");
};
}
</script><body>
<button id="btn">我是一个按钮</button>
</body>
例子：切换图片
<script type="text/javascript">
window.οnlοad=function(){
/*点击按钮，切换图片*/
//获取按钮
var prev=document.getElementById("prev");
var next=document.getElementById("next");
//要切换图片，需要得到img，设置src属性
var pic=document.getElementsByTagName("img");//得到类似数组
//创建一个数组，保存图片路径
var picArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
//变量i保存当前正在显示图片的索引
var i=0;
//显示提示信息，一共m张图片，当前是第n张
var infor=document.getElementById("infor");
infor.innerHTML="一共"+pic.length+"张图片，当前是第"+(i+1)+"张图片";
//绑定事件，响应函数
prev.οnclick=function(){
//切换到上一张，索引自减
i-=1;
if(i<0){i=picArr.length-1; }
//提示信息
infor.innerHTML="一共"+pic.length+"张图片，当前是第"+(i+1)+"张图片";
pic[0].src=picArr[i];
console.log(pic[0].src);
};
next.οnclick=function(){
//切换到下一张，索引自增
i+=1;
if(i>picArr.length-1){i=0; }
infor.innerHTML="一共"+pic.length+"张图片，当前是第"+(i+1)+"张图片";
pic[0].src=picArr[i];
console.log(pic[0].src);
};
};
</script>
<style type="text/css">
#outer{
width:500px;
height:400px;
overflow:hidden;
}
img{
width:500px;
height:400px;
}
#but{
height:100px;
margin-top:20px
}
</style>
</head>
<body>
<div id="outer">
<p id="infor"> </p>
<img alt="1" src="img/1.jpg">
<img alt="2" src="img/2.jpg">
<img alt="3" src="img/3.jpg">
<img alt="4" src="img/4.jpg">
</div>
<div id="but">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
