一、DOM获取元素节点的子节点
1、getElementsByTagName()
返回当前节点的指定标签名子节点
2、childNodes
表示当前节点的所有子节点
3、firstChild
表示当前节点的第一个子节点
4、lastChild
表示当前节点的最后一个子节点
<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" />
<script type="text/javascript">
function myQuery(idStr,func){
var btn=document.getElementById(idStr);
btn.onclick=func;
}
window.onload=function(){
var cityEle= document.getElementById("city");
//1.查找#bj节点
/* var btnEle=document.getElementById("btn01");
btnEle.onclick=function(){
var liEle=document.getElementById("bj");
alert(liEle.innerHTML);
} */
myQuery("btn01",function(){
var bjEle=document.getElementById("bj");
alert(bjEle.innerHTML);
});
//2.查找所有li节点
/* var btn=document.getElementById("btn02");
btn.onclick=function(){
var liEles=document.getElementsByTagName("li");
for(var i=0;i<liEles.length;i++){
alert(liEles[i].innerHTML);
}
}; */
myQuery("btn02",function(){
var liEles=document.getElementsByTagName("li");
for(var i=0;i<liEles.length;i++){
alert(liEles[i].innerHTML);
}
});
//3.查找name=gender的所有节点
/* var btn=document.getElementById("btn03");
btn.onclick=function(){
var liEles=document.getElementsByName("gender");
for(var i=0;i<liEles.length;i++){
alert(liEles[i].value);
}
}; */
myQuery("btn03",function(){
var liEles=document.getElementsByName("gender");
for(var i=0;i<liEles.length;i++){
alert(liEles[i].value);
}
});
//4.查找#city下所有li节点
myQuery("btn04",function(){
var liEles=cityEle.getElementsByTagName("li");
for(var i=0;i<liEles.length;i++){
alert(liEles[i].innerHTML);
}
});
//5.返回#city的所有子节点
myQuery("btn05",function(){
var Eles=cityEle.childNodes;
for(var i=0;i<Eles.length;i++){
if(Eles[i].nodeType == 1){
alert(Eles[i].innerHTML);
}
}
});
//6.返回#phone的第一个子节点
myQuery("btn06",function(){
var phoneEle=document.getElementById("phone");
var Eles1=phoneEle.firstChild;
alert(Eles1.innerHTML);
});
//7.返回#bj的父节点
myQuery("btn07",function(){
var bEle=document.getElementById("bj")
var Eles2=bEle.parentNode;
alert(Eles2.innerHTML);
});
//8.返回#android的前一个兄弟节点
myQuery("btn08",function(){
var bEl=document.getElementById("android");
var Eles3=bEl.previousSibling;
alert(Eles3.innerHTML);
});
//9.读取#username的value属性值
myQuery("btn09",function(){
var bEl=document.getElementById("username");
alert(bEl.value);
});
//10.设置#username的value属性值
myQuery("btn10",function(){
var bEl=document.getElementById("username");
bEl.value="3lse";
});
//11.返回#bj的文本值
//第一种方法
myQuery("btn11",function(){
var bEl=document.getElementById("bj");
alert(bEl.innnerHTML);
});
//第二种方法
myQuery("btn11",function(){
var bEl=document.getElementById("bj");
bEl.firstChild;
alert(bEl.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 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>
<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>
二、获取父节点和兄弟节点
1、parentNode
表示当前节点的父节点
2、previousSibling
表示当前节点的前一个兄弟节点
3、nextSibling
表示当前节点的后一个兄弟节点
三、元素节点的属性
其他属性
.this表示当前函数所属的对象
checkedAllBox.onclick=function(){ for(var i=0;i<items.length;i++){ //this表示当前函数所属的对象,即this=checkedAllBox items[i].checked =this.checked; } };
nodeValue文本节点
通过nodeValue的属性获取和设置文本节点的内容
innerHTML元素节点
通过该属性获取和设置标签内部的html代码
三、增、删、改
1、 创建元素节点
document.createElement(标签名)
2、 创建文本节点
document.createTextNode(文本值)
3、 添加子节点
父节点.appendChild(子节点)
4、 插入节点
父节点.insertBefore(新节点,旧节点)
5、替换节点
父节点.replaceChild(新节点,旧节点)
6、 删除节点
父节点.removeChild(子节点)
子节点.parentNode.removeChild(子节点)
7、 读写元素内部HTML代码
读取元素.innerHTML
设置元素.innerHTML = 新值