DOM所有知识点总结

DOM

javascript 的组成部分

[图片上传失败...(image-97c027-1565435728019)]

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

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

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

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

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

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 可视高度

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。