js_子节点与父节点

最新推荐文章于 2023-03-24 18:47:39 发布

leigangg

最新推荐文章于 2023-03-24 18:47:39 发布

阅读量428

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/leigangg/article/details/105280066

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

子节点_children

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>
        // children 查看自己的子节点
        var ul = document.getElementById('ul');
        for(var i = 0;i < ul.children.length;i++){
            ul.children[i].style.background = 'red';
        }
        alert(ul.children.length);
    </script>
</body>
</html>

父节点_parentNode

parentNode这个插入方式,是在最后插入的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li><a href="#">隐藏1</a></li>
        <li><a href="#">隐藏2</a></li>
        <li><a href="#">隐藏3</a></li>
        <li><a href="#">隐藏3</a></li>
        <li><a href="#">隐藏3</a></li>
        <li><a href="#">隐藏3</a></li>
        <li><a href="#">隐藏3</a></li>
        <li><a href="#">隐藏3</a></li>
        <li><a href="#">隐藏3</a></li>
        <li><a href="#">隐藏3</a></li>
    </ul>

    <script>
        var y = 1;
        var aA = document.getElementsByTagName('a');
        for(var i = 0; i < aA.length; i++){
            aA[i].onclick = function(){
                this.parentNode.style.display = 'none';
                console.log('事件触发'+ y++ +'次');
            }
        }
        
        
    </script>
</body>
</html>

父节点_insertBefore

insertBefore这个插入方式是可以选择插入位置的,格式是insertBefore(需要插入的子节点,在谁之前).这种方式存在兼容问题IE7不支持需要用if解决兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="btn1">
    <input type="button" value="按钮" id="btn2">
    <ul id="ul">
    </ul>

    <script>
        var ul = document.getElementById('ul');
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var ali = ul.getElementsByTagName('li');


        btn2.onclick = function(){
            var li = document.createElement('li');
            li.innerHTML = btn1.value;
            // 在父级里面appendChild一个子元素li
            ul.insertBefore(li,ali[0]);
            
        }
    </script>
</body>
</html>

leigangg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js_子节点与父节点

子节点_children<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
复制链接

扫一扫