Web APIs笔记03——DOM-节点操作

最新推荐文章于 2023-12-27 07:45:00 发布

visionchyw

最新推荐文章于 2023-12-27 07:45:00 发布

阅读量128

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/visionchyw/article/details/125499484

版权

节点操作

DOM 节点

DOM节点：DOM树里每一个内容都称之为节点
节点类型
➢元素节点
所有的标签比如body、div
html是根节点
➢属性节点
所有的属性比如href
➢文本节点
所有的文本
➢其他

查找节点

父节点查找

parentNode 属性
返回最近一级的父节点找不到返回为null
语法：子无素. parentNode

<body>
    <div class="father" style="display: none;">
        <div class="son">儿子</div>
    </div>
    <script>
        let son = document.querySelector('.son')
        // 找爸爸
        // console.log(son.parentNode)
        son.parentNode.style.display = 'none'
    </script>
</body>

子节点查找

childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等
children （重点）：仅获得所有元素节点；返回的还是一个伪数组
语法：父元素.children

<body>
    <button>点击</button>
    <ul>
        <li style="color: green;">我是孩纸</li>
        <li>我是孩纸</li>
        <li>我是孩纸</li>
        <li>我是孩纸</li>
        <li>我是孩纸</li>
        <li>我是孩纸