Web APIs——节点操作

news2024/11/30 0:30:54

1、DOM节点

DOM节点：DOM树里每一个内容都称之为节点

节点类型：

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

2、查找节点

关闭二维码案例：

点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

思考：

关闭按钮和 erweima 是什么关系呢？
父子关系
所以，可以点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了

节点关系：针对的找亲戚返回的都是对象

父节点
子节点
兄弟节点

2.1 父节点查找

parentNode属性

返回最近一级的父节点找不到返回为null
子元素.parentNode

<body>
    <div class="yeye">
        <div class="dad">
            <div class="baby">x</div>
        </div>
    </div>
    <script>
        const baby = document.querySelector('.baby')
        console.log(baby)  // 返回dom对象
        console.log(baby.parentNode)  // 返回dom对象
        console.log(baby.parentNode.parentNode) // 返回dom对象
    </script>
</body>

2.1.1 案例关闭二维码案例

<!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>
  <style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .box1 {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    // // 1. 获取事件源
    // const box1 = document.querySelector('.box1')
    // // 2. 事件侦听
    // box1.addEventListener('click', function () {
    //   this.parentNode.style.display = 'none'
    // })

    // 1. 获取三个关闭按钮
    const closeBtn = document.querySelectorAll('.box1')
    for (let i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener('click', function () {
        // 关闭我的爸爸 所以只关闭当前的父元素
        this.parentNode.style.display = 'none'
      })
    }
  </script>
</body>

</html>

2.2 子节点查找

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

<body>
    <ul>
        <p>第一个段落</p>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const ul = document.querySelector('ul') // ul
        console.log(ul.children) // 得到伪数组  选择的是 亲儿子
    </script>
</body>

2.3 兄弟节点的查找

1.下一个兄弟节点

nextElementSibling属性

2.上一个兄弟节点

previousElementSibling属性

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const li2 = document.querySelector('ul li:nth-child(2)')
        console.log(li2.previousElementSibling) // 上一个兄弟
        console.log(li2.nextElementSibling) // 下一个兄弟
    </script>
</body>

3、增加节点

很多情况下，需要在页面中增加元素

比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

创建一个新的节点
把创建的节点放入到指定的元素内部

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点
把复制的节点放入到指定的元素内部

3.1 创建节点

即创造出一个新的网页元素，在添加到网页内，一般先创建节点，然后插入节点

创建元素节点方法：

    <script>
        const div = document.createElement('div')
        console.log(div)
    </script>

3.2 追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素：

<body>
    <ul>我是老大</ul>
    <script>
        // 1. 创建节点
        const ul = document.querySelector('ul')
        const li = document.createElement('li')
        li.innerHTML = '我是li'
        // 2. 追加节点，作为最后一个子元素
        ul.appendChild(li)
    </script>
</body>

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

<body>
    <ul>
        <li>我是老大</li>
    </ul>
    <script>
        // 1. 创建节点
        const ul = document.querySelector('ul')
        const li = document.createElement('li')
        li.innerHTML = '我是li'
       
        // 2. 追加节点，插入到父元素中某个子元素的前面
        ul.insertBefore(li,ul.children[0])
    </script>
</body>

3.3 练习学车在线案例渲染

分析：

①：准备好空的ul结构

②：根据数据的个数，创建一个新的空li

③：li里面添加内容img标题等

④：追加给ul

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学车在线首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">

            </ul>
        </div>
    </div>
    <script>
        // 1. 重构  
        let data = [
            {
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: 'images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]
        const ul = document.querySelector('.box-bd ul')
        // 1. 根据数据的个数，创建 对应的小li
        for (let i = 0; i < data.length; i++) {
            // 2. 创建新的小li
            const li = document.createElement('li')
            // 把内容给li
            li.innerHTML = `
                <a href="#">
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </a>
            `
            // 3. ul追加小li
            ul.appendChild(li)
        }
    </script>
</body>

</html>

3.4 克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        //1. 克隆节点
        // const li1 = ul.children[0].cloneNode(true)
        // console.log(li1)
        // 2. 追加
        // ul.appendChild(li1)
        ul.appendChild(ul.children[0].cloneNode(true))
    </script>
</body>