DOM

DOM

javascript 的组成部分

• DOM (document object model) 文档对象模型
• BOM (browers object model) 浏览器对象模型
• ECMAScript js 的核心

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5H8kMsx8-1614781924075)(./DOMltree.gif)]

DOM 节点

• 节点分类
  • 元素节点：每个 HTML元素
    • 属性节点：HTML元素的属性
  • 文本节点：HTML元素内的文本
    • 注释节点：注释
  • 文档节点：整个文档document
• 节点类型 — nodeType
  • 元素节点：1
    • 属性节点：2
  • 文本节点：3
    • 注释节点：8
  • 文档节点：9
• 节点名称 — nodeName
  • 元素节点：与标签名相同
  • 文本节点：为#text
  • 注释节点：为#comment
  • 文档节点：为#document

DOM关系

• childNodes 子节点
• children 子元素
• firstChild 第0个子节点
• firstElementChild 第0个子元素
• lastChild 最后一个子节点
• lastElementChild 最后一个子元素
• nextSibling 下一个兄弟节点
• nextElementSibling 下一个兄弟元素
• previousSibling 上一个兄弟节点
• previousElementSibling 上一个兄弟元素
• parentNode 父节点
• offsetParent 定位父级

DOM 属性操作

注意 . 和 [] 都是 ECMAScript 中，对象的属性操作，对象属性的值会被存在内存中, 想要直接获取存在 文档中属性，或者 想把一个属性设置在文档中我们需要使用DOM 的属性操作

• el.attributes 元素所有属性的集合
• el.getAttribute(“attr”) 获取属性
• el.setAttribute(“attr”,“val”) 设置属性
• el.removeAttribute(“attr”) 移出属性
• el.hasAttribute(“attr”) 判断是否有这个属性
• 只要操作了innerHTML 元素的所有子元素上，存在内存中的事件和相关的属性都会丢失。如果希望元素的某些属性在操作了父级的innerHTML 之后，还存在就把这个属性加在 DOM 中

data 自定义属性

• 在标签中定义data自定义属性：data-key=“value”;
• 在js操作该元素的 data 自定义属性：el.dataset
  • 获取：el.dataset.key
  • 设置: el.dataset.key = “value”

节点操作

创建节点

语法：element document.createElement(“tagName”); 创建一个节点
参数：tagName 标签名称
返回值：创建好的节点

向页面中添加节点

• el.appendChild(node) 在元素的末尾添加一个子级
• el.insertBefore(newNode,oldNode) 在 oldNode 前边添加入 newNode
• 在使用 appendChild 和 insertBefore时，如果添加是一个页面上已经存在的节点，会先从原位置删除，然后在添加到新的位置去。

删除节点

• parent.removeChild(el) 删除掉某个子元素

克隆节点

• node.cloneNode(deep)
  • deep: 默认为false
  • deep 为 true, 克隆元素及属性，以及元素的内容和后代
  • deep 为 false, 只克隆元素本身，及它的属性

元素的尺寸获取

• offset

  • offsetWidth 可视宽度
  • offsetHeight 可视高度
  • offsetLeft 距离定位父级的left坐标
  • offsetTop 距离定位父级的top坐标

• client

  • clientWidth 可视宽度 - border
  • clientHeight 可视高度 - border
  • clientTop 上边框宽度
  • clientLeft 左边框宽度

• scroll

  • scrollWidth 内容宽度
  • scrollHeight 内容高度
  • scrollLeft 左右滚动距离
  • scrollTop 上下滚动距离

• getBoundingClientRect()

  • left 元素左侧距离可视区左侧距离
  • top 元素顶部距离可视区顶部距离
  • right 元素右侧距离可视区左侧距离
  • bottom 元素底部距离可视区顶部距离
  • width 可视宽度
  • height 可视高度

表格相关操作

• tBodies、tHead、tFoot、rows、cells

其他

• createDocumentFragment
• NodeList 和 HTMLCollection