【Web API DOM11】节点操作

目录

一：DOM节点

1 什么是DOM节点

2 DOM节点分类

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

1 节点关系

父节点

子节点

兄弟节点

三：增加节点

1 创建节点

2 追加节点

2 案例：渲染数据

案例中核心代码块

样式

四：节点克隆（元素节点）

1 基础知识

五：删除节点（元素节点）

语法格式：

---

一：DOM节点

1 什么是DOM节点

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

2 DOM节点分类

元素节点

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

文本节点：标签中的文字

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

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

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

1 节点关系

1. 父节点

   1. 语法格式：子元素.parentNode
   2. 只能查找最近一级的父级元素，如果没有返回null

2. 子节点

   1. 两种查找方式
      1. 父元素.childNodes（不重要）
         1. 获取的是所有元素节点、文本节点、注释节点
      2. 父元素.children(重点)
         1. 仅获得所有元素节点
         2. 返回的是伪数组

3. 兄弟节点

   1. 两种属性，获取元素对象的同级元素对象
      1. 元素对象.nextElementSibling
      2. 元素对象.previousElementSibling

三：增加节点

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

1 创建节点

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

2 追加节点

1. 在父元素末尾追加节点
   1. 语法格式：父元素.appendChild(存储创造节点的变量名)
2. 在父元素最前方追加节点
   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])//追加内容}

样式

有兴趣的朋友可以下载源码练习

四：节点克隆（元素节点）

1 基础知识

语法格式：
待克隆的元素.cloneNode(布尔值)

• 若为true，则代表会克隆元素内容节点以及所有后代元素节点
• 若为false，则代表只克隆当前元素节点，元素中文本节点以及后代元素节点都不克隆
• 默认为false

五：删除节点（元素节点）

语法格式：

父元素.removeChild(要删除的元素)

注：

删除的是存在父子级关系的元素，如果不存在该关系，则删除不成功