JS中获取父节点元素和子节点元素

枕梦

于 2017-07-25 22:14:05 发布

阅读量3w

点赞数 2

分类专栏： HTML5+JS 文章标签： javascript 父节点元素子节点元素

本文链接：https://blog.csdn.net/qq_37768482/article/details/76099582

版权

HTML5+JS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td id="t1">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>
<script>
    window.onload = function(){
        //找到td
        var t1 = document.getElementById('t1');
        //获取父节点元素
        var tr = t1.parentNode;
        tr.style.backgroundColor = 'yellow';
        //获取子元素节点
        var t2 = tr.firstElementChild;
        t2.innerText = '111';
        var t3 = tr.lastElementChild;
        t3.innerText = '333';
        //前一个元素节点
        var t4 = t3.previousElementSibling;
        t4.innerText = '改变了'
        //后一个元素节点
        /*var t5 = t4.nextElementSibling;
        t5.innerText = '12';*/
    }
</script>
</html>

枕梦

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS中获取父节点元素和子节点元素

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body> table> tr> td>1td> td>2td> td>3td> tr> tr>
复制链接

扫一扫

专栏目录