节点层次
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。
访问元素的标签名nodeName 和tagName 这两个属性会返回 相同的值
在 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");