JavaScript学习笔记——DOM基础 2.2

发表于2015-08-14 11:19:58| --次阅读| 来源webkfa| 作者js,javascript

摘要：一、获取元素的属性值当你获取到你想要的元素，这并不是你的最终目的，下一步你需要获取这个元素的属性。1、getAttribute方法它的语法：object.getAttribute(attribute); 它返回的是你当前查找的元素的某一属性值。需要注意：它并不属于document对象，不能通过doc...

一、获取元素的属性值

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

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>

三、题外话

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