DOM与BOM详解-优快云博客

DOM

javascript 的组成部分

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUt9LniG-1577959454391)(./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.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 就不会动态更新