你的位置:首页 > Java教程

[Java教程]JavaScript学习笔记——DOM基础 2.2


一、获取元素的属性值

当你获取到你想要的元素,这并不是你的最终目的,下一步你需要获取这个元素的属性。

1、getAttribute方法

它的语法:object.getAttribute(attribute); 它返回的是你当前查找的元素的某一属性值。

需要注意:它并不属于document对象,不能通过document对象直接调用,只能通过元素节点对象调用,对于这一点应该很好理解,如果可以通过document对象直接调用,那么getAttribute方法就没有什么存在的价值了。

还有一点,在获取元素属性值的同时,需要注意可能出现的该元素节点下没有属性的特殊情况,可以通过判断是否为null来解决。

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><ul><li title="JavaScript">JavaScript</li><li title="HTML">HTML</li><li title="CSS">CSS</li><li title="我的随笔">我的随笔</li><li>其他</li></ul></div><script>var myLabel = document.getElementsByTagName('li');for(var i=0; i<myLabel.length; i++){  var myLabelAttribute = myLabel[i].getAttribute('title');  if(myLabelAttribute != null){  alert('title的内容是:' +myLabelAttribute);  }}</script></body></html>

2、获取任意元素中任意属性值的方法

有了上面的代码,我们可以轻松的自定义一个方法来实现获取任意元素中任意属性值。 

function getMyLabelAttribute(labelName,labelAttribute){  var myLabel = document.getElementsByTagName(labelName);    for(var i = 0; i<myLabel.length; i++){    var myLabelAttribute = myLabel[i].getAttribute(labelAttribute);    if(myLabelAttribute){      alert(labelName + '中' + labelAttribute + '的内容是' + myLabelAttribute);    }}}getMyLabelAttribute('li','title');

需要注意的是,自定义函数中,if的condition去掉了原来的!= null,两者是等价的关系,意思都是不为空。

二、设置元素的属性值

setAttribute方法

语法:object.setAttribute( attribute, value);

用来更改目标元素的属性值,与getAttribute相同,setAttribute也是作用于元素节点。

var myLabel = document.getElementsByTagName('li');alert(myLabel[4].getAttribute('title'));var newAttribute = myLabel[4].setAttribute('title', 'JavaScript是一种若类型的编程语言');alert(myLabel[4].getAttribute('title'));

通过上面这段代码可以看出,setAttribute方法可以为元素节点创建原本没有的属性,并且可以设置它的值,正因如此,当我需要为一堆元素设置属性值的时候,我不需要知道它原来有没有这个属性和属性值。

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><ul><li title="JavaScript">JavaScript</li><li title="HTML">HTML</li><li title="CSS">CSS</li><li title="我的随笔">我的随笔</li><li>其他</li></ul></div><script>var myLabel = document.getElementsByTagName('li');for(var i=0; i<myLabel.length; i++){  var newLabelAttribute = [0,1,2,3,4];  myLabel[i].setAttribute('title',newLabelAttribute[i]);  alert(myLabel[i].getAttribute('title'));}</script></body></html>

三、题外话

只有基本功扎实,才可能发挥出你的潜质来。