1.通过document对象调用
-getElementById():通过id属性获取一个元素节点对象
-getElementsByTagName():通过标签名获取一组元素节点对象(数组)
-getElementsByName():通过name属性获取一组元素节点对象(数组)
获取元素节点的子节点
2.通过具体的元素节点调用
-getElementByTagName():-方法,返回当前节点的指定标签名后代节点
-childNodes:-属性,表示当前节点的所有子节点
-firstChild:-属性,表示当前节点的第一个子节点
-lastChild:-属性,表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
-parentNode:-属性,表示当前节点的父节点
-previousSibling:-属性,表示当前节点的第一个兄弟节点
-nextSibling:-属性,表示当前节点的后一个兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
获取元素节点
1.getElementById():通过id属性获取一个元素节点对象
2.getElementByTagName():通过标签名获取一组元素节点对象
3.getElementByName():通过name属性获取一组元素节点对象
-->
<div id="total">
<div class="inner">
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="dj">东京</li>
<li id="sr">首尔</li>
</ul>
<br>
<br>
<p>你喜欢那款单机游戏</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>首尔</li>
</ul>
<br/>
<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="femail">Femail
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde">
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">查找#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
<script>
/*定义一个函数,专门用来为指定元素绑定单击响应函数
参数:
idStr 要绑定单击响应函数的对象的id属性值
fun 事件的回调函数,当单击元素时,该函数将会被触发
*/
function MyClick(isStr,fun){
var btn=document.getElementById(isStr);
btn.onclick=fun
}
//为id为btn01的按钮绑定一个单击响应函数
var btn01=document.getElementById("btn01");
//单击响应函数
btn01.onclick=function (){
//查找#bj节点
var bj=document.getElementById('bj');
//innerHtml 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML)
}
//为id为btn02的按钮绑定一个单击响应函数
var btn02=document.getElementById('btn02')
btn02.onclick=function (){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象,所有查询的元素都会封装到对象中
var lis=document.getElementsByTagName('li');
alert(lis.length)//打印11
//变量this
for(var i=0;i<lis.length;i++)
{
alert(lis[i].innerHTML)//打印出所有li里面的内容
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn03=document.getElementById('btn03')
btn03.onclick=function (){
//查找name=gender的所有节点
var inputs=document.getElementsByName("gender");
alert(inputs.length)//打印2
for(var i=0;i<inputs.length;i++)
{
/*
innerHTML用于获取元素内部的html代码的
*/
// alert(inputs[i].innerHTML)不行,打印不出来为空白
/*
如果需要读取元素节点属性
直接使用元素,属性名
*/
alert(inputs[i].value)//打印male和female
alert(inputs[i].name)//打印gender,gender
}
}
//查找#city下所有li节点
var btn04=document.getElementById("btn04");
btn04.onclick=function (){
//获取id为city的元素
var city=document.getElementById("city");
//查找#city下所有li节点
var lis= city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
var result=lis[i].innerHTML
alert(result)
}
}
//返回#city的所有子节点
/*
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签标签中空白也会当成文本节点
*/
var btn05=document.getElementById("btn05");
btn05.onclick=function (){
var city=document.getElementById("city");
// var cns=city.childNodes;
// alert(cns.length)
// for(var i=0;i<cns.length;i++)
// {
// alert(cns[i].innerHTML)
// }
/*
children属性可以获取当前元素的所有子元素
*/
var cns2=city.children;
alert(cns2.length)
}
//返回#phone的第一个子节点
var btn06=document.getElementById("btn06")
btn06.onclick=function (){
var phone=document.getElementById("phone");
//firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
var fir=phone.firstChild;
alert(fir)
//firstElementChild获取当前元素的第一个子元素
}
//查找#bj的父节点
//为id为btn07的按钮绑定一个单击响应函数
MyClick("btn07",function (){
//获取id为bj的节点
var bj=document.getElementById("bj")
var p=bj.parentNode;
alert(p.innerHTML)
})
//返回#android的前一个兄弟节点
MyClick("btn08",function (){
var android=document.getElementById("android");
var a=android.previousSibling;
alert(a.innerText)
})
//返回#username的value属性值
MyClick("btn09",function (){
var username=document.getElementById("username")
alert(username.value)
})
//设置#username的value属性值
MyClick("btn10",function (){
var username=document.getElementById("username")
alert(username.value="asdsdsc")
})
//返回#bj的文本值
MyClick("btn11",function (){
var bj=document.getElementById("bj");
alert(bj.innerText)
})
</script>
</body>
</html>
在document中有一个属性body,它保存的是body的引用 document.documentElement保存的是html根标签 document.all代表页面中所有的元素 document.querySelector() -需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象 -虽然ie8中没有getElementByClassName()但是可以使用querySelector()代替 -该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个 document.querySelectorAll() -该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回 -即使符合条件的元素只有一个,它也会返回数组
<div class="box1">
<div>我是box1</div>
<div></div>
</div>
<script>
//在document中有一个属性body,它保存的是body的引用
var body=document.body;
/*
document.documentElement保存的是html根标签
*/
var html=document.documentElement
/*
document.all代表页面中所有的元素
*/
var all=document.all
console.log(all.length)
/*
获取页面中所有的div
*/
var divs=document.getElementsByTagName("div")
//获取class为box1中所有的div
/*.box1 div
document.querySelector()
-需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
-虽然ie8中没有getElementByClassName()但是可以使用querySelector()代替
-该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
*/
var div=document.querySelector(".box1 div")
/*
document.querySelectorAll()
-该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
-即使符合条件的元素只有一个,它也会返回数组
*/
box1=document.querySelectorAll(".box1")
</script>