js DOM操作

1：创建节点

createElement

createTextNode

document.createDocumentFragment

2：元素查找

document.getElementById

document。getElemenstByClassName（该方法在IE6,7,8中不支持）

document.getElementsByTagName

document.getElementsByName

3:元素插入和删除,替换

removeChild(targetNode)

appendChild(targetNode)

insertBefore(newNode,targetNode)

replaceChild(newNode,targetNode)

4：属性

innerHTML

nodeName：元素是大写的标签名""BODY" 属性是属性命 文本是"#text" 文档是"#document"

nodeValue:元素是null/undefined 属性是属性值 文本是文本值

nodeType 元素1 属性2 文本3 注释8 文档9

getAttibute

setAttribute

removeAttribute

ownerDocument

attributes

5：节点遍历

firstChild

lastChild

parentNode

childNodes

nextSibling

previousSibling

hasChildNodes

6:

document 整个文档

document.documentElement访问根节点

   document.body body节点

7：

document.documentElement.clentWidth 可视区域宽度

document.documentElement.clentHeight 可视区域高度

document.body.clientWidth 页面的实际宽度

document.body.clientHeight 页面的实际高度

网页可见区域宽：document.body.offsetWidth;(包括边线的宽)

网页可见区域高：document.body.offsetHeight;(包括边线的宽)

网页正文全文宽：document.body.scrollWidth; 

网页正文全文高：document.body.scrollHeight; 

网页被卷去的高：document.body.scrollTop; 

网页被卷去的左：document.body.scrollLeft; 

网页正文部分上：window.screenTop; 

网页正文部分左：window.screenLeft; 

屏幕分辨率的宽：window.screen.width; 

屏幕分辨率的高：window.screen.height; 

屏幕可用工作区宽度：window.screen.availWidth; 

屏幕可用工作区高度：window.screen.availHeight;

8:js获取元素的样式

document.getElementById("test").style.color//这种方式只能获取到元素的style属性定义的样式，不能获取其他方式定义的样式

document.body.currentStyle?document.getElementById("test").currentStyle.color//IE

:document.defaultView.getComputedStyle(document.getElementById("test"),"").color;//其他浏览器