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 |