【DOM 编程艺术】3.5 获取和设置属性

心已赠人 2022-06-08 08:39 119阅读 0赞

> getAttribute用于获取各个属性，setAttribute方法可以更改属性节点的值。

<table> 
 <tbody> 
  <tr> 
   <td><b>1.getAttribute</b></td> 
  </tr> 
 </tbody> 
</table>

getAttribute不能通过document来调用，只能通过元素节点对象调用，比如可以与getElementsByTagName方法合用。

<script type="text/javascript"> //想获取p标签的title属性： var title = document.getElementsByTagName("p"); console.log(title[0].getAttribute("title")); //a genele reminder </script>

多个元素：

<script type="text/javascript"> //想获取多个p标签的title属性： var title = document.getElementsByTagName("p"); for(var i=0;i<title.length;i++){ console.log(title[i].getAttribute("title")); } </script>

如果页面中有多个p标签，且有的p标签没有title属性，那么会输出一个null，为了不让null输出，代码可以做如下修改：

<script type="text/javascript"> var title = document.getElementsByTagName("p"); for(var i=0;i<title.length;i++){ var titleText = title[i].getAttribute("title"); if(titleText) console.log(titleText); } </script>

<table> 
 <tbody> 
  <tr> 
   <td><b>2.setAttribute</b></td> 
  </tr> 
 </tbody> 
</table>

<script type="text/javascript"> //为h1添加一个text属性，属性值是h2 var text = document.getElementsByTagName("h1"); text[0].setAttribute("text","h2"); </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 DOM编程艺术

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

绝地灬酷狼/ 2022年07月11日 07:49/ 0 赞/ 135 阅读

相关【DOM 编程艺术】3.5 获取和设置属性

> getAttribute用于获取各个属性，setAttribute方法可以更改属性节点的值。 <table> <tbody> <tr> <td><b>1

心已赠人/ 2022年06月08日 08:39/ 0 赞/ 120 阅读

相关【DOM 编程艺术】3.4 节点

> 节点分为：元素节点、文本节点和属性节点等。 <!doctype html> <html lang="en"> <head> <me

阳光穿透心脏的1/2处/ 2022年06月08日 08:38/ 0 赞/ 132 阅读

相关【DOM编程艺术】综合示例

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf

￡神魔★判官ぃ/ 2022年01月06日 06:23/ 0 赞/ 228 阅读

相关【DOM编程艺术】实时动画--进一步

if( xpos < final_x){ xpos ++; } 变量xpos是被移动元素的当前左位置，变量final\_x是这个元素的

快来打我*/ 2022年01月06日 06:23/ 0 赞/ 156 阅读

相关【DOM编程艺术】style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年01月06日 06:23/ 0 赞/ 235 阅读

相关【DOM编程艺术】显示"快捷键清单"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

╰半夏微凉°/ 2022年01月06日 06:21/ 0 赞/ 177 阅读

相关【DOM编程艺术】XMLHttpRequest对象

Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而Javascript通过这

ゞ浴缸里的玫瑰/ 2022年01月06日 06:21/ 0 赞/ 199 阅读

相关【DOM编程艺术】图片库再次改进

图片库中一个图片和一段文字仅仅是为showpic脚本服务的。若能把结构和行为彻底分开那最好不过了。既然这些元素的存在只是为了让DOM方法处理它们，那么用DOM

╰+哭是因爲堅強的太久メ/ 2022年01月06日 06:19/ 0 赞/ 190 阅读

相关 JavaScript Dom 编程艺术阅读笔记

1、最高效的声明方式：var mood="happy",age=33; 2、通常情况下驼峰格式是函数名、方法名、对象属性名命名的首选转载于:https://www.cnb

逃离我推掉我的手/ 2021年11月29日 23:12/ 0 赞/ 236 阅读