JS学习笔记十二——DOM 操作

一、DOM 操作

DOM 全名为 Document Object Model，是一整套操作文档流相关内容的属性和方法，这些方法可以用于操作元素修改样式、修改属性、改变位置、添加事件等。

DOM 操作内容：

1. 获取元素
   可以确定要操作的元素，是重要步骤。
   方式：
   （1）根据 id 名获取：document.getElementById（‘id 名称’）
    可以获取文档流中 id 名对应的一个元素，若有 id 对应的元素，则返回值为该元素，若没有 id 对应的元素，则返回值是 null；
   （2）根据元素类名获取：document.getElementsByClassName（‘元素类名’）
    可以获取文档流中所有类名对应的元素，返回值必定是一个伪数组，若有类名对应的元素，则有多少取多少，若没有类名对应的元素，则返回空的伪数组；
    伪数组指的是长得像数组，排列也按索引排列，但不能使用数组常用方法。
   （3）根据元素标签名获取：document.getElementsByTagName（‘元素标签名’）
    可以获取文档流中所有标签名对应的元素，返回值必定是一个伪数组，若有标签名对应的元素，则有多少取多少，若没有标签名对应的元素，则返回空的伪数组；
   （4）根据选择器获取一个：document.querySelector（‘选择器’）
    可以获取文档流中满足选择器规则的 第一个 元素，若有选择器对应的元素，则获取第一个元素，若没有选择器对应的元素，则返回 null；
   （5）根据选择器获取一组：document.querySelectorAll（‘选择器’）
    可以获取文档流中所有满足选择器规则的元素，返回值必定是一个伪数组，若有选择器对应的元素，则有多少取多少，若没有选择器对应的元素，则返回空的伪数组；

2. 操作元素内容
   （1）操作元素文本内容
    语法：
    获取元素文本：元素.innerText
    只得到文本部分，忽略内部的标签
    设置元素文本：元素.innerText = ‘新内容’
    新内容作为文本，元素内部有标签时标签会被一同覆盖
   （2）操作元素超文本内容
    语法：
    获取元素文本：元素.innerHTML
    标签和文本一同获得
    设置元素文本：元素.innerHTML = ‘新内容’
    新内容可为标签，且设置后标签语句可生效

3. 操作元素属性
   （1）原生属性
    标签本身自带的属性，如：id src type等
    获取属性：元素.属性名
    设置属性：元素.属性名 = ‘属性值’
   （2）自定义属性
    自己所写的属性，无特殊意义，只是在元素身上记录信息
    获取属性：元素.getAttribute（‘属性名’）
    设置属性：元素.setAttribute（‘属性名’，‘属性值’）
    删除属性：元素.removeAttribute（‘属性名’）

4. 操作元素类名
   获取类名：元素.className
   设置类名：元素.className = ‘新类名’

5. 操作元素行内样式
   获取行内样式：元素.style.样式名
   设置行内样式：元素.style.样式名 = ‘样式值’
   注意：当获取的 CSS 样式名中有 - 时，在 JS 中需改为驼峰命名，如：background-color 要写成 backgroundColor。

6. 获取元素非行内样式
   获取非行内样式：window.getComputedStyle（元素）.样式名
   注意：
   （1）该方法可以获取行内样式，也可以获取非行内样式
   （2）前端 JS 只能设置元素行内样式，不能设置非行内样式

7. 节点操作
   （1）创建节点
    用 JS 代码创造出一个页面原先没有的内容，创建出一个指定的标签元素，返回值是一个创建好的元素节点。
    语法：document.createElement（‘标签名称’）
   （2）插入节点
    将新创建的节点插入到一个已经存在的结构中
    语法一：父节点.appendChild（子节点）
    作用是将子节点放在父节点内部，并放在最后的位置，父节点通过获取元素的方式得到。
    语法二：父节点.insertBefore（要插入的子节点，哪一个子节点的前面）
    作用是将子节点放在父节点内部，并且放在指定的某个子节点的前面。
   （3）删除节点
    把一个已经存在的节点删去
    语法一：父节点.removeChild（子节点）
    作用是将父节点中对应的子节点删去
    语法二：节点.remove（）
    作用是把自己删去
   （4）替换节点
    用一个节点替换另一个节点
    语法：父节点.replaceChild（换上节点，换下节点）
    作用是在父节点内，用换上节点替换掉换下节点
   （5）克隆节点
    复制一个一样的节点
    语法：节点.cloneNode（是否克隆后代节点）
    注意：括号内的参数可填可不填，默认为 false，表示不克隆后代节点

8. 获取元素尺寸
   语法一：
   高度：元素.offsetHeight
   宽度：元素.offsetWidth
   获取的是 元素内容 + padding + border 区域的尺寸
   语法二：
   高度：元素.clientHeight
   宽度：元素.clientWidth
   获取的是 元素内容 + padding 区域的尺寸

二、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！