【Web API DOM11】节点操作

一：DOM节点

1 什么是DOM节点

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

2 DOM节点分类

元素节点

属性节点：a标签的href、img标签的src等

文本节点：标签中的文字

上图为整个DOM树，每个标签、以及标签属性、文本内容构成了DOM树

二：节点查找（元素节点）

节点查找依据的是节点之间关系进行查找，查找后返回的都是对象，这与通过document.querySelector()查找返回类型是一致的

1 节点关系

父节点
1. 语法格式：子元素.parentNode
2. 只能查找最近一级的父级元素，如果没有返回null
子节点
1. 两种查找方式
  1. 父元素.childNodes（不重要）
    1. 获取的是所有元素节点、文本节点、注释节点
  2. 父元素.children(重点)
    1. 仅获得所有元素节点
    2. 返回的是伪数组
兄弟节点
1. 两种属性
  1. nextElementSibling
  2. previousElementSibling

三：增加节点

节点添加分为创建节点、追加节点两步

1 创建节点

语法格式：cosnt 变量名= document.creatElement('元素标签')

2 追加节点

在父元素末尾追加节点
1. 语法格式：父元素.appendChild(存储创造节点的变量名)
在父元素最前方追加节点
1. 语法格式：父元素.insertBefore(添加哪一个元素，放到哪个元素前面)

2 案例：渲染数据

案例中核心代码块

创建li标签，将li标签中内容利用模板字符串修改，最后在追加到ul中

        // 1 遍历数组，创建节点、插入节点
        const ul = document.querySelector('.box-bd ul')
        for (let index = 0; index < data.length; index++) {
            const li = document.createElement('li')
            li.innerHTML = `
                    <a href="#">
                        <img src="${data[index].src}" alt="">
                        <h4>
                            ${data[index].title}
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>${data[index].num}</span>人在学习
                        </div>
                    </a>
            `
            ul.insertBefore(li, ul[index])
            //追加内容
        }