WebAPIs学习---DOM节点

小杨爱编程

已于 2022-06-28 22:32:09 修改

阅读量182

点赞数 1

分类专栏： JavaScript学习文章标签： javascript

于 2022-06-28 22:30:47 首次发布

本文链接：https://blog.csdn.net/Yajyaj123/article/details/125508228

版权

JavaScript学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、DOM节点

DOM节点：

DOM树里的每一个节点称为DOM节点。

节点类型：

元素节点
- 所有的标签比如 body、div
- html是根节点
属性节点
- 所有的属性比如href、src
文本节点
- 所有的文本
其他

二、节点操作

1，查找节点

父节点查找
- parentNode属性
- 返回最近一级父节点，找不到返回null
- 子元素.parentNode
子节点查找
- childNodes：获取所有子节点、包括文本节点（空格、换行）、注释节点等
- children（重点）：
  - 仅获得所有元素节点
  - 返回到还是个伪数组（有length属性，没有pop和push等方法）
- 语法:父元素.children
兄弟节点查找
- 下一个兄弟节点：nextElementSibling属性
- 上一个兄弟节点：previousElementSibling属性

实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <ul>
            <li></li>
            <li class="two"></li>
            <li class="three"></li>
        </ul>
    </div>
    <script>
        // 获取ul父节点
        let div = document.querySelector('ul').parentNode
        console.log(div);
        //   获取ul的子节点
        let lis = document.querySelector('ul').children
        console.log(lis);
        // 查找class为two的兄弟节点
        let previousLi = document.querySelector('.two').previousElementSibling
        console.log(previousLi);
        let nextLi = document.querySelector('.two').nextElementSibling
        console.log(nextLi); 
    </script>
</body>

</html>

2，追加节点

1.创建节点
- 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
- 创建元素节点方法:

document.createElement('标签名')

2.追加节点
- 要想在界面看到，还得插入到某个父元素中
- 插入到父元素的最后一个子元素：

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素,在哪个元素前面)

3.增加节点

在特殊的情况下，我们新增节点，按照如下操作
- 复制一个原有的节点
- 把复制的节点放入到指定的元素内部
克隆节点
- 元素.cloneNode(布尔值)
- cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
  - 若为true，则代表克隆时包含后代节点一起克隆
  - 若为false，则代表克隆时不包含后代节点
  - 默认为false
  - 克隆出的节点追加和上边追加一样

代码演示克隆节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>小li</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        // 克隆节点，false不克隆子节点，默认为false
        let newUl = ul.cloneNode(false)
        console.log('false，默认时克隆不带后代的节点',newUl);
        // 克隆节点，包含子节点，true
        let newUl1 = ul.cloneNode(true)
        console.log('true，克隆带后代的节点',newUl1);
    </script>
</body>

</html>