Dom-Element对象

常用的节点类型有

节点类型	数值常量	字符常量
Element(元素节点)	1	ELEMENT_NODE
Attr(属性节点)	2	ATTRIBUTE_NODE
Text(文本节点)	3	TEXT_NODE
Comment(注释节点)	8	COMMENT_NODE
Document(文档节点)	9	DOCUMENT_NODE
DocumentType(文档类型节点)	10	DOCUMENT_TYPE_NODE
DocumentFragment(文档片段节点)	11	DOCUMENT_FRAGMENT_NODE

element.tagName 对象的标签名称

var element = document.getElementById("div1");

alert(element.tagName); //输出对象的标签名称。

if (element.tagName.toLowerCase() == "div") { //判断是否为某一标签时，需要小写转换。

    alert(1);

}

element.id;

element.className;

element.title;

element.lang;

element.dir;//对齐方式，

getAttribute() setAttribute() removeAttribute()方法：

alert(div.getAttribute("id"));

div.setAttribute("data-value", "2");

alert(div.getAttribute("data-value"));

div.removeAttribute("data-value");

 

 

createElement方法

var div = document.createElement("div");

div.id = "div2";

div.className = "box1";

var divString = document.createElement("<div>adsf</div>");  //只在IE中可以使用

document.body.appendChild(divString);

splitText()方法

方法传入一个参数，参数代表截取的长度，从0开始。

　　　　　　　var div = document.createElement("div");

            div.id = "div2";

            div.className = "box1";

            var textNode = document.createTextNode("Hello world");

            div.appendChild(textNode);

            div.firstChild.splitText(5);

Comment类型

在dom中注释是通过comment类型表示的。他的noteType值是8

CDATASection类型

CDATASection类型只针对于xml的文档，表示的是CDATA区域。noteType的值是4

DocumentFragment类型

在文档中没有与之对应的标记，他是一种轻量级的文档。可以最为一个仓库来使用。

 var frag = document.createDocumentFragment();
            for (var x = 0; x < 10; x++) {
                var li = document.createElement("li");
                li.innerHTML = "List Item " + x;
                frag.appendChild(li);
            }
            document.getElementById("list").appendChild(frag);

 

动态添加脚本

对于某个外部的js文件可以动态的进行加载，也就是说当满足某个条件才开始加载js文件，不满足不是不被加载的。

　　　　　　　var script = document.createElement("script");

            script.type = "text/javascript";

            script.src = "client.js";

            document.body.appendChild(script);

 

先创建一个script对象，然后指定好属性之后再添加到页面中，在未执行appendChild前，是不会进行加载的。

动态样式

　　　　　　　var link = document.createElement("link");

            link.rel = "stylesheet";

            link.type = "text/css";

            link.href = "style.css";

            var head = document.getElementsByTagName("head")[0];

            head.appendChild(head);

nodeList

理解nodeList和NamedNodeMap和HTMLCollection三个对象可以从整体上更透彻的理解dom的关键，这三个对象都是动态的更新的。nodeList是实时进行更新的，也就是说如果遍历这个对象，并在循环内对这个对象进行元素的添加，是会导致死循环的，如：

var divs = document.getElementsByTagName("div");

            var i;

            var div;

 

            for ( i = 0; i < divs.length; i++);

            {

                div = document.createElement("div");

                document.body.appendChild(div);

            }

上面的方法在谷歌中，并没有出现死循环，下面的方法可以避免导致死循环

 

var divs = document.getElementsByTagName("div");

            var i;

            var div;

            var len;

 

            for (i = 0, len = divs.length; i < len; i++);

            {

                div = document.createElement("div");

                document.body.appendChild(div);

            }

 

 

 

节点类型	数值常量	字符常量
Element(元素节点)	1	ELEMENT_NODE
Attr(属性节点)	2	ATTRIBUTE_NODE
Text(文本节点)	3	TEXT_NODE
Comment(注释节点)	8	COMMENT_NODE
Document(文档节点)	9	DOCUMENT_NODE
DocumentType(文档类型节点)	10	DOCUMENT_TYPE_NODE
DocumentFragment(文档片段节点)	11	DOCUMENT_FRAGMENT_NODE