JS之Node节点的属性、⽅法获取
JS Node节点的常见属性和⽅法使⽤ & 如何获取相应节点和值
⼀、节点的常⽤属性和⽅法
（⼀）通过具体的元素节点调⽤如下⽅法和属性
《1》getElementsByTagName()
⽅法，获取当前节点的指定标签名孩⼦节点
《2》appendChild(oNode)
⽅法给标签对象添加⼦节点。oNode是要添加的⼦节点。
《3》removeChild(oNode)
removeChild⽅法删除⼦节点。oNode是要删除的孩⼦节点
《4》cloneNode( [bCloneChildren])
cloneNode⽅法克隆⼀个对象。
《5》bCloneChildren表⽰是否需要克隆孩⼦节点
《6》getAttribute(sAttributeName)
getAttribute⽅法获取属性值。sAttributeName是要获取的属性名
（⼆）属性：
childNodes
属性，获取当前节点的所有⼦节点
firstChild
属性，获取当前节点的第⼀个⼦节点
lastChild
属性，获取当前节点的最后⼀个⼦节点
parentNode
属性，获取当前节点的⽗节点
nextSibling
属性，获取当前节点的下⼀个节点
previousSibling
属性，获取当前节点的上⼀个节点
className
⽤于获取或设置标签的class属性值
innerHTML
属性，表⽰获取/设置起始标签和结束标签中的内容
eg: Node常⽤属性和⽅法如下测试
htmlbutton属性<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>Insert title here</title>
<script type="text/javascript">
//页⾯加载完成
var divObj = ElementsByTagName("div")[0];
// 通过具体的元素节点调⽤
// getElementsByTagName()
// ⽅法，获取当前节点的指定标签名孩⼦节点
var spanObjs = ElementsByTagName("span");
// alert(spanObjs[0]);  弹 object HTMLSpanElement
//  alert(spanObjs.length); 弹出3
var h3Obj = ateElement("h3")// <h3></h3>
//  alert(h3Obj);
h3Obj.innerHTML = "我是h3标签"; // <h3>我是h3标签</h3>
// appendChild(oNode)
// ⽅法给标签对象添加⼦节点。oNode是要添加的⼦节点。
divObj.appendChild(h3Obj); // 把我创建的h3标签添加到div中
// removeChild(oNode)
// removeChild⽅法删除⼦节点。oNode是要删除的孩⼦节点
var span02Obj = ElementById("span02");
// getAttribute(sAttributeName)
// getAttribute⽅法获取属性值。sAttributeName是要获取的属性名
alert( Attribute("id") );
// cloneNode( [bCloneChildren])
// cloneNode⽅法克隆⼀个对象。bCloneChildren表⽰是否需要克隆孩⼦节点var h2Obj = ElementsByTagName("h2")[0];
//  alert(h2Obj.innerHTML);
var h2CloneObj = h2Obj.cloneNode(true); // <h2></h2>
//  alert(h2CloneObj.innerHTML);
divObj.appendChild(h2CloneObj);
}
</script>
</head>
<body>
<div>
<h1>111</h1>
<span >span1</span>
<span id="span02" >span2</span>
<span>span3</span>
<h2><a href="1">111</a></h2>
</div>
</body>
</html>
⼆、DOM对象节点查询获取对应节点和值测试
（1）如下html中引⼊了CSS限制相应的div格式CSS：此处练习CSS如何脱离html创建
@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;
}
（2）上⾯创建的css引⼊到如下的html中
<link rel="stylesheet" type="text/css" href="style/css.css" />效果如下：
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
//1.查#bj节点
//查id为bj的标签对象
var liObj = ElementById("bj");
alert(liObj.innerHTML);
}
//2.查所有li节点
var btn02Ele = ElementById("btn02");
var liObjs = ElementsByTagName("li");
for(var i=0;i<liObjs.length;i++){
alert(liObjs[i].innerHTML);
}
alert(liObjs.length);
};
//3.查name=gender的所有节点
var btn03Ele = ElementById("btn03");
alert( ElementsByName("gender").length );
};
//4.查#city下所有li节点
var btn04Ele = ElementById("btn04");
//1.先通过id属性查id属性值为city的节点
var cityObj = ElementById("city");
//2.通过city节点对象.getElementsByTagName⽅法查它的孩⼦节点
//2.通过city节点对象.getElementsByTagName⽅法查它的孩⼦节点
alert( ElementsByTagName("li").length );
};
//5.返回#city的所有⼦节点
var btn05Ele = ElementById("btn05");
//1.先通过id属性查id属性值为city的节点
var cityObj = ElementById("city");
//2.通过city节点.childNodes获取所有的孩⼦节点
alert( cityObj.childNodes.length );
};
//6.返回#phone的第⼀个⼦节点
var btn06Ele = ElementById("btn06");
//1.先获取id为phone的节点
var phoneObj = ElementById("phone");
//2.通过phone节点对象.firstChild获取第⼀个孩⼦节点
alert( phoneObj.firstChild.innerHTML );
};
//7.返回#bj的⽗节点
var btn07Ele = ElementById("btn07");
alert( ElementById("bj").parentNode.innerHTML );
};
//8.返回#android的前⼀个兄弟节点
var btn08Ele = ElementById("btn08");
alert( ElementById("android").previousSibling.innerHTML );    };
//9.读取#username的value属性值
var btn09Ele = ElementById("btn09");
//1.先获取标签对象
var usernameObj = ElementById("username");
//2.通过标签对象.value属性值获取⽂本内容
alert( usernameObj.value );
};
//10.设置#username的value属性值
var btn10Ele = ElementById("btn10");
//1.先获取标签对象
var usernameObj = ElementById("username");
//2.通过标签对象.value属性修改⽂本内容
usernameObj.value = "hello world！";
};
//11.返回#bj的⽂本值
var btn11Ele = ElementById("btn11");
//1、先获取标签对象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。