DOM

文章目录

1. 1. 节点层次
   1. 1.1. Node 类型
   2. 1.2. Element 类型
      1. 1.2.1. 取得特性
   3. 1.3. DocumentFragment 类型
2. 2. DOM 操作技术
   1. 2.1. 动态脚本
   2. 2.2. 动态样式

节点层次

Node 类型

确定节点类型

if (someNode.nodeType == Node.ELEMENT_NODE) {    //在IE中无效
    alert("Node is an element");
}

跨浏览器兼容

if (someNode.nodeType == 1) {    //适用于所有浏览器
    alert("Node is an element");
}

可以将 NodeList 对象转为数组

//在 IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

跨浏览器兼容

function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(someNode.childNodes,0);  //针对非 IE 浏览器
    } catch (ex) {
        array = new Array();
        for (var i=0, len = nodes.length; i < len; i++) {
            array.push(nodes[i]);
        }
    }

    return array;
}

Element 类型

if (elemeent.tagName == "div") {  //不能这样比较，很容易出错！
    //在此执行某些操作
}

if (elemeent.tagName.toLowerCase() == "div") {  //这样最好(适用于任何文档)
    //在此执行某些操作
}

取得特性

在通过 JavaScript 以编程方式操作 DOM 时，开发人员经常不使用 getAttribute(),而是只使用对象的属性。只用在取得自定义特性值的情况下，才会使用 getAttribute() 方法。

DocumentFragment 类型

假设想为这个 <\ul id=”myList”><\/ul> 元素添加3个列表项。如果逐个添加列表项，将会导致浏览器反复渲染新信息。为了避免这个问题，可以像下面这样使用一个文档片段来保存创建的列表项，然后再一次性将他们添加到文档中。

var fragment = document.createDocumentFragment();
var ul = document.gtElementById("myList");
var li = null;

for (var i=0; i < 3; i++) {
    li = document.createElement("li");
    li.appendChid(document.createTextNode("Item " + (i+1)));
    fragment.appendChild(li);
}

ul.appendChild(fragment);

DOM 操作技术

动态脚本

兼容 IE 和早期版本 Safari

function loadScriptString(code) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex) {
        script.text = code;
    }
    document.body.appdendChild(script);
}

实际上，这样执行代码与在全局全局作用域中巴相同的字符串传递给eval()是一样的。

动态样式

通用的解决方案

function loadStyleString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode(css));
    } catch(ex) {
        style.styleSheet.cssText = css;    //兼容IE
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

调用这个函数的实例如下：

loadStyleString("body{background-color:red}");

如果专门针对 IE 编写代码，务必小心使用 styleSheet.cssText 属性。在重用同一个<\style>元素并再次设置这个属性时，有可能导致浏览器崩溃。同样，将 cssText 属性设置为空字符串也可能导致浏览器崩溃。