Element类型
Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征:
nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode的值为Document或Element
其子节点可能是Element、Text、CDATASection、EntityReference、ProcessingInstruction或者Comment
要访问元素的标签名,可以使用nodeName属性、也可以使用tagName属性;这两个属性会返回相同的值
1
可以像下面这样取得这个元素以及标签名
1 var div = document.getElementById('myDiv');2 console.log(div.nodeName); //"DIV"3 console.log(div.tagName == div.nodeName); //true
div.tagName实际上输出的是大写形式,通常转换为小写形式
1 if (element.tagName.toLowerCase() == "div"){//这样最好2 //在此执行操作3 }
1、HTML元素
所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。每个HTML元素都存在下列标准特性:
id,元素在文档中的唯一标识符。
title,有关元素的附加说明信息,一般通过工具提示条显示出来。
lang,元素内容的语言代码,很少使用。
dir,语言的方向
className,与元素的class特性相对应
1 2 3 var div = document.getElementById('myDiv');4 console.log(div.id); //myDiv5 console.log(div.className); //bd6 console.log(div.title); //BOdy text7 console.log(div.lang); //en8 console.log(div.dir); //ltr
当然也可以给他们赋予新值
2、取得特性
操作特性的DOM方法主要有三个:getAttribute()、setAttribute()、removeAttribute()
1 var div = document.getElementById('myDiv');2 console.log(div.getAttribute('id'));//myDiv3 console.log(div.getAttribute('class')); //bd4 console.log(div.getAttribute('title')); //BOdy text5 console.log(div.getAttribute('lang')); //en6 console.log(div.getAttribute('dir'));//ltr
如果给定的名称特性不存在,则返回null;
通过getAttribute()方法也可以取得自定义特性,例如:
1 2 var value = div.getAttribute('my_special_attribute');
任何元素的所有特性,也都可以通过DOM元素本身的属性来访问。不过只有公认的特性才会以属性的形式添加到DOM对象中。
1
因为id和align在HTML中是
自定义特性也创建属性,例如:
1 console.log(div.id) //myDiv2 console.log(div.my_special_attribute) //underfined(IE除外)
有两类特殊的特性,他们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不相同。第一类就是style,在通过getAttribute()访问时,返回的是css文本,而通过属性来访问他则返回的是一个对象。第二类就是onclick这样的时间处理程序。通过getAttribute()访问时,返回的是相应代码的文本,而通过属性来访问时,则会返回一个JavaScript函数