DOM(文档对象模型)之操作DOM的API总结

DOM(文档对象模型)

1. 什么是DOM

   DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。DOM把整个页面映射为一个多层次的节点结构。HTML和XML页面中的每一个组成部分都是某种类型的节点。借助DOM提供的API，开发人员可以轻松自如的删除，添加，替换，修改任何节点。DOM 是一个以树状结构存在的内容。DOM 的顶级是 document 表示当前文档。

   window->document->html

2. 获取DOM元素

   • 非常规标签

     1-1. html =>document.documentElement

     1-2. head => document.head (低版本浏览器不兼容)

     1-3. body => document.body

   • 常规标签

     2-1.getElementById()

   ​ => 语法: 查找范围.getElementById(‘id名称’)

   ​ => 查找范围: document 或者一个 元素

   ​ => 返回值:

   ​ -> 如果有这个 id 名匹配的元素, 就是这个元素

   ​ -> 如果没有这个 id 名匹配的元素, 那么就是 null

   2-2. getElementsByTagName()

   ​ => 语法: 查找范围.getElementsByTagName(‘标签名’)

   ​ => 返回值: 是一个伪数组(数组常用方法用不了)

   ​ -> 如果有这个标签名匹配的元素, 有多少获取多少

   ​ -> 如果没有这个标签匹配的元素, 返回一个空的伪数组

   2-3. getElementsByClassName()

   ​ => 语法: 查找范围.getElementsByClassName(‘类名’)

   ​ => 返回值: 是一个伪数组(数组常用方法用不了)

   ​ -> 如果有这个类名匹配的元素, 有多少获取多少

   ​ -> 如果没有这个类名匹配的元素, 返回一个空的伪数组

   2-4. getElementsByName()

   ​ => 语法: 查找范围.getElementsByName(‘元素name属性的值’)

   ​ => 返回值: 是一个伪数组

   ​ -> 如果有元素的 name 属性的值匹配, 那么由多少获取多少

   ​ -> 如果没有元素的 name 属性值匹配, 那么就是空的伪数组

   2-5. querySelector()

   ​ => 语法: 查找范围.querySelector(‘选择器’)

   ​ => 选择器: 能在 css 里面写的选择器, 这里都可以写

   ​ => 返回值:

   ​ -> 如果找到选择器匹配的元素, 返回第一个找到的内容

   ​ -> 如果没有选择器匹配的元素, 返回 null

   ​ => 特点: IE 低版本不支持

   2-6. querySelectorAll()

   ​ => 语法: 查找范围.querySelectorAll(‘选择器’)

   ​ => 选择器: 能在 css 里面写的选择器, 这里都可以写

   ​ => 返回值: 是一个伪数组

   ​ -> 如果找到选择器匹配的元素, 有多少获取多少

   ​ -> 如果没有选择器匹配的元素, 返回一个空的伪数组

   ​ => IE 低版本不支持

3. 操作元素属性

   1. 原生属性

      • 元素.属性名 = ‘值’ 设置该元素的该属性的值

      • ele.className = ‘值’

   2. 自定义属性

      1. setAttribute(‘属性名’, ‘属性值’） 给元素标签上设置属性

      2. getAttribute(‘属性名’) 获取元素上的属性的值

      3. removeAttribute(‘属性名’) 删除元素上的属性

      4. 特点:

         ​ 1. 可以操作自定义属性, 可以操作原生属性

         ​ 2. 不管你设置什么数据类型, 当你再次从标签上拿到的时候, 都是字符串

   3. H5自定义属性

      1. 每一个元素身上有一个属性叫做 dataset

      2. • 里面包含了所有 H5 自定义属性

      ​ => key 是除了 data- 以外的内容

      ​ => value 就是这个属性的值

      3. • 操作 H5 的自定义属性

      ​ => 直接再 dataset 里面进行操作就可以

      4. • 获取

      ​ => 元素.dataset.名字

      ​ -> 名字: 标签上写 data-a, 使用 a

      5. • 设置

      ​ => 元素.dataset.名字 = ‘值’

      ​ -> 名字: 如果你在这里写 a, 那么映射再标签上是 data-a

   4. 操作元素类名

      1. 原生方法

         ele.className = “值”；

      2. H5新增

         元素身上有一个属性叫做 classList，里面包含了所有元素身上设置的类名，这个 classList 提供了一系列方法来操作

         1. add()

         ​ => 语法: 元素.classList.add(‘你要添加的类名’)

         2. remove()

         ​ => 语法: 元素.classList.remove(‘你要移除的类名’)

         3. toggle()

         ​ => 语法: 元素.classList.toggle(‘你要切换的类名’)

         ​ => 当元素有这个类名的时候, 就删除

         ​ => 当元素没有这个类名的时候, 就添加

   5. 操作元素文本

      • ele.innerHTML = ‘内容’

        当你的字符串里面出现 html 结构的时候, 会自动解析

      • ele.innerText = ‘内容’

        当你的字符串里面出现 html 结构的时候, 不会自动解析原样输出,只能获取文本不能获取标签内容

      • ele.textContent IE8+

        textContent 可以解析style= “display:none” 中的文本，而innerText不会

        textContent不会解析html格式，直接输出不换行的文本

   6. 获取节点

      1. ele.childNodes 获取全部子节点（伪数组）

      2. ele.children 获取全部子元素节点 (伪数组)

      3. ele.firstChild 获取第一个子节点

      4. ele.firstElementChild 获取第一个子元素节点

      5. ele.lastChild 获取最后一个子节点

      6. ele.lastElementChild 获取最后一个子元素节点

      7. ele.previousChild 获取上一个兄弟节点

      8. ele.previousElementChild. 获取上一个兄弟元素节点

      9. ele.nextChild 获取下一个兄弟节点

      10. ele.nextElementChild 获取下一个兄弟元素节点

      11. ele.parentNode 获取元素的父节点

      12. ele.parentElement 获取元素的父元素节点

      13. ele.atrributes 获取所有属性节点（伪数组）

   7. 节点属性

      1. nodeType

         => 元素节点: 1

         => 属性节点: 2

         => 文本节点: 3

         => 注释节点: 8

      2. nodeName

         => 元素节点: 大写标签名(全大写)

         => 属性节点: 属性名

         => 文本节点: 所有文本节点名称全部叫做 #text

         => 注释节点: 所有注释节点名称全部叫做 #comment

      3. nodeValue

         => 元素节点: null

         => 属性节点: 属性值

         => 文本节点: 文本内容(包含换行和空格)

         => 注释节点: 注释内容(包含换行和空格)

   8. 创建节点

      1. createElement()

         document.createElement(‘标签名’) ES6中创建图片 new Image( )

      2. createTextNode()

         document.createTextNode(‘文本内容’) 返回一个文本节点, 不是字符串

      3. createComment()

         document.createComment(‘注释内容’)

      4. createAttribute()

         document.createAttribute(‘属性名’) 添加属性值, 节点.value = ‘属性值’

   9. 插入节点

      1. appendChild()

         父节点.appendChild(子节点) 把子节点插入到父节点里面, 放在最后一个节点的位置

      2. insertBefore()

         父节点.innserBefore(要插入的子节点, 要插在哪一个子节点前面)

   10. 删除节点

       1. removeChild()

          父节点.removeChild(子节点)

       2. remove()

          节点.remove() 把自己删除

   11. 替换节点

       1. replaceChild()

          父节点.replaceChild(新节点, 旧节点)

   12. 克隆节点

       1. cloneNode()

          节点.cloneNode(参数)

          ​ -> 参数选填, 默认是 false, 不克隆后代节点 ，浅拷贝

          ​ -> 我们可以选填 true 表示克隆所有后代节点，深拷贝

          ​ => 返回值: 一个克隆好的节点

​

​

​

​

​

​