JavaScript DOM知识 （一）

标签：

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

JavaScript DOM知识 （一）

标签：

原文地址：http://www.cnblogs.com/jlienzen/p/4415847.html