DOM
全称Document Object Model文档对象模型，在JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。
文档：文档表示的就是整个HTML网页文档
对象：对象表示将网页中的每一个部分都转换为了一个对象。
模型：使用模型来表示对象之间的关系，这样方便我们获得对象。
节点Node
是构成网页的最基本的组成部分，网页中的每一部分都可以称为是一个节点。
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容
节点的属性：
| nodeName | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
浏览器已经为我们提供了文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。
例：
//获取button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHTML = "我是花花";
console.log(btn);
事件
就是文档或浏览器窗口中发生的一些特定的交互瞬间。例如：点击按钮，鼠标移动等等
可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码将会执行。
<button id="btn" ondblclick="alert('你点我干嘛');">我是一个按钮</button>
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用。
可以为按钮的对应事件绑定处理函数的形式来响应事件,当事件被触发时，其对应的函数将会被调用。
例：
<script>
//获取button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHTML = "我是花花";
//可以为按钮的对应事件绑定处理函数的形式来响应事件,当事件被触发时，其对应的函数将会被调用
//绑定一个单击事件
btn.onclick = function(){
alert("别点！");
};
</script>
像这种为单击事件绑定的函数，我们称为单击响应函数。
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载,DOM对象还没有加载完毕。如果想要将script标签写在上边，可以为window绑定一个onload事件，确保JS代码是在页面加载完成之后执行，确保代码执行时所有的DOM对象已经加载完毕了。
window.onload = function(){
alert("hello");
};
获取元素节点
- 通过document对象调用
1、getElementById() 通过id属性获取一个元素节点对象
innerHTML可以获取元素内部的html代码alert(bj.innerHTML);，对于自结束标签，这个属性没有意义。
innerText该属性可以获取元素内部的文本内容，它和innerHTML类似，不同的是它会自动将html标签去除。
2、getElementsByTagName() 通过标签名获取一组元素节点对象，这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的内容只有一个，也会封装到该对象中。
遍历内容：
for (var i =0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
3、getElementsByName() 通过name属性获取一组元素节点对象，如果需要读取元素节点属性，直接使用 元素.属性名
遍历：
for (var i =0 ; i<lis.length ; i++){
alert(lis[i].type);
}
注意：class属性不能采用这种方式，读取class需要使用 元素.className
点击按钮切换图片练习：
/*点击按钮切换图片*/
//获取两个按钮
window.onload = function () {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
*切换图片就是要修改img标签的src属性
*/
//获取img标签
var img = document.getElementsByTagName("img")[0];
//创建一个数组，用来保存图片的路径
var imgArr = ["../images/sucai1.jpg","../images/sucai2.jpg","../images/sucai3.jpg","../images/sucai4.jpg","../images/sucai5.jpg"];
//创建一个变量，来保存当前正在显示图片的索引
var index = 0;
//获取id为info的p元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共 "+imgArr.length+" 页，当前第 "+(index+1)+" 张"
//分别为两个按钮绑定单击响应函数
prev.onclick = function () {
/*当切换到上一张，索引一个自减*/
index--;
//判断index是否为小于0
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
//设置提示文字
info.innerHTML = "一共 "+imgArr.length+" 页，当前第 "+(index+1)+" 张"
}
next.onclick = function () {
//要修改一个元素的属性 元素.属性=属性值
/*当切换到上一张，索引一个自增*/
index++;
if (index>imgArr.length-1){
index=0
}
img.src=imgArr[index];
//设置提示文字
info.innerHTML = "一共 "+imgArr.length+" 页，当前第 "+(index+1)+" 张"
}
}
获取元素节点的子节点
- 通过具体的元素节点调用
1、getElementsByTagName()方法，返回当前节点的指定标签名后代节点
var lis = city.getElementsByTagName("li");//获取#city下所有li节点
2、 childNodes一属性，表示当前节点的所有子节点会获取包括文本节点在内的所有节点，根据DOM标准标签间空白也会当成文本节点。
注意：在IE8及以下的浏览器中不会将空白当成子节点。
var cns = city.childNodes;
3、children一属性会获取当前元素的所有子元素
4、firstChild一属性，表示当前节点的第一个子节点，包括空白
5、firstElementChild一属性，获取当前节点的第一个子元素，不支持IE8以下浏览器
6、 lastChild一属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点
- 通过具体的节点调用
1、parentNode一属性,表示当前节点的父节点
2、 previousSibling一属性,表示当前节点的前一个兄弟节点（也可能会获取到空白文本）
3、previousElementSibling一属性,表示当前节点的前一个兄弟元素IE8及以下不支持
4、 nextSibling一属性，表示当前节点的后一个兄弟节点
例：
/*
*定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* idStr 要绑定单击响应哈拿书的对象的id属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr,fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
//调用函数
myClick("btn07",function () {
var bj = document.getElementById("");
var pn = bj.parentElement;
alert(pn.innerHTML);
})
文本框中的value属性值，就是文本框中填写的内容
读取：alert(um.value);
修改：um.value = “今天天气真不错”;
获取对象中的文本节点
var 服从 = bj.firstChild;
alert(fc.nodeValue);
在事件响应函数中，响应函数是给谁绑定的this就是谁
全选全不选练习
window.onload = function () {
/*
*全选按钮，点击按钮以后，四个多选框全部选中
*/
var checkAll = document.getElementById("checkAll");
var items = document.getElementsByName("items");
checkAll.onclick = function () {
//获取四个多选框
for (var i=0;i<items.length;i++){
items[i].checked=true;
}
checkedAllBox.checked=true;
};
var checkNo = document.getElementById("checkNo");
checkNo.onclick = function () {
//获取四个多选框
var items = document.getElementsByName("items");
for (var i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
};
/*
*反选按钮
* 点击按钮以后，选中的变成没选中，没选中的变成选中
*
*/
var checkRe = document.getElementById("checkRe");
checkRe.onclick = function () {
//获取四个多选框
var items = document.getElementsByName("items");
checkedAllBox.checked=true;
for (var i=0;i<items.length;i++){
//方式一
// if(items[i].checked){
// //证明多选框已经选中，则设置为未选中状态
// items[i].checked=false
// }else{items[i].checked=true}
//方式二
//取反
//反选需要判断多选框是否需要全部选中
items[i].checked =!items[i].checked;
if(!items[i].checked){
//一旦进入判断则证明不是全选状态
checkedAllBox.checked=false;
}
}
};
/*提交按钮
* 点击按钮以后，将所有选中的多选框弹出
*/
var send = document.getElementById("send");
send.onclick = function () {
//获取四个多选框
var items = document.getElementsByName("items");
for (var i=0;i<items.length;i++){
//判断多选框是否选中
if(items[i].checked){alert(items[i].value);}
}
};
/*
*全选、全不选的多选框，当它选中时其余的都选中，当它不选中时，其余的都不选中
*/
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
var items = document.getElementsByName("items");
for (var i=0;i<items.length;i++){
items[i].checked = checkedAllBox.checked;//checkedAllBox也可换成this
}
};
/*
*如果四个多选框全都选中，则checkedAllBox也应该选中
*如果四个多选框全都选中，则checkedAllBox不应该选中
*/
//为四个多选框分别绑定多选框
for(var i=0;i<items.length;i++){
items[i].onclick = function () {
// 判断四个多选框是否全选
//为checkedAllBox设置选中状态
checkedAllBox.checked=true;
// 只要有一个没选中就不是全选
for (var j=0;j<items.length;j++){
if(!items[j].checked){
//一旦进入判断则证明不是全选状态
checkedAllBox.checked=false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}
}
};
}
};
效果：
获取body标签
var body = document.getElementByTagName("body")[0];或
var body = document.body;
获取html标签
var html = document.documentElement;
页面中所有元素
var all = document.all;
var all = document.getElementByTagName("*");
根据元素class属性值查询一组元素节点对象,IE8即以下浏览器不支持
var box1 = document.getElementsByClassName("box1");
获取页面中所有的div
var divs = document.getElementsByTagName("div");
获取box1中的所有div
var div = document.querySelector(."box1 div");
var div = document.querySelectorAll(."box1 div");
querySelector()需要一个选择器的字符串作为参数，可以根据CSS选择器查询元素节点，也可以用该方法可以根据class属性查询，IE8及以上都能使用；使用该元素只会返回唯一的一个元素，如果满足条件有多个，那么只会返回第一个。
querySelectorAll()方法与querySelector()用法类似，不同的是它会将满足条件的元素封装到数组中返回，及时符合条件的元素只有一个。
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
