【JS】DOM

节点（Node）的类型(nodeType)

真实值     常量
1        Node.ELEMENT_NODE
2        Node.ATTRIBUTE_NODE
3        Node.TEXT_NODE
4        Node.CDATA_SECTION_NODE
5        Node.ENTITY_REFERENCE_NODE
6        Node.ENTITY_NODE
7        Node.PROCESSING_INSTRUCTION_NODE
8        Node.COMMENT_NODE
9        Node.DOCUMENT_NODE
10       Node.DOCUMENT_TYPE_NODE
11       Node.DOCUMENT_FRAGMENT_NODE
12       Node.NOTATION_NODE

当使用上面的常量进行接口的类型检测时在IE中会出错，所以兼容所有浏览的的检测方法应该是：

if(myNode.nodeType == 1){//使用真实值而非常量可以兼容所有浏览器
      alert(myNode.nodeName);
}

 

查找Node/Element

常用方法：getElementById/getElementsByTagName/getElementsByName

对于返回的element数组里的元素的访问方法有：nodeList[0]、nodeList.item(0)

如果想getElementsByTagName的参数传入*号，则获取到全部的文档Node。

还有一些特殊的比较常用的集合：document.forms / document.images / document.links

  

文档的写入

document.write(element) / document.writeln(element)

 

 操作节点

常用方法：

appendChild(newNode):向当前对象的文档的最后添加newNode。

insertBefore(newNode,baseNode):在baseNode前面插入newNode，如果baseNode为null则表示在最后插入newNode。

replaceChild(newNode,delNode):将newNode替换delNode。

removeChild(delNode);移除delNode。

cloneNode(boolean):复制节点,默认参数为false:即只复制节点本身，如果参数为true则复制该节点以及子节点。该方法不会复制节点的javascript事件和代码

 

操作Element的属性的方法：

获取：

对于Element本身就有的属性推荐使用:element.xxxx（例如：div.id）。

对于Element自定义的属性根据HTML5规范应该使用data-做为前缀，并且使用getAttribute("data-xxx")。

其中element.xxxx和getAttribute的区别还有：getAttribute获取的某些属性会返回属性的文本值而不是对象,例如:getAttribute("style")获取的是文本，这并不是我们想要的结果

修改：

element.xxxx = "xxx";

element.setAttribute("xxx","value");

删除

element.removeAttirbute("xxx")

遍历element的所有属性

element.attributes属性将获取一个NamedNodeMap(可以使用[index]获取里面的值)

可以使用如下方法访问具体的属性和修改属性

getNamedItem(name):返回nodeName属性等于name的节点

removeNamedItem(name):从列表中溢出nodeName等于name的节点，与removeAttribute效果相同

setNamedItem(node)：添加节点

item(index):返回位于index位置处的节点。

备注：在IE7及更早的版本中attributes可能包含100多个特性，但有很多并不是我们设置的属性，所以我可以在遍历的时候加入条件（element.attributes[i].specified == true）

 

创建元素

document.createElement();

用法1（不推荐）：

该方法在IE7及更早的版本存在一些问题，

例如：不能动态创建iframe的name属性、不能重置(reset())动态创建的input、动态创建的重置按钮不能重置表单、动态创建的redio和checkbox没有组的效果

var div1 = document.createElement("div");
div1.id = "div1";
document.appendChild(div1);

用法2（推荐）：

var div1 = document.createElement("<div id='div1'></div>");
document.appendChild(div1);

 

动态加载JS和CSS

js

//添加文本JS
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.appendChild(script);
}
//添加JS文件引用
function loadScript(src){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = src;
    document.body.appendChild(script);
}

function addScript(){
    loadScriptString("function sayHi(){alert('hi');}");
    sayHi();
    loadScript("client.js");
}

css

//动态添加文本样式
function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    } catch (ex){
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}
//动态添加样式文件
function loadStyle(src){
    var style = document.createElement("style");
    style.type = "text/css";
    style.href = src;
    style.rel = "stylesheet";
    document.getElementsByTagName("head")[0].appendChild(style);
}

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