节点（Node）的类型(nodeType)

真实值     常量1        Node.ELEMENT_NODE2        Node.ATTRIBUTE_NODE3        Node.TEXT_NODE4        Node.CDATA_SECTION_NODE5        Node.ENTITY_REFERENCE_NODE6        Node.ENTITY_NODE7        Node.PROCESSING_INSTRUCTION_NODE8        Node.COMMENT_NODE9        Node.DOCUMENT_NODE10       Node.DOCUMENT_TYPE_NODE11       Node.DOCUMENT_FRAGMENT_NODE12       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("
     
");document.appendChild(div1);

 

动态加载JS和CSS

js

//添加文本JSfunction 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}"); }