标签：版本 javascrip style htm input asc http put 单选按钮
一、查找元素：
1.getElementById()：接收一个参数：要取得的元素的 ID。如果找到相应的元素则返回该元素，如果不存在带有相应 ID 的元素，则返回 null。严格匹配，包括大小写。
IE7 及较低版本还为此方法添加了一个有意思的“怪癖”： name 特性与给定 ID 匹配的表单元素（<input>、<textarea>、 <button>及<select>）也会被该方法返回。如果有哪个表单元素的 name 特性等于指定的 ID，而且该元素在文档中位于带有给定 ID 的元素前面，那么 IE 就会返回那个表单元素。
2.getElementsByTagName()。这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的 NodeList。
3.getElementsByName()。顾名思义，这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()方法的情况是取得单选按钮。
二、查找元素直接点：
1.元素.childNodes : 只读 属性 子节点列表集合，包含文本和元素类型的节点。
2.元素.children：只读 属性 子节点列表集合，只包含元素类型节点。
3.元素.nodeType : 只读 属性 当前元素的节点类型
元素节点:1
属性节点:2
文本节点:3
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子节点</title>
<script>
window.onload = function() {
var oDiv = document.getElementById(‘div1‘);
var len = oDiv.childNodes.length;
alert(len); //ie8 -- 1; ie9~ie11 -- 3,包含span前后换行
/*找出当前元素只包含同样还是元素的子节点的两种方法*/
for(var i=0; i<len; i++){
if(oDiv.childNodes[i].nodeType == 1){
console.log(oDiv.childNodes[i]); //<span></span>
}
}
alert(oDiv.children.length);//ie8~ie11 -- 1
}
</script>
</head>
<body>
<div id="div1">
<span></span>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子节点</title>
<script>
window.onload = function() {
var oDiv = document.getElementById(‘div1‘);
var len = oDiv.childNodes.length;
alert(len); //ie8 -- 2,包含注释和span; ie9~ie11 -- 5,包含注释,换行和span
/*找出当前元素只包含同样还是元素的子节点的两种方法*/
for(var i=0; i<len; i++){
if(oDiv.childNodes[i].nodeType == 1){
console.log(oDiv.childNodes[i]); //<span></span>
}
}
alert(oDiv.children.length);//ie8 -- 2,包含注释和span; ie9~ie11 -- 1,只包含span
}
</script>
</head>
<body>
<div id="div1">
<!-- 嘿嘿 -->
<span></span>
</div>
</body>
</html>
总结：IE8中children 和childNodes属性表现一样，包含注释节点和元素节点。但 IE9 之后的版本children只返回元素节点,childNodes返回注释，空白，和元素节点。
javascript中的子节点查找，childNodes和children
标签：版本 javascrip style htm input asc http put 单选按钮
原文地址：http://www.cnblogs.com/jimmy-lin/p/6072123.html
