| 特性、方法 | 类型、返回类型 | 说明 |
| nodeName | String | 节点的名字；根据节点类型而定义 |
| nodeValue | String | 节点的值；根据节点的类型而定义 |
| nodeType | Number | 节点的类型常量值之一 |
| ownerDocument | Document | 返回元素的根节点 |
| fristChild | Node | 指向在childNodes列表的第一个节点 |
| lastChild | Node | 指向在chilidNodes列表的最后一个节点 |
| ChildNodes | NodeList | 所有子节点的列表 |
| previousSibling | Node | 返回选定节点的上一个同级节点，若没有返回null |
| nextSibling | Node | 返回选定节点的下一个同级节点，若没有返回null |
| hasChildNodes() | Boolean | 返回当前元素是否还有子节点 |
| appendChild(node) | node | 将node添加到childNodes的末尾 |
| removeChild(node) | node | 从childNodes中删除node |
| replaceChild(new,old) | Node | 将childNodes中的old替换成new |
| insertBefore | Node | 在已有子节点之前插入新的节点 |
2、nodeType返回的节点类型
---元素节点返回1
---属性节点返回2
---文本节点返回3
3、innerHTML 和 nodeValue
对于文本节点，nodeValue 属性包含文本；
对于属性节点，nodeValue 属性包含属性值；
nodeValue 属性对于文档节点和元素节点是不可用的。两者区别：
box.childNodes[0].nodeValue = '<strong>abc</strong>'; //结果为: <strong>abc</strong> box.innerHTML = '<strong>abc</strong>'; //结果为: abc
4、tagName
document.getElementByTagName(tagName)：返回一个数组，包含对这些结点的引用
getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。
document.getElementsByTagName('*');//获取所有元素
PS：
IE浏览器在使用通配符的时候，会把文档最开始的html的规范声明当作第一个元素节点。
document.getElementsByTagName('li');//获取所有 li 元素，返回数组 document.getElementsByTagName('li')[0];//获取第一个 li 元素，HTMLLIElement document.getElementsByTagName('li').item(0);//获取第一个 li 元素，HTMLLIElement document.getElementsByTagName('li').length;//获取所有 li 元素的数目
5、节点的绝对引用：
返回文档的根节点：document.documentElement 返回当前文档中被击活的标签节点：document.activeElement 返回鼠标移出的源节点：event.fromElement 返回鼠标移入的源节点：event.toElement 返回激活事件的源节点：event.srcElement
6、节点的相对引用：(设当前对节点为node)
返回父节点：node.parentNode || node.parentElement（IE） 返回子节点集合（包含文本节点及标签节点）：node.childNodes 返回子标签节点集合：node.children 返回子文本节点集合：node.textNodes 返回第一个子节点：node.firstChild 返回最后一个子节点：node.lastChild 返回同属下一个节点：node.nextSibling 返回同属上一个节点：node.previousSibling
7、节点信息
是否包含某节点：node.contains() 是否有子节点node.hasChildNodes()
8、创建新节点
createDocumentFragment()－－创建文档碎片节点 createElement(tagname)－－创建标签名为tagname的元素 createTextNode(text)－－创建包含文本text的文本节点
9、获取鼠标单击事件的位置var mouseClick = function(e) { var e = e || window.event; //兼容IE var x = 0, y = 0; if(e.pageX) { x = e.pageX; y = e.pageY; } else if(e.clicentX) { var offsetX = 0, offsetY = 0; if(document.documentElement.scrollLeft) { offsetX = document.documentElement.scrollLeft; offsetY = document.documentElement.scrollTop; } else if(document.body) { offsetX = document.body.scrollLeft; offsetY = document.body.scrollTop; } x = e.clientX + offsetX; y = e.clientY + offsetY; } console.log("你点击的位置是" + x + "," + y); }; document.onclick = mouseClick;
这里我们需要解析下，请看javascript中的scroll事件中解释道，有部分浏览器对scroll事件的实现方式不一样；
三个概念： pageX,clientX,screenX的区别：
1、clientX,clientY表示事件发生时鼠标指针在视口中的水平坐标和垂直坐标：如图
2、pageX,pageY表示在页面中的坐标位置，即在body中的位置；
3、screenX和screenY：鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通过screenX和screenY属性可以确定鼠标事件发生时鼠标指针相对整个电脑屏幕的坐标；
问题一：Firefox，Chrome、Safari和IE9都是通过非标准事件的pageX和pageY属性来获取web页面的鼠标位置的。pageX/Y获取到的是触发点相对文档区域左上角距离，以页面为参考点，不随滑动条移动而变化
问题二：在IE 中，event 对象有 x, y 属性（事件发生的位置的 x 坐标和 y 坐标）火狐中没有。在火狐中，与event.x 等效的是 event.pageX。event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
offsetX:IE特有，chrome也支持。鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
问题三：scrollTop为滚动条向下移动的距离，所有浏览器都支持document.documentElement。
其余参照：http://segmentfault.com/a/1190000002559158#articleHeader11