获取节点(包括空节点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--dom对页面进行操作-->
<!--children-->
<!--childNodes获取节点(包括空节点)-->
<!--nodeType节点类型-->
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//IE6-8支持
var oUl=document.getElementById('ul');
// 获取节点的个数
// alert(oUl.childNodes.length);
for(var i=0;i<oUl.childNodes.length;i++){
//IE7支持
// oUl.childNodes[i].style.background="red";
// nodeType==3 -> 文本节点
//nodeType==1 ->元素节点
// alert(oUl.childNodes[i].nodeType);
// 高级浏览器支持
if (oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background="red";
}
}
第二种方法
for(var i=0;i<oUl.children.length;i++){
//只获取元素节点,任何浏览器下都支持
// alert(oUl.children.length)
oUl.children[i].style.background="red";
}
</script>
</html>
parentNode获取父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>嘻嘻嘻嘻<a href="javascript:;">隐藏</a></li>
<li>哈哈哈哈<a href="JavaScript:;">隐藏</a></li>
<li>咦咦咦咦<a href="JavaScript:;">隐藏</a></li>
<li>嘤嘤嘤嘤<a href="JavaScript:;">隐藏</a></li>
</ul>
</body>
<script>
var aA=document.getElementsByTagName('a');
for (var i=0;i<aA.length;i++ ){
aA[i].οnclick=function () {
this.parentNode.style.display="none";
};
}
</script>
</html>
offsetParent获取父级定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{width: 400px;height: 400px;background: #ccc;margin: 100px auto;position: relative;}
#div2{width: 280px;height: 280px;background: red;position: absolute;top: 60px;left: 60px;}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
<script>
var oDiv2=document.getElementById("div2");
alert(oDiv2.offsetParent);
</script>
</html>
firstChild获取第一个子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="ull">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script>
var oUl=document.getElementById("ull");
//IE6-8支持
// oUl.firstChild.style.background="red";
//高级浏览器
// oUl.firstElementChild.style.background='red';
//任何浏览器都支持
if (oUl.firstElementChild) {
oUl.firstElementChild.style.background='red';
}else{
oUl.firstChild.style.background="red";
}
</script>
</html>
setAttribute()获取元素操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt1">
<input type="button" id="btn2" value="获取">
</body>
<script>
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn2');
oBtn.οnclick=function () {
// oTxt.value='明天气温下降！';
// oTxt['value']='明天气温下降！'
oTxt.setAttribute('value','明天气温下降！');
}
</script>
</html>
className选取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="ull">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>
<script>
// 第一个参数用来决定是从哪儿父级下面选取元素
// 第二参数所需要的东西，他的class映射
function getByClass(oParent,sClass) {
var aResult=[];//空数组，可以把每一个元素推到里面
var aEle=oParent.getElementsByTagName('*');
for (var i=0;i<aEle.length;i++) {
if (aEle[i].className==sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
var oUl=document.getElementById('ull');
// var aLi=oUl.getElementsByTagName('li');
// for (var i=0;i<aLi.length;i++){
// if (aLi[i].className=='box'){
// aLi[i].style.background="red";
// }
// }
var aBox=getByClass(oUl,'box');
for (var i=0;i<aBox.length;i++){
aBox[i].style.background='red';
}
</script>
</html>
className的优势：
1.可以批量化的获取元素
2.具有选择性
3.当页面发生变化时，程序不会出错
如何用className选择元素
1.选择所有元素
2.通过className条件筛选
二.封装成函数
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
