文章目录
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