背景介绍:IE8.0及其以下版本的浏览器会忽略节点间的空白节点(空格、回车和Tab键),遵循W3C规范的浏览器(Chrome、FireFox、Safari等)则会把这些空白作为文本节点处理。(测试浏览器版本均超过IE8.0)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>object超类的"三个子类"</title>
</head>
<body>
<div id="demo1">
<div>子节点11</div>
<div class="test">子节点12</div>
<div>子节点13</div>
</div>
<div id="demo2"><div>子节点21</div><div>子节点22</div><div>子节点23</div></div>
<button οnclick="myFunction()">点我</button>
<script type="text/javascript">
function myFunction() {
/*
*此时注意,x是object HTMLCollection(Object) x[0]是object HTMLDivElement[因为x会被当成数组对象处理,而ById是唯一不会出现此类情况]
*前者属于js对象,后者属于dom对象,但是二者同时可以执行element相关操作
*/
var x = document.getElementsByClassName("test");
alert(x);
}
//此时是object text
document.getElementById("demo1").οnclick=function(){
alert(
"第一个子节点:"+this.firstChild.innerHTML+"\n"+
"第一个子节点的类型是:"+this.firstChild.nodeType+"\n"+
"第一个子节点的名称是:"+this.firstChild.nodeName
);
}
//此时是object HTMLDivElement
document.getElementById("demo2").οnclick=function(){
alert(
"第一个子节点:"+this.firstChild.innerHTML+"\n"+
"第一个子节点的类型是:"+this.firstChild.nodeType+"\n"+
"第一个子节点的名称是:"+this.firstChild.nodeName
);
}
</script>
</body>
</html>