javaScript getAttribute 以及 相关的操作

本文详细介绍了DOM操作中的getAttribute()和setAttribute()方法,解释了如何通过这些方法查询和设置HTML元素的属性值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

getAttribute()方法 ●一份文档就是一棵节点树。 ●节点分为不同的类型:元素节点、属性节点和文本节点等。 ●getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点。 ●getElementsByTagName()方法将返回一个对象数组,它们分别对应着文档里的一个特定的元素节点。 ●这些节点中的每个都是一个对象。 接下来,我们将向大家介绍几个与这些对象相关联的属性和方法。 3.4.1 getAttribute()方法 至此,我们已经向大家介绍了两种检索特定元素节点的办法:一种是使用getElementById()方法,另一种是使用getElementsByTagName()方法。在找到那个元素后,我们就可以利用getAttribute()方法把它的各种属性的值查询出来。 getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字: object.getAttribute(attribute)不过,getAttribute()方法不能通过document对象调用,这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。(我们是因为利用ajax返回了一个xml的对象,发现 xml dom 和 html dom不一样) 例如,你可以把它与getElementsByTagName()方法结合起来,去查询每个

元素的title属性,如下所示: var text=document.getElementsByTagName("p") for (var i=0;i<TEXT.LENGTH;I++) “购物清单”文档里只有一个带有title属性的

元素。假如这份文档还有一个或更多个不带title属性的

元素,则相应的getAttribute("title")调用将返回null。null是JavaScript语言中的空值,其含义是“你说的这个东西不存在”。如果你们想亲自验证一下这件事,请先把下面这段文本插入到“购物清单”文档中的现有文本段落之后:

(插入)

 

--说明:node值就是下面的person节点 ,prop 是属性如:id

//根据节点获取值
function getValueByProp(node,prop) {
 return (node.getElementsByTagName(prop))[0].firstChild.nodeValue;
}
/*
 <person>
    <id>13</id>
    <name>张曼玉</name>
    <salary>14000.0</salary>
    <age>34</age>
  </person>

*/

 

 

 

(插入)

This is just test

然后重新加载这个页面。这一次,你们将看到两个alter对话框,而第二个对话框将是一片空白或者是只显示着单词“null”——具体情况要取决于你的Web浏览器将如何显示null值。 可以修改我们的脚本,让它只在title属性存在时才弹出一条消息。我们将增加一条if语句来检查getAttribute()方法的返回值是不是null。趁着这个机会,我们还增加了几个变量以提高脚本的可读性: var ts=document.getElementsByTagName("li"); for (var i=0; i<TS.LENGTH;I++) gentle } { 在“购物清单”示例文档里,<p 在上例中,我们设置了一个现有节点的title属性,但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作:先把这个属性创建出来,然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上,这个属性的当前值将被覆盖。 goods”消息。 of list 上面这些语句将在屏幕上弹出两个alert对话框:第一个alter对话框出现在setAttribute()方法被调用之前,它将是一片空白或显示着单词“null”;第二个出现在title属性值被设置之后,它将显示着“a alert(shopping.getAttribute(?title?)); goods?); shopping.setAttribute(?title?,?a shopping='document.getElementById("purchases")' var 我们可以利用getAttribute()方法来证明这个元素的title属性值确实发生了变化: goods?) goods: 在下面的例子里,第一条语句将把id属性值是purchase的元素检索出来,第二条语句将把这个元素的title属性值设置为a obiect.setAttribute(attribute,value) 类似于getAttribute()方法,setAttribute()方法也是一个只能通过元素节点对象调用的函数,但setAttribute()方法需要我们向它传递两个参数: 我们此前介绍给大家的所有方法都只能用来检索信息。setAttribute()方法与它们有一个本质上的区别:它允许我们对属性节点的值做出修改。 3.4.2 setAttribute()方法 alert(text) if(text) {text='ts[i].getAttribute("title");' i元素已经有了一个title属性,这个属性的值是a gentle reminder。我们可以用setAttribute()方法来改变它的当前值:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值