DOM 操作

  • 一、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 区域的尺寸