文章目录
获取元素节点
通过document对象调用
getElementById()：通过id属性获取一个元素节点对象。
getElementsByTagName()：通过标签名获取一组元素节点对象。
getElementsByName()：通过name属性获取一组元素节点对象。
获取元素节点的子节点
通过具体的元素节点调用
getElementsByTagName()：方法，返回当前节点的指定标签名后代节点。
childNodes：属性，表示当前节点的所有子节点。
firstChild：属性，表示当前节点的第一个子节点。
lastChild：属性，表示当前节点的最后一个子节点。
获取父节点和兄弟节点
通过具体的节点调用
parentNode：属性，表示当前节点的父节点
previousSibling：属性，表示当前节点的前一个兄弟节点
nextSibling：属性，表示当前节点的后一个兄弟节点
案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> -->
<style type="text/css">
@charset "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float: left;
}
#total {
width: 450px;
float: left;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
</style>
<script type="text/javascript">
/*
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* idStr：要绑定单击响应函数的对象的id属性值
* fun：事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr, fun) {
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
//alert(lis.length);
//变量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')
//alert(inputs.length);
for (var i = 0; i < inputs.length; i++) {
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签，这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className)
}
}
//为id为btn04的按钮绑定一个单击响应函数
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++) {
alert(lis[i].innerHTML)
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById('btn05')
btn05.onclick = function () {
//获取id为city的节点
var city = document.getElementById('city')
//返回#city的所有子节点
/*
* childNodes属性会获取包括文本节点在内的所有节点
* 根据DOM标签标签间空白也会当成文本节点
* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个
*/
var cns = city.childNodes
//alert(cns.length);
// for (var i = 0; i < cns.length; i++) {
// alert(cns[i]);
// }
/*
* children属性可以获取当前元素的所有子元素
*/
var cns2 = city.children
alert(cns2.length)
}
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById('btn06')
btn06.onclick = function () {
//获取id为phone的元素
var phone = document.getElementById('phone')
//返回#phone的第一个子节点
//phone.childNodes[0];
//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
var fir = phone.firstChild
//firstElementChild获取当前元素的第一个子元素
/*
* firstElementChild不支持IE8及以下的浏览器，
* 如果需要兼容他们尽量不要使用
*/
//fir = phone.firstElementChild;
alert(fir)
}
//为id为btn07的按钮绑定一个单击响应函数
myClick('btn07', function () {
//获取id为bj的节点
var bj = document.getElementById('bj')
//返回#bj的父节点
var pn = bj.parentNode
alert(pn.innerHTML)
/*
* innerText
* - 该属性可以获取到元素内部的文本内容
* - 它和innerHTML类似，不同的是它会自动将html去除
*/
//alert(pn.innerText);
})
//为id为btn08的按钮绑定一个单击响应函数
myClick('btn08', function () {
//获取id为android的元素
var and = document.getElementById('android')
//返回#android的前一个兄弟节点（也可能获取到空白的文本）
var ps = and.previousSibling
//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
//var pe = and.previousElementSibling;
alert(ps)
})
//读取#username的value属性值
myClick('btn09', function () {
//获取id为username的元素
var um = document.getElementById('username')
//读取um的value属性值
//文本框的value属性值，就是文本框中填写的内容
alert(um.value)
})
//设置#username的value属性值
myClick('btn10', function () {
//获取id为username的元素
var um = document.getElementById('username')
um.value = '今天天气真不错~~~'
})
//返回#bj的文本值
myClick('btn11', function () {
//获取id为bj的元素
var bj = document.getElementById('bj')
//alert(bj.innerHTML);
//alert(bj.innerText);
//获取bj中的文本节点
/*var fc = bj.firstChild;
alert(fc.nodeValue);*/
alert(bj.firstChild.nodeValue)
})
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</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 class="hello" type="radio" name="gender" value="male" />
Male
<input class="hello" type="radio" name="gender" value="female" />
Female
<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>
</body>
</html>
