DOM
javascript 的组成部分
- DOM (document object model) 文档对象模型
- BOM (browers object model) 浏览器对象模型
- ECMAScript js 的核心
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUt9LniG-1577959454391)(./DOMltree.gif)]
DOM 节点
- 节点分类
- 元素节点:每个 HTML元素
- 属性节点:HTML元素的属性
- 文本节点:HTML元素内的文本
- 注释节点:注释
- 文档节点:整个文档document
- 元素节点:每个 HTML元素
- 节点类型 — nodeType
- 元素节点:1
- 属性节点:2
- 文本节点:3
- 注释节点:8
- 文档节点:9
- 元素节点:1
- 节点名称 — 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.replaceChild(newNode,oldNode) 替换子元素
删除节点
- el parent.removeChild(el) 删除掉某个子元素 (推荐,会返回删除的节点,兼容性较好)
- node.remove(); 删除自己
克隆节点
- node.cloneNode(deep)
- deep: 默认为false
- deep 为 true, 克隆元素及属性,以及元素的内容和后代,并不会克隆所带的事件
- deep 为 false, 只克隆元素本身,及它的属性
元素的尺寸获取
-
offset
- offsetWidth 可视宽度(width(height) + padding + border)
- offsetHeight 可视高度
- offsetLeft 距离定位父级的left坐标 (通过计算后的页面展示的距离,如果有margin也会算进去)
- offsetTop 距离定位父级的top坐标
-
client
- clientWidth 可视宽度 - border (width(height) + padding)
- clientHeight 可视高度 - border
- clientTop 上边框宽度
- clientLeft 左边框宽度
-
scroll
- scrollWidth 内容宽度( 如果内容高度比元素高度要高,scrollHeight 就是内容的高度,否则就是元素的高度,包含padding )
- scrollHeight 内容高度
- scrollLeft 左右滚动距离
- scrollTop 上下滚动距离
-
getBoundingClientRect() (新方法,不兼容 ie )
- left 元素左侧距离可视区左侧距离
- top 元素顶部距离可视区顶部距离(滚动后会发生变化,可能是负值)
- right 元素右侧距离可视区左侧距离
- bottom 元素底部距离可视区顶部距离
- width 可视宽度
- height 可视高度
表格相关操作
- tBodies、tHead、tFoot、rows、cells
其他
- createDocumentFragment
{
let box = document.querySelector("#box");
console.time(1);
let inner = "";
for(let i = 0; i < 1000; i++){
inner += `<div>${i}</div>`;
}
box.innerHTML = inner;
console.timeEnd(1); // 速度最快
console.time(2);
// let fragment = document.createDocumentFragment();
let div = '';
for(let i = 0; i < 1000; i++){
div = document.createElement("div");
div.innerHTML = i;
}
box.appendChild(div);
console.timeEnd(2); // 速度最慢
console.time(3);
let fragment = document.createDocumentFragment();
for(let i = 0; i < 1000; i++){
let div = document.createElement("div");
div.innerHTML = i;
fragment.appendChild(div);
}
box.appendChild(fragment);
console.timeEnd(3); // 速度比一般的元素快
}
- NodeList 和 HTMLCollection
nodeList 和 HTMLCollection 区别
- nodeList
childNodes
querySelectorAll - HTMLCollection
children
getElementsByTagName
getElementsByClassName - 区别:
- nodeList 有 forEach 方法,但是 HTMLCollection 没有forEach
- HTMLCollection 每次调用时都会动态的去获取, nodeList 中 childNodes 有动态更新,但是querySelectorAll 就不会动态更新