關(guān)于javascript獲取table下的子節(jié)點(diǎn)出現(xiàn)的問題
下面是在百度上看到一位网友和我遇到同样的问题这是他发表的，我来借用记录一下。
注：并非原创（只是记录一下）
原网页：http://blog.csdn.net/qq_27939357/article/details/45580651?locationNum=2&fps=1
最近在慕课网上学习js，一路都很顺畅，今天学到获取子节点这里，遇到了一点小问题；
转自慕课网javascript进阶篇9-22节的其他同学的源代码如下实现的效果就是鼠标经过表的每一行时候每一行的背景色改变；其他学都是跟tag那么获取所有的行（tr）
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
var trnode=document.getElementsByTagName("tr");
for (i=0; i<trnode.length;i++){
trnode[i].onmouseover=function(){
this.style.background="#f00";
}
trnode[i].onmouseout=function(){
this.style.background="#fff";
}
}}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
我看到的第一反应是先根据id=table获取这张表，然后取出这张表的子节点（包含表开始的空白（也就是text）和所有的tr），照说思路没问题；
我最开始这么写的：
window.onload = function(){
var child=document.getElementById("table").childNodes;
for(var i=0;i<child.length;i++)
{
child[i].onmouseover=function(){
this.style.backgroundColor="gray";
}
child[i].onmouseout=function(){
this.style.backgroundColor="white";
};
} }
知道发生了什么吗，鼠标放上去所有行背景色都变了，汗；当然马上找原因呀；
然后我就吧中间的for循环里面的内容改了一下，输出所有的子节点的相关信息包括类型和名称，结果是这样的
这个结果我一看愣了一下，恍然大悟：于是去测验了下：
var child=document.getElementById("table").childNodes[1].childNodes;
for(var i=0;i<child.length;i++)
if(child[i].nodeType==1)
{
document.write("节点类型："+child[i].nodeType+"节点名称："+child[i].nodeName+"<br/>");
};
}然后输出就对了:当然多了一步过滤掉text文本（1表示类型是文本，这个表中的空白部分），剩下的就是tr了
所以可以知道table表的直接子元素是tbody和文本（当然如果table表中存在空白的话就多了一个直接子元素）
而tbody中才包含了所有的tr行截图如下恩；
所以做到这里我才明白其他同学为什么会采取用TagName获取tr的方法唉，走了不少弯路，费了一下午来搞清楚这个问题恩
其实这个tbody我应该想到的，之前学基础课程的时候不仔细忘了有他只知道放进去table表中放了tbody标签会一口气加载完表才显示，这次对tbody的认识又深了一点嘿嘿
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
