Dom对象模型

1. 文档对象

节点分为元素节点、属性节点、文本节点。

window.onload = function () {

var box = document.getElementById("box");    //通过id查找元素节点，Dom等待

alert(box.id);    //元素id值

        alert(box.tagName);    //元素名

        alert(box.innerHTML);   //元素内部html片段

        alert(box.className);  //元素css类名

        alert(box.style);   //元素style对象

} 

2. 通过getElementsByTagName获取元素集合

var box = document.getElementsByTagName('li');  //返回HTMLCollection对象

box.length   //返回元素集合长度

box[0]  or box.item[0]   //访问第一个元素

var all = document.getElementsByTagName("*");  //*代表所有元素

3. 通过getElementsByName获取元素集合

var box = document.getElementsByName("test");  //IE浏览器在非法name属性情况下，返回undefined.

4. 属性操作

var box = document.getElementById("box");

title = box.getAttribute("id");   //获取id属性，可以使用这个接口获取自定义属性

box.getAttribute("class")    //非IE浏览器获取class

box.getAttribute("className")  //IE浏览器获取class

box.setAttribute("className", "good");  //有则更新属性，没有则创建属性

box.setAttribute("style", "color:red;")   //IE浏览器7一下不支持设置style和onclick.

box.removeAttribute("title");  //IE6及以下不支持

5. 属性节点

 var box = document.getElementById("box");

box.nodeType  //1表示元素节点，2表示属性节点，3表示文本节点

box.nodeName  //等价于box.tagName

box.nodeValue  //表示属性value值

6. 层次节点属性

var box = document.getElementById("box");

box.childNodes  //所有子节点

//文本节点内容使用nodeValue获取，文本节点nodeName为#text, nodeValue赋值不可以包含html标签, innerHTML可以包含

box.firstChild  //获取第一个子节点

box.lastChild //获取最后一个节点

box.ownerDocument //返回根对象

box.parentNode  //父节点

box.previousSibling  //同级前一个节点

box.nextSibling //同级下一个节点

box.attributes //返回属性集合

box.attributes[0]  or box.attributes['title']  //可以通过下标访问，也可以通过属性名访问

box.childNodes //非IE浏览器包含空白节点，IE不包含

7.节点操作

var ele = document.createElement("p");  //创建元素节点

var box = document.getElementById("box");

var text = document.createTextNode('test div4');   //创建文本节点

ele.appendChild(text);

box.appendChild(ele);   //添加新建元素到box子元素中

box.parentNode.insertBefore(ele, box);   //插入ele到box前面

document.createElement("<input type="radio"></input>");    //IE低版本使用这种方式创建radio元素节点

var span = document.getElementsByTagName("span")[0];

var em = document.createElement("em");

span.parentNode.replaceChild(em, span);   //使用em替换span元素

var box = document.getElementById("box");    

var clone = box.firstChild.cloneNode(true);      //true克隆文本节点，false只克隆标签

box.appendChild(clone);

var box = document.getElementById("box");    

box.removeChild(box.firstChild);   //删除节点

8. 节点类型

Node.ELEMENT_NODE  //元素节点,但是IE不支持Node对象

Node.TEXT_NODE   //文本节点

9. document类型

//document表示文档节点或根节点

document.nodeType   //节点类型为9

document.nodeName  //节点标签名字为document

document.documentElement  //获取html元素节点

document.body  //获取body元素节点

document.doctype; //获取文档声明节点, IE理解为comment节点, 非IE理解为DocumentType节点

document.title;  //代表文档title

document.url;  //当前路径

document.domain; //当前域名

document.referrer;  //前一个路径

10. Text节点类型

var text1 = document.createTextNode("text1");

var text2 = document.createTextNode("text2");

box.appendChild(text1);

box.appendChild(text2);

box.normalize();  //合并同一级别的文本节点

box.childNodes[0].deleteData(0, 3);  //删除0到3的字符

box.childNodes[0].insertData(0, "hello ");  //插入字符

box.childNodes[0].replaceData(0, 2, 'hello');  //替换0到2的字符

11. dom扩展

//如果不写<!doctype>，进入怪异模式

document.compatMode;  //呈现模式

document.getElementById('box').scrollIntoView();  //使元素box滚动到可见

var box = document.getElementById("box");

box.children;   //与box.childNodes对比忽略空白节点

p = box.firstChild;

box.contains(p);  //判断p是否为box子节点，火狐低版本不支持

box.compareDocumentPosition(p);   //判断p和box之间的关系，火狐和chrome支持

12. dom操作内容

var box = document.getElementById("box");

box.innertText;  //包含文本，去掉html标签，火狐不支持, 火狐使用textContent

innerHTMLText;  //script片段是不能赋值的。