Fork me on GitHub

DOM

 

DOM

什么是DOM

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

节点类型

  • 每个节点都有一个nodeType属性，用于表明节点的类型。
  • 常用节点类型与对应nodeType值：

用于判断获取到的元素属于什么类型节点 - 元素节点 <> 1 - 文本节点 <> 3 - 属性节点 <==> 2

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

节点获取

获取元素节点方法

  • document.getElementById(id)
    • 通过 ID获取元素的节点（速度最快）
    • 必须通过document调用
    • 返回元素节点对象，如果id不存在返回null
  • getElementsByTagName(tagname)
    • 通过标签名获取元素节点列表
    • 返回类数组，如果tagname不存在返回空数组[]
  • getElementsByClassName()
    • 通过class类名获取节点列表
    • 返回类数组，如果类名不存在返回空数组[]
  • document.getElementsByName()
    • 通过name属性获取元素节点列表
    • 必须通过document调用
    • 返回类数组，如果name属性不存在返回空数组[]

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

节点操作

节点属性

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

节点方法

  • 创建：
    • 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表示元素

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

  • 获取父级节点
    • ele.parentNode 得到ele元素的父节点
  • 获取子节点
    • ele.childNodes 得到ele元素的全部子节点列表（类数组）
    • ele.firstChild 获得ele元素的第一个子节点
    • ele.lastChild 获得ele元素的最后一个子节点
  • 获取兄弟节点
    • ele.nextSibling 获得ele元素的下一个兄弟节点
    • ele.previousSibling 得到ele元素的上一个兄弟节点

元素节点的操作

常用节点属性

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

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

盒模型相关

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

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

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

操作html属性

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

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

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

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

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

  • getComputedStyle(ele,pseudo) （标准）
    • ele:要获取样式的元素
    • pseudo:伪元素样式字符(可选)，可获取伪元素样式
  • ele.currentStyle （IE8-）

table对象(了解)

table对象属性&方法

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

tr对象属性&方法

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

td/th对象属性&方法

  • cellIndex 返回单元格在表格行的单元格集合中的位置。
posted @ 2019-11-28 08:41  幽幽木云  阅读(174)  评论(0)  编辑  收藏  举报