您当前的位置:首页 > 网站建设笔记 >

javascript取得HTML元素的特性

0

每个元素都有一或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用,包括那些以HTMLElement类型属性的形式定义的特性。来看下面的例子:

var div=document.getElementById("myDiv");
alert(div.getAttribute("id"));
alert(div.getAttribute("class"));
alert(div.getAttribute("title"));
alert(div.getAttribute("lang"));
alert(div.getAttribute("dir"));

注意,传递给getAttribute()的特性名与实际的特性名相同。因此要想得到class特性值,应该传入class而不是className,后者只有在通过对象属性访问特性时才用。如果给定名称的特性不存在,getAttribute()返回null。通过getAttribute()方法也可以取得自定义特性(即标准HTML语言中没有的特性)的值,以下面的元素为例:

<div id="myDiv" my_special_attribute="hello!"></div>

这个元素包含一个名为my_special_attribute的自定义特性,它的值是hello!。可以像取得其他特性一样取得这个值:
var value=div.getAttribute("my_special_attribute");
不过,特性的名称是不区分大小写的,即ID和id代表的都是同一个特性。另外也要注意,根据HTML5规范,自定义特性应该加上data-前缀以便验证。任何元素的所有特性,也都可以通过DOM元素本身的属性来访问。当然,HTMLElement也会有5个属性与相应的特性一一对应。不过,只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中。以下面的元素为例:

<div id="myDiv" align="left" my_special_attribute="hello!"></div>

因为id和align在HTML中是<div>的公认特性,因此该元素的DOM对象中也将存在对应的属性。不过,自定义特性my_special_attribute在Safari、Chrome、Firefox及Opera中是不存在的,但IE却会为自定义特性也创建属性,如下面的例子所示:

<script type="text/javascript">
(function(){
  var myDiv=document.createElement("div");
  myDiv.setAttribute("id","myDiv");
  myDiv.setAttribute("align","left");
  myDiv.setAttribute("my_special_attribute","hello!");
  document.body.appendChild(myDiv);
  LS.log.write(myDiv.id);
  LS.log.write(myDiv.my_special_attribute);  //undefined(IE除外)
  LS.log.write(myDiv.align);
})();
</script>

有两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()方法返回的值并不相同。第一类特性就是style,用于通过CSS为元素指定样式。在通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会返回一个对象。由于style属性是用于以编程方式访问元素样式的,因此并没有直接映射到style特性。第二类与众不同的特性是onclick这样的事件处理程序。当在元素上使用时,onclick特性中包含的是JavaScript代码,如果通过getAttribute()访问,则会返回相应代码的字符串。而在访问onclick属性时,则会返回一个JavaScript函数(如果未在元素中指定相应特性,则返回null)。这是因为onclick及其他事件处理程序属性本身就应该被赋予函数值。由于存在这些差别,在通过JavaScript以编程方式操作DOM时,开发人员经常不使用getAttribute(),而是只使用对象的属性。只有在取得自定义特性值的情况下,才会使用getAttribute()方法。

在IE7及以前版本中,通过getAttribute()方法访问style特性或onclick这样的事件处理特性时,返回的值与属性的值相同。换句话说,getAttribute("style")返回一个对象,而getAttribute("onclick")返回一个函数。虽然IE8已经修复了这个bug,但不同IE版本间的不一致性,也是导致开发人员不使用getAttribute()访问HTML特性的一个原因。

自定义数据属性

HTML5规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以data-开头即可。来看一个例子:

<div id="myDiv" data-appid="12345" data-myname="Nicholas"></div>

添加了自定义属性之后,可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例,也就是一个名值对儿的映射。在这个映射中,每个data-name形式的属性都会有一个对应的属性,只不过属性名没有data-前缀(比如,自定义属性是data-myname,那映射中对应的属性就是myname)。

<script type="text/javascript">
document.getElementById("jsButton2").onclick=function(event){
  var div=document.getElementById("myDiv");
  //取得自定义属性的值
  LS.log.write(div.dataset.appid);
  LS.log.write(div.dataset.myname);
  //设置值
  div.dataset.appid=2345;
  div.dataset.myname="wangzhanchengxu.com";
  if(div.dataset.myname){
    LS.log.write("welcome to "+div.dataset.myname);
  }
};
</script>

如果需要给元素添加一些不可见的数据以便进行其他处理,那就要用到自定义数据属性。在跟踪链接或混搭应用中,通过自定义数据属性能方便地知道点击来自页面中的哪个部分。

建站咨询

咨询热线

微信交流

返回顶部