Javascript 之 DOM

Document　　Object　　Model

获取DOM节点

var id = document.getElementById('dom');　　// 一个元素
var tagName = document.getElementsByTagName('a');　　// 元素的集合
var className = document.getElementsByClassName('dom');　　// 元素的集合
var domList = document.querySelectorAll('p');　　// 元素的集合

property 和 attribute

<div id="dom" class="div-dom">
　　<p id="p" data-name="p-data-name">this is p!</p>
</div>

// property　　标准的js对象的属性操作
var dom = document.getElementById('dom');
console.log(dom.className);　　// 'div-dom'

//attribute　　对 html 标签属性（包括自定义属性，如data-xxx）操作　　获取 getAttribute()　　设置 setAttribute()
var p = document.getElementById('p');
console.log(p.getAttribute('data-name'));　　// 'p-data-name'
p.setAttribute('data-name', 'div-data-name');

新增节点

var p = document.createElement('p');
document.body.appendChild(p);

insertBefore()　　// 在某个元素节点前插入节点，接收两个参数，第一个为待插入的节点，第二个为在哪个节点前插入，如果第二个参数不传，则与 appendChild 方法一样，在最后插入

replaceChild()　　// 替换某个子节点，接收两个参数，第一个为将要代替的新节点，第二个为将要被替换的旧节点

移动节点

var dom = document.getElementById('dom');
document.body.appendChild(dom);　　// 把 dom 从原来的位置移动到添加位置

获取父元素

var dom = document.getElementById('dom');
var parent = dom.parentElement;　　// 一个父元素

获取子元素

var dom = document.getElementById('dom');
var child = dom.childNodes;　　// 子元素集合

删除节点

var dom = document.getElementById('dom');
var child = dom.childNodes;
dom.removeChild(child[0]);

 节点遍历

parentNode　　// 获取当前节点的父节点
childNodes　　// 获取当前节点的子节点集合(数组形式)
firstChild　　// 获取当前节点的第一个子节点
lastChild　　// 获取当前节点的最后一个子节点
nextSibling　　// 获取当前节点的下一个兄弟节点
previoursSibling　　// 获取当前的上一个兄弟节点
nodeType　　// 节点类型：9表示Document节点、1表示Element节点、3表示Text节点、8表示Comment节点、11表示DocumentFragment节点
nodeVlue　　// Text节点或Comment节点的文本内容
nodeName　　// 节点的标签名称(如：a节点的标签名称是 A)，以大写形式表示

firstElementChild　　// 第一个子元素节点
lastElementChild　　// 最后一个子元素节点
nextElementSibling　　// 下一个兄弟元素节点
previoursElementSibling　　// 前一个兄弟元素节点
childElementCount　　// 子元素节点的个数
 

 window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
1、对于 Internet Explorer、Chrome、Firefox、Opera 以及 Safari
　　window.innerHeight　　// 浏览器窗口的内部高度
　　window.innerWidth　　// 浏览器窗口的内部宽度
2、对于 Internet Explorer 8、7、6、5
　　document.documentElement.clientHeight
　　document.documentElement.clientWidth
3、或者
　　document.body.clientHeight
　　document.body.clientWidth
实用的 javascript 方案(涵盖所有浏览器)
　　var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
　　var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

 页面回到顶部或底部

document.body.scrollTop = document.documentElement.scrollTop = 0;　　// 兼容 IE、Chrome

元素的宽、高

document.body.clientHeight　　// 窗口的内部高度，包括 padding 值
document.body.clientWidth　　// 窗口的内部宽度，包括 padding 值

div.clientHeight　　// 元素的高度，包括 padding 值
div.clientWidth　　// 元素的宽度，包括 padding 值
div.clientTop 　　// 返回对象的 offsetTop 属性值和到当前窗口上边的真实值之间的距离，可以理解为边框的宽度
div.clientLeft 　　// 返回对象的 offsetLeft 属性值和到当前窗口左边的真实值之间的距离，可以理解为边框的宽度

div.offsetHeight　　// 元素的高度，包括 padding、border 值　　只读属性，不可设置
div.offsetWidth　　// 元素的宽度，包括 padding、border 值
div.offsetTop　　// 元素距离上方或上层元素的垂直位置
div.offsetLeft　　// 元素距离上层元素的水平位置 

 滚动元素、滚动元素的宽和高

当一个 div 容器包含的子元素的宽高超过 div 容器宽高，同时 div 容器设置 overflow: scroll; 样式时，可对 div 容器自身进行滚动设置
div.scrollTop　　// 元素内部向上滚动的距离
div.scrollLeft　　// 元素内部向左滚动的距离
div.scrollHeight　　// 元素内部的绝对高度(是指内部元素的实际高度加上容器自身 padding 值)
div.scrollWidth　　// 元素内部的绝对宽度(同 scrollHeight 一样)