DOM操作技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41174502/article/details/106927888

1.特殊元素的获取方式：

html元素：

document.documentElement

body元素：

document.body

head元素：

document.head

title（返回的是文本内容）：

document.title

2.获取元素的所有子元素节点（不包括后代元素）

<body>
    <div>
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </div>
    <script>
        let Oul=document.querySelector('ul');
        console.log(Oul.children);
    </script>
</body>

3.获取元素的所有子元素节点（包括后代元素）：

<body>
    <div>
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </div>
    <script>
        let Oul=document.querySelector('ul');
        console.log(Oul.getElementsByTagName('*'));
    </script>
</body>

4.获取元素的父节点：

（html结构上的父级）

<body>
    <div>
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </div>
    <script>
        let Oul=document.querySelector('ul');
        console.log(Oul.parentNode);
    </script>
</body>

（定位父级）

<body>
    <div>
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </div>
    <script>
        let Oul=document.querySelector('ul');
        console.log(Oul.offsetParent);//没有设置定位元素的默认定位父级是body
    </script>
</body>

5.获取元素的第一个/最后一个/兄弟元素节点：

<body>
    <div>
        <ul>
            <li><a href="">1</a></li>
            <li id="mid"><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </div>
    <script>
        let Oul=document.querySelector('ul');
        let Omid=document.getElementById('mid');
        console.log(Oul.firstElementChild);
        
        console.log(Oul.lastElementChild);

        console.log(Omid.nextElementSibling);
    </script>
</body>