DOM(操作html文档)

歪大梨

已于 2022-09-16 22:40:18 修改

阅读量484

点赞数

分类专栏：前端文章标签： html javascript 前端

于 2022-09-16 22:11:34 首次发布

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126898494

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

DOM的一些特殊元素操作（table、form）

定义：DOM 全拼为 document object model html文档对象模型主要用来帮助用户操作html文档
原理：DOM并不是直接操作html文档而是先将 html文档抽象化为一个树状结构（DOM树）之后通过对树状结构进行操作从而影响 html页面的效果

DOM获取元素

DOM获取子节点
- childNodes
  - 用法：父元素.childNodes;
  - 作用：获取父元素的所有子节点
DOM中的节点
- DOM中的节点分为4类
  - 元素节点（标签节点）：就是html结构中元素抽象化出来的节点元素名
  - 文本节点：html结构中文本内容抽象化出来的节点 text
  - 属性节点：html结构中元素属性抽象化出来的节点
  - 注释节点：html结构中注释抽象化出来的节点 comment
- 注意：在DOM中即使是回车换行等内容也会被抽象化为文本节点
- 节点的操作
  - 节点类型
    - 节点具备一个属性——nodeType
    - 用法：节点.nodeType
    - 作用：获取到节点的节点类型
    - 不同节点的节点类型如下
      - 元素节点：1
      - 属性节点：2
      - 文本节点：3
      - 注释节点：8
  - 节点名称
    - 节点具备一个属性——nodeName
    - 用法：节点.nodeName
    - 元素节点：大写的标签名
    - 文本节点：#text
    - 注释节点：#comment
    - 说明：一般我们多用节点名称来判断当前元素是什么元素
  - 节点值
    - 节点具备一个属性——nodeValue
    - 用法：节点.nodeValue
    - 元素节点：null
    - 文本节点和注释节点：文本内容/注释内容
    - 说明：一般多用于操作文本节点的内容
    - 注意：这个属性既可以设置也可以获取的属性
      - 设置用法：节点.nodeValue = "节点内容"
获取元素的新方法
- document/父元素.querySelector("css3选择器")
  - 作用：通过指定的css3选择器获取对应的元素
  - 注意：本方法一次只能获取一个元素得到的结果也是唯一的元素
  - 注意：如果有多个元素满足选择器条件获取到的是第0个
- document/父元素.querySelectorAll("css3选择器")
  - 作用：获取所有满足css3选择器的元素组成一个伪数组
获取子节点、子元素
- 父元素.childNodes ==> 获取父元素中的所有子节点
- 父元素.children ==> 获取父元素中的所有子元素
获取父元素
- parentNode
  - 用法：子节点.parentNode
  - 作用：获取到父节点
- offsetParent
  - 用法：子节点.offsetParent
  - 作用：获取带定位的父节点（不是静态定位）如果没有带定位的父节点就获取到 body
获取兄弟节点、兄弟元素
- nextSibling
  - 用法：节点.nextSibling;
  - 作用：在标准浏览器中获取到下一个兄弟节点在ie低版本中获取到下一个兄弟元素
- nextElementSibling
  - 用法：节点.nextElementSibling;
  - 作用：在标准浏览器中获取到下一个兄弟元素在 ie低版本中不能用
- previousSibling
  - 用法：节点.previousSibling;
  - 作用：在标准浏览器中获取到上一个兄弟节点在ie低版本中获取到上一个兄弟元素
- previousElementSibling
  - 用法：节点.previousElementSibling;
  - 作用：在标准浏览器中获取到上一个兄弟元素在 ie低版本中不能用
- 兼容兄弟元素
  - 我们做一下获取兄弟元素的方法兼容
    - 在标准浏览器中：nextElementSibling 和 previousElementSibling获取兄弟元素
    - 在ie低版本中：nextSibling 和 previousSibling获取兄弟元素
  - 兼容的思路是判断当前所处的浏览器是什么根据不同的浏览器使用不同的方法
获取子元素的方法
- firstChild、firstElementChild
  - 父元素.firstChild 在标准浏览器中获取第一个子节点在ie低版本中获取第一个子元素
  - 父元素.firstElementChild 在标准浏览器中获取第一个子元素在ie低版本中 undefined
- lastChild、lastElementChild
  - 父元素.lastChild 获取最后一个子节点
  - 父元素.lastElementChild 获取最后一个子元素

DOM对元素的操作（增删改）

增
- 这里说道的增其实是给DOM树中添加节点
- 我们将增添节点的过程分为两步
  - 创建节点
    - 创建文本节点（不常用）
      - createTextNode
        
        用法：document.createTextNode("文本内容")
        
        作用：创建指定内容的文本节点
    - 创建元素节点
      - createElement
        
        用法：document.createElement("元素名")
        
        作用：创建一个元素节点
  - 添加节点
    - appendChild
      - 用法：父元素.appendChild(要添加的子元素)
      - 作用：将指定的子元素添加到父元素的末尾
    - insertBefore
      - 用法：父元素.insertBefore(新子节点，旧子节点)
      - 作用：将新子节点添加到父元素中旧子节点的前面
    - 总结：上述两个方法就是DOM中向DOM树添加节点的方法但是这两个方法都存在问题如果追加的节点已经在DOM树中存在了就会产生位置的移动
删
- remove
  - 用法：节点.remove()
  - 作用：从DOM树中移除掉这个节点
- removeChild
  - 用法：父元素.removeChild(指定的子节点)
  - 作用：删除掉父元素中的子节点
改
- 替换
  - replaceWith
    - 用法：旧节点.replaceWith(新节点)
    - 作用：使用新节点替换旧节点
  - replaceChild
    - 用法：父节点.replaceChild（新子节点，旧子节点）
    - 作用：使用新子节点替换旧子节点
- 克隆
  - cloneNode
    - 用法1：节点.cloneNode()
      - 作用：将指定节点进行复制
      - 注意：这种克隆只能克隆当前元素元素内容则无法克隆
    - 用法2：节点.cloneNode(true)
      - 作用：深克隆，将指定节点和其内容都克隆下来

DOM对属性节点的操作

我们之前讲到的 js操作属性的方法——元素.属性名元素.属性名 = 属性值
但是这种操作方式无法操作元素的非自带属性和自定义属性
今天我们讲操作属性节点通过对属性节点的操作我们将可以操作元素的非自带属性和自定义属性
对属性节点的操作分为两个方法
- 获取属性值——getAttribute
  - 用法：元素节点.getAttribute("属性名")
- 设置属性值——setAttribute
  - 用法：元素.setAttribute("属性名"，"属性值")
- 移除属性——removeAttribute
  - 用法：元素.removeAttribute("属性名")

DOM的一些特殊元素操作（table、form）

table
- 获取表格元素
  - 获取thead：table元素.tHead
  - 获取tbody：table元素.tBodies
    - 注意：tBodies得到的是一个元素集合其中包含table中的所有tbody 因此需要加索引
  - 获取tfoot：table元素.tFoot
  - 获取tr：范围.rows
    - 得到的结果是一个元素集合其中包含指定范围内的所有tr
    - 范围可以是thead tbody tfoot 也可以直接是 table
  - 获取单元格（td 和 th）：tr.cells
    - 注意：只能使用tr来获取其中的单元格

form

表单元素的获取
- 我们在form元素中可以通过 form.表单元素的name属性来获取对应的表单元素

<form>
    <input type="text" name="username"/>
</form>
<script>
	var form = document.querySelector("form");
    form.username;//就是input
</script>

表单元素的专属事件
- input的专属事件
  - onblur
    - 离焦事件当input失去焦点的时候触发该事件
  - onfocus
    - 聚焦事件当input获取到焦点的时候触发该事件
  - onchange
    - input内容改变事件会在input的内容改变后失去焦点的时候触发
- form元素的专属事件
  - onsubmit
    - 提交事件，当表单提交的时候触发这个事件
    - form.onsubmit = function(){}
    - 注意：我们如果在提交事件的处理函数中 return false 就可以阻止表单提交 return false 一定要写在所有代码的最后面
  - onreset
    - 重置事件，当表单重置的时候触发这个事件
    - form.onreset = function(){}
    - 注意：我们如果想阻止重置只要在重置事件的处理函数中 return false 即可
- 表单元素的专属方法
  - form元素的专属方法
    - submit
      - 用法：form.submit()
      - 作用：提交表单
    - reset
      - 用法：form.reset()
      - 作用：重置表单
  - input的专属方法
    - blur
      - 用法：input.blur()
      - 作用：让input失去焦点
    - focus
      - 用法：input.facus()
      - 作用：让input获取焦点
    - select
      - 用法：input.select()
      - 作用：让input的内容被选中