在上一篇关于《JavaScript中几个操作元素对象的函数方法》文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象。
今天记录两个函数可以用来获取和修改获取的元素对象的属性的值。
getAttribute()函数方法
getAttribute()是一个函数,并且它只有一个参数值,这个参数值就是你所要查询的元素对象的名字,比如元素的“title”属性等。
注意:getAttribute()不属于document(文档)对象函数方法,它只能通过元素节点对象函数调用,
比如
getELementById() getElementsByTagName() getElementsByClassName()
语法:
el.getAttribute(name); //name:必须,元素的属性的名字
类似语法:
getElementById.getAttribute("title");
例子:
获取文档中的ID属性为“li1”的列表项的“title”属性的值
HTML代码:
<ul> <li id="li1" title="feiniaomy"></li> <li></li> </ul>
JS代码:
var mochuid = document.getElementById("li1"); //获取ID为"li1"的元素对象 var mochutitle = mochuid.getAttribute("title"); //获取mochuid中的title属性的值 alert(mochutitle);//输出“title”的值
结果输出:feiniaomy
setAttirbute()函数方法
javascript中给我们提供了一个可以改变元素对象的属性的值的函数方法--setAttirbute(),它的写法和上面那个的函数写法有点想似,但一定得区分开。
setAttribute()函数与getAttribute()函数一样,只能用于元素节点对象,但是不同的是它可以改变元素节点对象的属性的值,并且它带有两个参数。
语法:
el.setAttribute(name1,name2); // name1:必须,要设置的属性名 // name2:必须,要设置的属性值
类似语法:
getElementById.setAttribute("title","mochu");
例子:
获取文档中的ID属性为“li1”的列表项的“title”属性的值,并把“title”的值改为"mochu"
HTML代码:
<ul> <li id="li1" title="feiniaomy"></li> <li></li> </ul>
JS代码:
var mochuid = document.getElementById("li1"); //获取ID为"li1"的元素对象 var mochutitle = mochuid.getAttribute("title"); //获取mochuid中的title属性的值,可省略 alert(mochutitle);//输出未改变前的值 var mochusettitle = mochuid.setAttribute("title","mochu");//改变属性的值 alert(mochusettitle);//输出改变之后的值
结果会输出:mochu
注意:如果setAttribute()方法的的第一个参数中的属性名称在元素节点对象中没有,那么就会先创建其属性而后赋值。
注:以上内容来源本博主的自学笔记,如有错误还请在下方的评论中指出,谢谢哈!
到此这篇关于JavaScript中获取和修改元素属性的值就介绍到这了。山涧的泉水经过一曲折,才唱出一支美妙的歌。更多相关JavaScript中获取和修改元素属性的值内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!