DOM：（document object model）文档对象模型，主要用来操作网页
DOM节点包含四个节点：
- 文档节点：整个HTML文档
- 元素节点：HTML标签
- 属性节点：元素属性
- 文本节点：HTML文本内容
| 节点属性 | nodeName | nodeType | nodeValue | | --- | --- || --- | --- | | 文档节点| document| 9| null| | 元素节点| 标签名 | 1| null| | 属性节点|属性名 | 2| 属性值| | 文本节点| text | 3| 文本内容|
ps：所有的节点都有以上三个属性
通过document对象调用：
- getElementById():获取id属性下的一个元素节点对象
- getElementsByTagName()：通过标签名获取一组元素节点对象
- getElementsByname()通过name获取一组元素节点对象
获取元素节点的子节点：
- getElementsByTagName()：方法，返回当前节点的指定标签名后代节点
- childNode：属性，表示当前节点的所有子节点
- firstChild：属性，表示当前节点的第一个子节点（包含空白文本）
- lastChild:属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点：
- parentNode：属性，当前节点的父节点
- previousSibling：属性，当前节点的前一个兄弟节点
- nextSibling：属性，当前节点的后一个兄弟节点
<script>
// 创建一个函数，专门为指定元素绑定单击事件
// idStr 绑定单击响应函数的对象的ID属性值
// fun 表示事件回调函数，当单击元素，该函数将慧触发
function MyClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
alert(bj.innerHTML);
};
// 为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
// 使用getElementsByTagName获取li一组元素
// 这个方法返回一个类数组对象，所有查询到的元素都会封装到对象中
// 即使只有一个元素，也返回数组
var lis = document.getElementsByTagName("li");
// 遍历lis
for(var i=0; i<lis.length; i++){
alert(lis[i].innerHTML);
}
};
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
var inputs = document.getElementsByName("gender");
// alert(inputs.length);
// innerHTML用来获取元素内部HTML代码，对于自结束标签，该属性没有意义
// 如果需要读取元素的属性，直接使用元素.属性名,除了class属性，该属性使用元素.className形式
for(var i=0; i<inputs.length; i++){
alert(inputs[i].value);
}
};
// 查找#city下所有li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
var citys = document.getElementById("city");
var lis = citys.getElementsByTagName("li");
for(var i=0; i < lis.length; i++){
alert(lis[i].innerHTML);
}
};
// 返回#city的所有子节点
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
var cis = document.getElementById("city");
var cityChild = cis.childNodes
/*childNode属性会获取包括文本节点在内的所有节点，DOM标签与标签间的空白也会当成文本节点，
注意，在IE8及以下，不会将空白文本当成子节点
*/
//children属性可以获取当前元素的所有子元素
var cityChild2 = cis.children;
alert(cityChild2.length);
};
// 返回#phone的第一个子节点
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
var phone = document.getElementById("phone");
// firstChild获取当前元素的子节点，包括空白文本
var fChild = phone.firstChild;
var fChild2 = phone.firstElementChild;//不适用于IE8 及以下版本
alert(fChild2);
};
// 返回#bj的父节点
MyClick("btn07",function(){
var bj = document.getElementById("bj");
var bjParent = bj.parentNode;
// innerText该属性可以获取内部的文本内容，与innerHTML的区别是它会自动将html标签去除
var bjParent2 = bj.parentNode;
alert(bjParent2.innerText);
});
// 返回#android的前一个兄弟节点
MyClick("btn08",function(){
var andro = document.getElementById("android");
// previousSibling当前节点的前一个兄弟节点
var andrPrev = andro.previousSibling;
// previousElementSibling获取当前节点的前一个兄弟元素，不适用于IE8及以下的浏览器
var andrPrev2 = andro.previousElementSibling;
alert(andrPrev2.innerHTML);
});
// 返回#username的value属性值
MyClick("btn09",function(){
var um = document.getElementById("username");
alert(um.value);
});
// 设置#username的value属性值
MyClick("btn10",function(){
var umv = document.getElementById("username");
umv.value = "hello";
alert(umv.value);
});
// 返回#bj的文本值（三种方式获取）
MyClick("btn11",function(){
var bjVlaue = document.getElementById("bj");
// alert(bj.innerText);
// 获取bj的文本节点
var bc = bjVlaue.firstChild;
alert(bc.nodeValue);
// alert(bjVlaue.firstChild.nodeValue);
});
</script>
