一、背景
上篇博客简单说了DOM，DOM将HTML文档转换为对象模型，然后进行找对象以及搞对象，这篇博客主要介绍如何找对象——DOM查询
二、DOM查询的三类方法（找对象）
2.1获取元素节点
通过document对象调用
- getElementById() : 通过id属性获取一个元素节点对象
- getElementsByTagName() :通过标签名获取一组元素节点对象
- getElementsByName():通过name属性获取一组元素节点对象
2.2获取元素节点的子节点
通过具体的元素节点调用
- getElementByTagName()方法: 返回当前节点的指定标签名后代节点
- childNodes属性：表示当前节点的所有子节点chlidren属性可以获取当前元素的所有子元素
- firstChild属性 表示当前节点的第一个子节点 firstElementChild属性获取当前元素的第一个子元素
- lastChild属性 表示当前节点的最后一个字节点
2.3获取父节点和兄弟节点
通过具体节点调用
- parentNode属性,表示当前节点的父节点
- previousSibling属性,当前节点的前一个兄弟节点
- nextSibling属性,当前节点的后一个兄弟节点
三、DOM查询练习(搞对象)
所谓的搞对象：通过DOM查询查找出对象，通过对象方法属性操作对象
题目：
// 01查找#bj的节点
// 02查找所有li节点
// 03查找name=gender的节点
// 04查找#city下所有li的节点
// 05返回#city下所有子节点
// 06返回#phone的第一个子节点
// 07返回#bj的父节点
// 08返回#android的前一个兄弟节点
// 09返回#username的value属性值
// 10设置#username的value属性值
// 11返回#bj的文本值
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.total{
width:400px;
height:650px;
border:1px solid red;
}
li{
color:#20E15A;
}
</style>
<script type="text/javascript">
/*
定义一个函数,专门用来指定元素绑定单击响应函数
参数
idStr 要绑定单击响应函数的对象的id属性值
fun 事件的回调函数,当单击元素时,该函数将会被触发
*/
function myClick(idStr,fun){
//为id为btn01的按钮绑定一个单击响应函数
var btn = document.getElementById(idStr);
btn.onclick=fun;
}
window.onload=function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick=function(){
// 查找#bj的节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML,通过这个属性获取到内部的html代码
alert(bj.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn02= document.getElementById("btn02");
btn02.onclick=function(){
//查找所有li节点
//getElementsByTagName查找一组标签名
//返回一个类数组对象
//所有查询元素封装到数组中,即使一个
var lis=document.getElementsByTagName("li");
//遍历lis
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn03 =document.getElementById("btn03");
btn03.onclick=function(){
//查找name=gender的所有的节点
var inputs = document.getElementsByName("gender");
for(var i=0;i<inputs.length;i++){
/*
innerText用于获取元素内部HTML代码
对于单标签，这个属性没有意义
*/
//alert(inputs[i].innerText);
/*
使用元素.属性名读取属性
*/
alert(inputs[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick=function(){
// 04查找#city下所有li的节点
//document在整个页面所有li,ul是当前
//范围不一样
var ul = document.getElementById("city");
var ulChild =ul.getElementsByTagName("li");
for(var i=0;i<ulChild.length;i++){
alert(ulChild[i].innerHTML);
}
}
// 为btn05绑定一个单击响应事件
var btn05 = document.getElementById("btn05");
btn05.onclick=function(){
// 05返回#city下所有子节点
var ul = document.getElementById("city");
var cns = ul.childNodes;
/*
childNodes属性会获取包括文本节点在内的所有节点
根据li标签之间的空白会当成文本节点
*/
/*
children属性获取当前元
素的所有元素
元素与节点的区别
*/
var cns2=city.children;
for(var i=0;i<cns2.length;i++){
alert(cns2[i].innerHTML);
}
}
//为btn06绑定一个单击响应事件
var btn06 = document.getElementById("btn06");
btn06.onclick=function(){
// 06返回#phone的第一个子节点
var ul = document.getElementById("phone");
//firstChild获取到当前元素的第一个子节点(包括空白文本)
var firstCns = ul.firstChild;
alert(firstCns.innerHTML);
}
//为btn07绑定一个单击响应事件
//返回#bj的父节点
myClick("btn07",function(){
// 07返回#bj的父节点
//获取id为bj的节点
var bj=document.getElementById("bj");
//返回#bj的父节点
var pn =bj.parentNode;
//alert(pn.innerHTML);
/*
innerText
- 该属性可以获取元素内部文本内容
- 它和innerHTML类似,不同的是它自动将html标签去除
*/
alert(pn.innerText);
})
// 08返回#android的前一个兄弟节点
myClick("btn08",function(){
//获取节点
var and = document.getElementById("android");
var pre =and.previousSibling;
alert(pre.innerHTML);
})
// 09返回#username的value属性值
myClick("btn09",function(){
var input = document.getElementById("username");
alert(input.value);
})
// 10设置#username的value属性值
myClick("btn10",function(){
var input = document.getElementById("username");
input.value="你是好人";
})
// 11返回#bj的文本值
myClick("btn11",function(){
var bj = document.getElementById("bj");
alert(bj.innerHTML);
})
}
</script>
</head>
<body>
<div class="total">
<div class="inner">
<p>你喜欢那个城市？</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<p>你喜欢那款单机游戏？</p>
<ul>
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽世界</li>
</ul>
<br/>
<p>你手机的操作系统是？</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div><br>
<div id="btnList">
<div><button id="btn01">查找#bj的节点</button></div><br>
<div><button id="btn02">查找所有li的节点</button></div><br>
<div><button id="btn03">查找name=gender的节点</button></div><br>
<div><button id="btn04">查找#city下所有li的节点</button></div><br>
<div><button id="btn05">返回#city下所有子节点</button></div><br>
<div><button id="btn06">返回#phone的第一个子节点</button></div><br>
<div><button id="btn07">返回#bj的父节点</button></div><br>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div><br>
<div><button id="btn09">返回#username的value属性值</button></div><br>
<div><button id="btn10">设置#username的value属性值</button></div><br>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
提示：
1.第一个函数是将多个相同的代码进行抽象复用
2.元素与节点的区别看这里
3.innerHTML与innerText区别
