背景介绍：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>
1836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
