JavaScript节点的常用属性和方法
节点就是标签对象
<div class="inner">
<div class="divleft">
<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="inner1">
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">
</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>
innerHTML 获取起始标签到结束标签中的内容
document.getElementById("btn01").onclick = function (){
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML); //innerHTML是获取标签头到标签尾的内容
}
查找一个标签下的子标签
document.getElementById("btn04").onclick = function (){
var liObjs02 = document.getElementById("city").getElementsByTagName("li");//将city下的li节点通过查找标签名查找出来
alert(liObjs02.length);
}
childNodes 查找标签下的所有子节点
在childNodes解析时会把空格也解析成节点
document.getElementById("btn05").onclick = function(){
var citychildObjs = document.getElementById("city").childNodes;
alert(citychildObjs.length);
}
firstChlid取当前节点的第一个子节点
注意 在子标签前面的空格也会被作为节点，也就是说，如说标签前有空格 就会查找到那个空格而不是我们想要查找的那个标签
document.getElementById("btn06").onclick = function (){
var phonefirstchild = document.getElementById("phone").firstChild;
alert(phonefirstchild.innerHTML);
<ul id="phone"><li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
parentNode获取当前节点的父节点
document.getElementById("btn07").onclick = function (){
var bjparentObj = document.getElementById("bj").parentNode;
alert(bjparentObj);
}
previouSibling获取当前节点前面的节点
document.getElementById("btn08").onclick = function (){
var androidObj = document.getElementById("android").previousSibling;
alert(androidObj.innerHTML);
}
innertext只取文本内容不取标签
<head>
<meta charset="UTF-8">
<title>查找</title>
<style type="text/css">
.inner{
width: 600px;
height: 370px;
border-style: solid;
margin-left: 200px;
float: left;
}
.inner1{
width: 600px;
height: 100px;
border-style: solid;
margin-top: 50px;
}
#btnList{
margin-top: 20px;
float: left;
margin-left: 100px;
}
button{
width: 300px;
height: 30px;
margin: 5px;
}
ul li{
width: 100px;
height: 50px;
background-color: #9ad99a;
border-style: solid;
list-style-type: none;
display: inline;
font-size: 20px;
}
</style>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn01").onclick = function (){
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML); //innerHTML是获取标签头到标签尾的内容
}
document.getElementById("btn02").onclick = function (){
var liObjjs = document.getElementsByTagName("li");
alert(liObjjs.length)
}
document.getElementById("btn03").onclick = function (){
var genderObj = document.getElementsByName("gender");
alert(genderObj.length);
}
document.getElementById("btn04").onclick = function (){
var liObjs02 = document.getElementById("city").getElementsByTagName("li");//将city下的li节点通过查找标签名查找出来
alert(liObjs02.length);
}
document.getElementById("btn05").onclick = function(){
var citychildObjs = document.getElementById("city").childNodes;
alert(citychildObjs.length);
}
document.getElementById("btn06").onclick = function (){
var phonefirstchild = document.getElementById("phone").firstChild;
alert(phonefirstchild.innerHTML);
}
document.getElementById("btn07").onclick = function (){
var bjparentObj = document.getElementById("bj").parentNode;
alert(bjparentObj);
}
document.getElementById("btn08").onclick = function (){
var androidObj = document.getElementById("android").previousSibling;
alert(androidObj.innerHTML);
}
document.getElementById("btn09").onclick = function (){
var nametext = document.getElementById("username").value;
alert(nametext);
}
document.getElementById("btn10").onclick = function (){
document.getElementById("username").value = "魏子涵";
}
document.getElementById("btn11").onclick = function (){
alert(document.getElementById("bj").innerHTML);
}
}
</script>
</head>
<body>
<div class="inner">
<div class="divleft">
<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="inner1">
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">
</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>
浙公网安备 33010602011771号