温故js系列（6）-DOM

前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总

欢迎提issues斧正：DOM

JavaScript-DOM

DOM简介

DOM（Document Object Model）即文档对象模型，针对HTML 和XML 文档的API（应用程序接口）。DOM 描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。经过 DOM，能够访问全部的 HTML 元素，连同它们所包含的文本和属性。能够对其中的内容进行修改和删除，同时也能够建立新的元素。document对象是文档的根节点，window.document属性就指向这个对象。

DOM节点

分为元素节点、属性节点和文本节点。
而这些节点又有三个很是有用的属性，分别为：nodeName、nodeType 和nodeValue

节点类型       nodeName     nodeType     nodeValue
  元素          元素名称       1           null
  属性          属性名称       2          属性值
  文本           #text        3     文本内容(不包含html)

F12打开console，便可操做当前网页节点：

document.getElementById('mainLike').nodeName  //"BUTTON"
document.getElementById('mainLike').nodeType  //1
document.getElementById('mainLike').nodeValue //null
document.getElementById('mainLike').getAttributeNode("class").nodeName //"class"
document.getElementById('mainLike').getAttributeNode("class").nodeType //2
document.getElementById('mainLike').getAttributeNode("class").nodeValue //"btn btn-success btn-lg mr10"
document.getElementById('mainLike').firstChild.nodeName  //"#text" 对于全部文本节点nodeName都是"#text"
document.getElementById('mainLike').firstChild.nodeType  //3
document.getElementById('mainLike').firstChild.nodeValue  //"0 推荐"

DOM元素选择

方法                      说明                  备注
getElementById()          获取特定ID元素的节点       获取单个节点对象
getElementsByClassName()  获取指定class类的节点列表  返回值为节点数组
getElementsByTagName()    获取相同元素的节点列表     返回值为节点数组
getElementsByName()       获取相同名称的节点列表     返回值为节点数组
querySelector             获取class第一个或id的节点  返回值为一个节点对象
querySelectorAll          获取class或id的节点列表    返回值为节点数组

jQuery在选择器上作的很是好，使用的选择器引擎Sizzle占了jQuery很大一部分。延伸：jQuery选择器浅析

querySelectorAll 和getElementsBy获取节点数组系列方法有一个很重要的区别：
querySelectorAll 返回的是一个 Static Node List
getElementsBy系列的返回的是一个 Live Node List

具体可参见知乎提问，答案很详细

获取HTML元素属性

属性         说明
id        元素节点的id 名称
title     元素节点的title 属性值
style     CSS 内联样式属性值
className CSS 元素的类

document.getElementById('xzavier').id; //获取id
document.getElementById('xzavier').id = 'man'; //设置id
document.getElementById('xzavier').title; //获取title
document.getElementById('xzavier').title = '标题' //设置title
document.getElementById('xzavier').style; //获取CSSStyleDeclaration对象
document.getElementById('xzavier').style.color; //获取style对象中color的值
document.getElementById('xzavier').style.color = 'red'; //设置style对象中color的值
document.getElementById('xzavier').className; //获取class
document.getElementById('xzavier').className = 'xzavier'; //设置class

属性方法

getAttribute()            获取特定元素节点属性的值
setAttribute()            设置特定元素节点属性的值
removeAttribute()         移除特定元素节点属性

getAttribute()方法

getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有
必定区别。

document.getElementById('xzavier').getAttribute('id');//获取元素的id 值
document.getElementById('xzavier').id; //获取元素的id 值
document.getElementById('xzavier').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('xzavier').mydiv //获取元素的自定义属性值，非IE 不支持
document.getElementById('xzavier').getAttribute('class');//获取元素的class 值，IE 不支持
document.getElementById('xzavier').getAttribute('className');//非IE 不支持

这里说一下attribute和property的区别，基本能够总结为attribute节点都是在HTML代码中可见的，而property只是一个普通的名值对属性。

Property：属性，全部的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每一个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象，所以，他能够和其余JavaScript对象同样添加自定义的属性以及方法。property的值能够是任何的数据类型，对大小写敏感，自定义的property不会出如今html代码中，只存在js中。

Attribute：特性，区别于property，attribute只能是字符串，大小写不敏感，出如今innerHTML中，经过类数组attributes能够罗列全部的attribute。

相同之处
标准的 DOM properties 与 attributes 是同步的。公认的（非自定义的）特性会被以属性的形式添加到DOM对象中。如，id，align，style等，这时候操做property或者使用操做特性的DOM方法如getAttribute()均可以操做属性。不过传递给getAttribute()的特性名与实际的特性名相同。所以对于class的特性值获取的时候要传入“class”。

不一样之处
1).对于有些标准的特性的操做，getAttribute与点号(.)获取的值存在差别性。如href，src，value，style，onclick等事件处理程序。
2).href：getAttribute获取的是href的实际值，而点号获取的是完整的url，存在浏览器差别。

setAttribute()方法

setAttribute()方法将设置元素中某个属性和值。它须要接受两个参数：属性名和值。如
果属性自己已存在，那么就会被覆盖。

document.getElementById('xzavier').setAttribute('align','center');//设置属性和值
document.getElementById('xzavier').setAttribute('xzavier','123456');//设置自定义的属性和值

removeAttribute()方法

removeAttribute()能够移除HTML 属性。

document.getElementById('xzavier').removeAttribute('style');//移除属性

PS：IE6 及更低版本不支持removeAttribute()方法。

层次节点属性

节点的层次结构能够划分为：父节点与子节点、兄弟节点这两种。当咱们获取其中一个元素节点的时候，就可使用层次节点属性来获取它相关层次的节点。

属性                说明
childNodes      获取当前元素节点的全部子节点
firstChild      获取当前元素节点的第一个子节点
lastChild       获取当前元素节点的最后一个子节点
ownerDocument   获取该节点的文档根节点，至关与document
parentNode      获取当前节点的父节点
previousSibling 获取当前节点的前一个同级节点
nextSibling     获取当前节点的后一个同级节点
attributes      获取当前元素节点的全部属性节点集合

节点操做

方法                说明
write()           把任意字符串插入到文档中
createElement()   建立一个元素节点
appendChild()     将新节点追加到子节点列表的末尾
createTextNode()  建立一个文件节点
insertBefore()    将新节点插入在前面
repalceChild()    将新节点替换旧节点
cloneNode()       复制节点
removeChild()     移除节点

document.write('<p>这是一个段落！</p>')';  //把任意字符串插入到文档中去
var xzavier = document.getElementById('xzavier'); //获取某一个元素节点
var p = document.createElement('p'); //建立一个新元素节点<p>
xzavier.appendChild(p); //把新元素节点<p>添加子节点末尾
var text = document.createTextNode('段落'); //建立一个文本节点
p.appendChild(text); //将文本节点添加到子节点末尾
xzavier.parentNode.insertBefore(p, xzavier); //把<div>以前建立一个节点
xzavier.parentNode.replaceChild(p,xzavier); //把<div>换成了<p>
var clone = xzavier.firstChild.cloneNode(true); //获取第一个子节点，true 表示复制内容
xzavier.appendChild(clone); //添加到子节点列表末尾
xzavier.parentNode.removeChild(xzavier); //删除指定节点

DOM操做内容

innerText

document.getElementById('xzavier').innerText; //获取文本内容(若有html 直接过滤掉)
document.getElementById('xzavier').innerText = 'xzavier'; //设置文本(若有html 转义)

除了Firefox 以外，其余浏览器均支持这个方法。但Firefox 的DOM3级提供了另一个相似的属性：textContent，作上兼容便可通用。

document.getElementById('xzavier').textContent; //Firefox 支持

兼容一下：

function getInnerText(element) {
    return (typeof element.textContent == 'string') ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
    if (typeof element.textContent == 'string') {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

innerHTML

document.getElementById('xzavier').innerHTML; //获取文本(不过滤HTML)
document.getElementById('xzavier').innerHTML = '<b>xzavier</b>'; //可解析HTML

虽然innerHTML 能够插入HTML，但自己仍是有必定的限制，也就是所谓的做用域元素，离开这个做用域就无效了。

xzavier.innerHTML = "<script>alert('xzavier);</script>"; //<script>元素不能被执行
xzavier.innerHTML = "<style>background:red;</style>"; //<style>元素不能被执行

还有两个方法outerText，outerHTML基本不怎么用。最经常使用的innerHTML 属性和节点操做方法的比较，在插入大量HTML 标记时使用innerHTML 的效率明显要高不少。由于在设置innerHTML 时，会建立一个HTML 解析器。这个解析器是浏览器级别的(C++编写)，所以执行JavaScript 会快的多。但，建立和销毁HTML 解析器也会带来性能损失。最好控制在最合理的范围内。

获取元素大小

clientWidth 和clientHeight

这组属性能够获取元素可视区的大小，能够获得元素内容及内边距所占据的空间大小。

xzavier.clientWidth; //400
xzavier.clientHeight //400

返回了元素大小，但没有单位，默认单位是px
1.增长边框，无变化
2.增长外边距，无变化
3.增长滚动条，最终值等于本来大小减去滚动条的大小
4.增长内边距，最终值等于本来大小加上内边距的大小

scrollWidth 和scrollHeight

这组属性能够获取滚动内容的元素大小。

xzavier.scrollWidth; //400
xzavier.scrollWidth; //400

1.增长内边距，最终值会等于本来大小加上内边距大小
2.增长滚动条，最终值会等于本来大小减去滚动条大小

offsetWidth 和offsetHeight

这组属性能够返回元素实际大小，包含边框、内边距和滚动条。

xzavier.offsetWidth;  //400
xzavier.offsetHeight; //400

返回了元素大小，默认单位是px。若是没有设置任何CSS 的宽和高度，他会获得计算后的宽度和高度。
1.增长边框，最终值会等于本来大小加上边框大小
2.增长内边距，最终值会等于本来大小加上内边距大小
3.增长外边据，无变化
4.增长滚动条，无变化，不会减少

clientLeft 和clientTop

这组属性能够获取元素设置了左边框和上边框的大小。

xzavier.clientLeft; //获取左边框的长度
xzavier.clientTop; //获取上边框的长度

offsetLeft 和offsetTop

这组属性能够获取当前元素相对于父元素的位置。

xzavier.offsetLeft; //20
xzavier.offsetTop;  //20

获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute；不然不一样的浏览器会有不一样的解释。加上边框和内边距不会影响它的位置，但加上外边据会累加。

scrollTop 和scrollLeft

这组属性能够获取滚动条被隐藏的区域大小，也可设置定位到该区域。

xzavier.scrollTop;  //获取滚动内容上方的位置
xzavier.scrollLeft; //获取滚动内容左方的位置

滚动条回顶部

function scrollStart(element) {
    if (element.scrollTop != 0) element.scrollTop = 0;
}

document对象属性

属性                      说明
document.title             设置文档标题
document.linkColor         未点击过的连接颜色
document.alinkColor        激活连接的颜色
document.vlinkColor        已点击过的连接颜色
document.URL               设置URL属性
document.fileSize          文件大小，只读属性
document.cookie            设置和读取cookie
document.charset           设置字符集

通常来讲用的多的也就title，URL，cookie，charset等，其余的就不列了。

先写这么些，打篮球去了。代码，篮球，生活...DOM有太多内容了，多多学习，多多总结