10.DOM

十、DOM

10.1 什么是DOM

DOM是Document Object Model（文档对象模型）的缩写，它是W3C国际组织的一套Web标准。是针对HTML和XML文档的一个API，它定义了访问HTML文档对象的一套属性、方法和事件。

10.2 节点类型

• 每个节点都有一个nodeType属性，用于表明节点的类型。
• 常用节点类型与对应nodeType值：
• 用于判断获取到的元素属于什么类型节点
  - 元素节点 <==> 1
  - 文本节点 <==> 3
  - 属性节点 <==> 2

<!--找出所有节点-->
<div class="content" title="属性节点">测试Div</div>

10.3 节点获取

10.3.1 获取元素节点方法

<div class="content" id="testId" name="testName" title="属性节点">测试Div</div>

• document.getElementById(id)

• 通过 ID获取元素的节点（速度最快）
• 必须通过document调用
• 返回元素节点对象，如果id不存在返回null

• getElementsByTagName(tagname)

• 通过标签名获取元素节点列表
• 返回类数组，如果tagname不存在返回空数组[]

• getElementsByClassName()

• 通过class类名获取节点列表
• 返回类数组，如果类名不存在返回空数组[]

• document.getElementsByName()

• 通过name属性获取元素节点列表
• 必须通过document调用
• 返回类数组，如果name属性不存在返回空数组[]

注意: 如果确认元素存在, 但是返回null或[]，一定是代码执行顺序的问题

10.4 节点操作

10.4.1 节点属性

• nodeName 返回节点的名称，根据其类型。
• nodeType 返回节点的类型。
• nodeValue 返回节点的值（元素节点的nodeValue为null）

10.4.2 节点方法

• 创建：

• document.createElement() 创建一个元素节点
• document.createTextNode() 创建一个文本节点
• document.createAttribute() 创建一个属性节点（几乎不用）

• 插入：

• parent.appendChild() 向节点的子节点列表的结尾添加新的子节点
• parent.insertBefore(new,node) 在指定的子节点node前插入新的子节点new。
• ele.setAttributeNode(attrNode) 在指定元素中插入一个属性节点（几乎不用）

对页面已存在节点的处理

• 复制

• cloneNode(boolean) 复制节点，为true是深复制。

• 删除：

• parent.removeChild(ele) 删除（并返回）当前节点parent的指定子节点ele。

• 判断：

• parent.hasChildNodes() 判断当前节点是否拥有子节点,返回布尔值

以上parent表示父级元素，ele表示元素

10.4.3 利用节点关系获取其他节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbUPSnLS-1589891378401)(https://note.youdao.com/yws/public/resource/3565e55c6adca26b4c1e8039458fa88b/xmlnote/2AB888F556EC4887BED654523FBFEF4C/23718 “节点关系”)]

• 获取父级节点

• ele.parentNode 得到ele元素的父节点

• 获取子节点

• ele.childNodes 得到ele元素的全部子节点列表（类数组）
• ele.firstChild 获得ele元素的第一个子节点
• ele.lastChild 获得ele元素的最后一个子节点

• 获取兄弟节点

• ele.nextSibling 获得ele元素的下一个兄弟节点
• ele.previousSibling 得到ele元素的上一个兄弟节点

---

10.5 元素节点的操作

10.5.1 常用节点属性

可以通过点语法或方括号访问

• id 设置/获取元素id属性
• name 设置/获取元素name属性
• style 设置/获取元素的内联样式
• className 设置/获取元素的class属性
• title
• value
• checked
• type
• src
• …
• tagName 获取元素元素的标签名
• innerHTML 设置/获取元素的内容（包含html代码）
• innerText 设置或获取位于元素标签内的文本
• outerHTML 设置或获取元素及其内容（包含html代码）
• outerText 设置(包括标签)或获取(不包括标签)元素的文本
• …

10.5.2 盒模型相关

• offsetTop: 当前元素离<定位父级>元素顶部的距离。
• offsetLeft: 当前元素离<定位父级>元素左边的距离。

以上两个属性如果没定位的父级，则相对于根元素html的距离

• offsetWidth: 当前元素的宽度（border + padding + content）
• offsetHeight: 当前元素的高度（border + padding + content）

10.5.3 操作html属性

• ele.getAttribute(attr) //获取元素的属性值（自定义属性获取）
• ele.setAttribute(attr,val); //设置元素的属性
• ele.removeAttribute(attr) //删除属性attr
• ele.hasAttribute(attr) //判断是否存在属性attr

10.5.4 根据元素关系获取其他元素

• parentElement 获取父级节点元素
• children 获取元素的全部子元素
• firstElementChild 获取第一个子元素
• lastElementChild 获取最后一个子元素
• previousElementSibling 获取前一个元素
• nextElementSibling 获取下一个元素

10.5.5 获取css样式（非内联样式）

得到当前元素计算后的所有样式

• getComputedStyle(ele,pseudo) （标准）

• ele:要获取样式的元素
• pseudo:伪元素样式字符(可选)，可获取伪元素样式

• ele.currentStyle （IE8-）

10.6 table对象(重点)

10.6.1 table对象属性&方法

• rows 返回包含表格中所有行的一个数组
• tBodies 返回包含表格中所有 tbody 的一个数组
• insertRow(index) 在表格中插入一个新行。
• deleteRow(index) 从表格删除一行。

10.6.2 tr对象属性&方法

• cells 返回包含表格中所有单元格的一个数组
• rowIndex 返回该行在表中的位置
• sectionRowIndex 返回在 tBody 、tHead 或 tFoot 中行的位置。
• insertCell(index) 在一行中的指定位置插入一个空的列
• deleteCell(index) 删除行中的指定的单元格

10.6.3 td/th对象属性&方法

• cellIndex 返回单元格在表格行的单元格集合中的位置。