JavaScript学习笔记——DOM基础 2.2

| 阅读数:--次| 作者: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>

 

三、题外话

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

返回顶部
学到老代码浏览 关闭浏览