JavaScript DOM知识 （一）

特性、方法	类型、返回类型	说明
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