JavaScript中获取和修改元素属性的值

发布时间：2023-01-01 14:30:47 来源：互联网

.

我是人们烈日炎炎口中的一滴水；我是水桶里的一注清泉；我是大海里的一阵水花。有人喜欢茫茫的大雪，有人喜欢如丝的细雨，可是我喜欢那迷人的雾。

在上一篇关于《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中获取和修改元素属性的值内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： JS教程 JavaScript JS