JS: lastChild innerHTML为undefined

最新推荐文章于 2024-05-17 22:04:11 发布

夏天的鼻涕怪

最新推荐文章于 2024-05-17 22:04:11 发布

阅读量757

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_42689684/article/details/88800712

js 专栏收录该内容

1 篇文章

订阅专栏

问题描述

获取节点内容失败

<script type="text/javascript">
function checks(){
 var tt=document.getElementById("myTable");
 /*查找第二行第一个单元格内容*/
 var s=tt.lastChild.innerHTML;
 alerrt(s);
 }
</script>

原因

在js中，换行符、空格这些也是文本节点。lastChild在这里获取的是就是换行符，所以是undefined.

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据层次关系查找结点</title>
    <style type="text/css">
        td{
            font-size:14px;
            width:80px;
            height:30px;
            text-align:center;
            border-bottom:1px solid #666;
            border-right:1px solid #666;
            }
        table{
            border-left:1px solid #666;
            border-top:1px solid #666;
            }
        body{text-align:center;}
        input{margin-top:5px;}
    </style>
    <script type="text/javascript">
        function checks(){
            var tt=document.getElementById("myTable");
            /*查找第二行第一个单元格内容*/
            var s=tt.lastElementChild.firstElementChild.firstElementChild.innerHTML;;
            alert(s);
            /*查找最后一行最后一个单元格内容
            var s=tt.lastChild.lastChild.lastChild.innerHTML;
            */
            /*查找最后一行第一个单元格内容
            var s=tt.lastChild.lastChild.firstChild.innerHTML;
            */
        }
        function f(){
            var t=document.getElementById("myTable");
            var ih=t.lastElementChild.firstElementChild.firstElementChild.innerHTML;
            alert(ih);
        }
    </script>
</head>
<body>
    <table id="myTable" border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <td>姓名</td>
                <td>课程</td>
                <td>成绩</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>欧阳兰</td>
                <td>语文</td>
                <td>88</td>
            </tr>
            <tr>
                <td>白杨</td>
                <td>数学</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
    <input name="btn" onclick="checks()" type="button" value="第二行第一个单元格内容">
</body>
</html>