DOM的复习笔记

DOM的复习笔记

一.DOM的概念及作用

DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。
DOM定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系。

二.DOM的基本操作

1.查询（获取元素）

getElementById() : 获取特定 ID 元素的节点–最优
getElemntsByTagName(): 获取相同元素的节点列表，返回类数组，使用[0]来获取
getElemntsByClassName(): 获取相同类名的节点列表（IE8及以下不支持），返回类数组
注：1不是所有的标签都有name值；
2低版本的浏览器会有兼容问题；

children属性，获得DOM元素的所有子元素；返回值是集合
parentNode属性，获得DOM元素的父级元素

ES5选择器：
querySelector(): 通过选择器获取元素，如果获取多个只返回第一个。
querySelectorAll(): 通过选择器获取元素，可同时获取多个元素，类数组。（支持IE8+）

2.创建、添加、删除、克隆、替换

创建：
ducument.createElemnt() 创建一个元素节点
添加：
父节点.appendChild(元素节点) 把元素节点插入到父节点的内部最后的位置
父节点.insertBefore(新的元素节点,存在元素节点)在父节点内,把新的元素节点插入到已经存在的元素切点的前面
删除：
父节点.removeChild（node）删除父节点内部的子节点
node.父节点.removeChild(node); //在不清楚父节点的情况下使用
克隆：
obj.cloneNode(） 克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆。
替换：
父节点.replaceChild(新添加的节点 , 被替换的节点) 替换子节点

三.DOM元素类型

节点可以分为元素节点、属性节点和文本节点…，他们分别用不同的数字代表类型。

例如：元素(1) ；属性(2) ；文本(3) ；注释(8) ；document节点（9）

每个节点又有三个非常有用的属性，分别为：
nodeType 节点种类，返回值是数字；

nodeValue 获取（文字）节点的文本内容；

nodeName 返回node节点名称（#text，注释， 标签…）；

四.属性获取和操作

getAttribute() 获取特定元素节点属性的值，某些低版本浏览器IE8不支持
document.getElementById( ID值 ).getAttribute( )
什么是元素属性呢？ class就是元素属性，写在标签内的所有东西都是标签属性， 比如link的href比如img的src…都是元素属性。元素自带的属性可以直接用 . 语法获取，但是自定义属性需要 getAttribute() 和 setAttribute( ) 方法

setAttribute() 设置特定元素节点属性的值，某些低版本浏览器不支持
设置的属性永远都是字符串类型

removeAttribute() 移除特定元素节点属性，某些低版本浏览器不支持

五.outerHTML/innerHTML/innerText

innerHTML：读写元素节点里的内容（包括元素）,从节点起始位置到终止位置的全部内容,包括内部的元素。

outerHTML：读写元素节点里的内容（包括元素）,除了包含innerHTML全部内容外, 还包含元素节点本身。

innerText：读写某个元素节点的文本内容

六.childNodes节点的集合

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称 为同胞（兄弟或姐妹）。

childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，但在IE9之前，IE浏览器会自动忽略空白节点.

重点：
元素选择(利用方法获取元素 + innerHTML)

节点选择(通过元素节点，属性节点，文本节点进行获取) + (childNodes+nodeType+nodeValue)

childNodes与children的区别

children不考虑空白节点，而childNodes考虑空白节点，而且它们都是类数组。

高级选取：第一个子节点，最后一个子节点，上一个兄弟节点，下一个兄弟节点(包含空白和不包含空白等分成8个属性)

firstChild 获取当前元素节点的第一个子节点（包含空白)
lastChild 获取当前元素节点的最后一个子节点（包含空白)
previousSibling 获取当前节点的前一个同级节点（包含空白)
nextSibling 获取当前节点的后一个同级节点（包含空白)

firstElementChild 获取当前元素节点的第一个元素子节点(不包含空白)
lastElementChild 获取当前元素节点的最后一个元素子节点(不包含空白)

七.节点的高级选取

document:获取整个文档对象document

document.documentElement 获取的html标签元素

document.title 获取title标题元素

document.body 获取body标题元素

parentNode 获取当前节点的父节点

八.读写css样式的值

获取css属性值：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent（定位父级）

获取样式及兼容问题：getComputedStyle / currentStyle

九.文档碎片（createDocumentFragment）

文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素

创建文档碎片

var cache = document.createDocumentFragment();
for( var i = 0 ; i < 1000; i ++ ){
    var opt = document.createElement("input");
    opt.type="button";
    opt.value = "删除";
    cache.appendChild(opt);
}
document.body.appendChild(cache);

十.DOM尺寸和位置

1.尺寸

2.坐标

offsetParent 这个属性的返回值是它根据谁定位的，如果它的所有父元素都没有定位，那么返回body