前端DOM操作指南-优快云博客

1、获取对象
document.getElementById(ID)
//获得指定ID值的对象
document.getElementsByName(Name)
//获得指定Name值的对象数组，常用获取radio,checkbox

2、坐标
var oRect=obj.getBoundingClientRect();
x=oRect.left
y=oRect.top

3、获取窗口大小,分辨率

document.body.clientWidth  
document.body.clientHeight  
  获得窗口大小（包含Border、Scroll等元素）  
  document.body.offsetWidth  
  document.body.offsetHeight

分辨率
creen.width,creen.height.
具体解释如下：

scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度） 
clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
scrollHeight: 获取对象的滚动高度。
offsetHeight:获取对象相对于版面或由父坐标  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
offsetLeft:获取对象相对于版面或由
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
offsetTop 属性指定的父坐标的计算顶端位置
offsetParent 属性指定的父坐标的高度
offsetParent 属性指定的父坐标的计算左侧位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 　　
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height 

例：如页面过长，想让id="view1"的节点显示出来。
var currentDom=document.getElementById("view1").getBoundingClientRect();
	 		if(currentDom.top>window.document.body.clientHeight){
	 			window.document.body.scrollTop=currentDom.top;
	 		}

4、dom加载顺序

1.HTML解析完毕
2.外部脚本和样式表加载完毕
3.脚本在文档内解析并执行
4.HTML DOM完全构造起来
5.图片和外部内容加载
6.网页完成加载
监听DOM加载状态

这项技术在不堵塞浏览器加载的情况下尽可能快地检查HTML DOM文档是否已经加载了执行所必须的属性。

document

document.getElementById

document.getElementsByTagName

document.body

检查这几个对象可以获知DOM的加载状态

以下代码监听DOM何时加载完毕（来自《精通JavaScript》）

function domReady(func) {
    // 假如DOM已经加载，马上执行函数
    if (domReady.done) return func();
    
    // 假如我们已经增加了一个函数
    if (domReady.timer) {
        // 把它加入到待执行函数清单中
        domReady.ready.push(func);
    }
    else {
        // 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数
        // addEvent函数为由Dean Edwards编写的著名函数
        addEvent(window, "load", isDOMReady );
        
        // 初始化待执行函数的数组
        domReady.ready[ func ];
        
        // 尽可能快地检查DOM是否已可用
        domReady.timer = setInterval(isDOMReady, 13);
    }
};

//检查DOM是否已可操作
function isDOMReady() {
    // 如果我们能判断出DOM已可用，忽略
    if (domReady.done) return false;
    
    // 检查若干函数和元素是否可用
    if (document && document.getElementsByTagName && document.getElementById && document.body) {
        // 如果可用，我们可以停止检查
        clearInterval(douReady.timer);
        domReady.timer = null;
        
        // 执行所有正等待的函数
        for (var i = 0; i < domReady.ready.length; i++)
            domReady.ready[i]();
            
        // 记录我们在此已经完成
        domReady.ready = null;
        domReady.done = true;
    }
}

5、增加对象

/*创建新层*/
var div_view=document.createElement("div");
也可这样创建 document.createElement("<div></div>");
设置样式:div_view.className="";
设置ID：div_view.id="div1";
设置div显示内容：div_view.innerHTML="test";
innerHTML即div里的内容。例<div id="div1">test1</div>,div1.innerHTML则是"test1"
outerHTML则是整个div。例div1.outerHTMl是"<div id=div1>test1</div>".
注意，innerHTML和outerHTML均会把",'去掉。
/*创建table,插入行，列*/
var table=document.createElement("table");
var trow=table.insertRow();插入行到最后。
var trow=table.insertRow(1);插入到第2行。
var rowLength=table.rows.length;获取table的总行数
var tcell=row.insertCell();插入一列
tcell.innerHTML="insert row";设置列内容
其他的创建方式类似。
document.body.appendChild(div_view);把层添加到body中，这样才会在页面中显示增加的层。

6、frame
window.frames["frameName"]获取frame的window对象
7、select

当前选中的option:select.options[select.selectedIndex]
所有options:select.options.返回的是option[]数组
增加option
方法1：option1=new Option(text,value);
      select.add(option1);
方法2：option2=document.createElement("option");
       option2.value=value;
       option2.text=text;
      select.add(option2);
删除option
      select.remove(option1);
删除所有option
      select.options.length=0;

DOM常用操作