DOM节点,DOM属性与DOM对象的样式
Document Object Model 文档对象模型
DOM是针对HTML和XML文档的一个API
DOM描绘了一个层次化的节点树
定义了访问和操作HTML文档的标准方法
回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建过程叫做回流(reflow)。
重绘
当render tree中的一些元素发生变化,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
回流必将引起重绘,而重绘不一定会引起回流。
什么会引起回流
当页面的布局和几何属性发生变化的时候就会引起回流。
dom树结构变化,比如删除或者添加某个node.
元素几何属性变化,包括margin,padding,height,width,border等
页面渲染初始化
浏览器窗口发生变化-resize事件发生时
HTMLDivElement//接口,可以看做数据类型,基于HTMLElement创作出来的,可以称他是HTMLDivElement的父类(超类)
HTMLDivElement–>HTMLElement–>Element–>Node(节点,类别更为基础的)–>EventTarget–>Object
HTMLDocument–>Document–>Node–>EventTarget–>Object
Window
属于Browser Object Molder浏览器对象模型,window是最顶级的
window.location
window.history
window.screen
window.document,产生了DOM模型
window.navigator
DOM和BOM 最大特征:适配
节点
HTML 文档中的每个成分都是一个节点。基本上看到的所有东西都叫节点
节点属性:
nodeName(节点名称)
元素节点的 nodeName 是标签名称 大写字母
文本节点的 nodeName 永远是 #text
注释节点的 nodeName 永远是 #comment
可以用来判断元素类型div1.nodeName==="DIV"与constructor相似
nodeValue(节点值)
文本节点,nodeValue 属性包含文本。
元素节点nodeValue不可用
注释节点nodeValue包括注释内容
nodeType(节点类型)
元素—1
属性—2
文本—3
注释—8
文档—9
获取Dom元素
document.getElementById(),根据标签id获取DOM元素
document.getElementsByTagName()根据标签名获取一类DOM元素
document.getElementsByName()根据标签name获取DOM元素
document.getElementsByClassName(新) 根据标签class获取DOM元素
document.querySelector(新,ie8以下不支持) 根据标签名获取第一个元素
document.querySelectorAll(新,ie8以下不支持) 获取所有标签名的元素
HTMLCollection列表,HTMLCollection只能存储的是HTML标签
NodeList节点列表,可以存储任意节点,包括有HTML标签,文本,注释等等
节点遍历
childNodes:所有子节点 获取所有子节点(包括注释),NodeList节点列表
children:所有是标签类型的子节点 获取所有子元素,HTMLCollection列表
parentNode:获取已知节点的父节点
firstElementChild : 第一个子节点 (元素)
firstChild : 第一个子节点
previousElementSibling:上一个兄弟节点
lastElementChild:最后一个子节点(元素)
lastChild:最后一个子节点
nextElementSibling:下一个兄弟节点(元素)
nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点
创建节点
document.createElement(“标签名”) : 创建新元素
document.createTextNode("") : 创建文本节点
插入节点
appendChild(node) : 向childNodes末尾插入一个节点node
insertBefore(newElement,targetElement) : 向targetNode之前插入节点node
替换节点
replaceChild(newNode,oldNode) : newNode替换oldNode
删除节点
removeChild(node) : 移除父节点的某个子节点
remove():移除当前节点
复制节点
cloneNode(boolean) : 复制一个节点
如果是ture就是深复制,false就是浅复制
复制会将id等属性一起复制,需要复制后修改
案例:
// 碎片化处理添加DIV
<script>
var div1 = document.getElementById("div1");
var elem = document.createDocumentFragment(); //碎片容器,减少回流重绘
for (var i = 0; i < 10; i++) {
var div = document.createElement("div");
div.innerHTML = i;
elem.appendChild(div);
}
document.body.appendChild(elem);
</script>
// 工厂模式创建元素
<div id="div1"></div>
<script>
function ce(type, style, parent, props) {
var elem = document.createElement(type);
if (style) Object.assign(elem.style, style);
if (typeof parent === "string") parent = document.querySelector(parent);
if (parent) parent.appendChild(elem);
if (props) Object.assign(elem, props);
return elem;
}
var div1 = document.getElementById("div1");
var div = ce("div",
{
width: "50px",
height: "50px",
backgroundColor: "red",
},
div1,
{ id: "div1", className: "divs" }
);
var div = ce("div");
</script>