DOM

节点层次

nodeName 和 nodeValue 属性

if(someNode.nodeType == 1)

{

//先确定是个元素

value = someNode.nodeName; //nodeName 的值是元素的标签名

}

对于元素节点,nodeName 中保存的始终都是元素的标签名,而 nodeValue 的值则始终为 null。


节点关系

每个节点都有一个 **childNodes **属性,其中保存着一个 **NodeList **对象。**NodeList **是一种类数组 对象,用于保存一组有序的节点

val.childNodes[0] //如果是标签之间有空隙 默认为文字 打印出 #text

子节点

nextSibling

previousSibling

父节点

firstChild

lastChild

查看是否有子节点

val.hasChildNodes() //boolean

操作节点

**appendChild()**和 **insertBefore()**方法都只插入节点

**replaceChild()**方法接受的两个参数是:要插入的节点和要替换的节点。尽管从技术上讲,被替换的节点仍然还在文档中,但它在文档中已经没有了自己的位置

removeChild() 即要移除 的节点。被移除的节点将成为方法的返回值

cloneNode() 用于创建调用这个方法的节点 的一个完全相同的副本,接受一个布尔值参数,表示是否执行深复制

Document类型

 nodeType 的值为 9;

 nodeName 的值为"#document";、

 nodeValue 的值为 null;

 parentNode 的值为 null;

 ownerDocument 的值为 null;

 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或 Comment。

//设置文档标题

document.title = "New page title";

//取得完整的 URL

var url = document.URL;

//取得域名

var domain = document.domain;

//取得来源页面的 URL

var referrer = document.referrer;


星号(*)通常表示“全部”。

var allElements = document.getElementsByTagName("*"); 

在 IE 中调用getElementsByTagName("*")将会返回所有注释节点

Element类型

 nodeType 的值为 1;

 nodeName 的值为元素的标签名;

 nodeValue 的值为 null;

 parentNode 可能是 Document 或 Element;

 其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。

访问元素的标签名nodeNametagName 这两个属性会返回 相同的值

在 HTML 中,标签名始终都以全部大写表示

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

取得特性

getAttribute()

div.getAttribute("id") //取得这个元素的特征值

特性的名称是不区分大小写的

自定义特性应该加上 data-前缀以便验证(用轮播图的时候自定义特性)

设置特性

setAttribute()

这个方法接受两个参数:要设置的特性名和 值。如果特性已经存在,setAttribute()会以指定的值替换现有的值

通过这个方法设置的 特性名会被统一转换为小写形式,即"ID"最终会变成"id"

div.mycolor = "red"; 

 alert(div.getAttribute("mycolor")); //null(IE 除外) 因此想通过 getAttribute()取得同名特性的值,结果会返回 null

***removeAttribute()***用于彻底删除元素的特性

div.removeAttribute("class");

attributes 属性