获取和设置属性 - xiaoxustudy

获取和设置属性

目录：

1、getAttribute

2、setAttribute

获取到所需元素后，可以利用 getAttribute 获取它的各个属性，利用 setAttribute 更改属性节点的值。

（获取元素相关笔记：https://www.cnblogs.com/xiaoxuStudy/p/12814869.html#five ）

getAttribute

参数是打算查询的属性的名字。

getAttribute 方法不属于 document对象，不能通过 document 对象调用。

通过元素节点对象调用 getAttribute 方法。

如果属性不存在则返回 null。

下面举个例子，实现：① 获取每个 <li> 元素的 title 属性并且输出，如果不存在则不输出。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <title>ToDo list</title>
 6     </head>
 7     <body>
 8         <div>
 9             <h1>待办清单</h1>
10             <p title="reminder">记得要做：</p>
11             <ul id="todo">
12                 <li title="buyVegetables">买菜</li>
13                 <li>做饭</li>
14                 <li title="mop">拖地</li>
15             </ul>
16             <script>
17                 var item1 = document.getElementsByTagName("li");
18                 for(let i=0; i<item1.length; i++){
19                     var title_text = item1[i].getAttribute("title");
20                     if( title_text ){    //title_text 与 title_text!=null 完全等价 
21                         console.log( title_text );
22                     }
23                 }
24             </script>
25         </div>
26     </body>
27 </html>

控制台输出：

setAttribute

第一个参数：打算修改的属性的名字

第二个参数：修改后的属性值

setAttribute 方法不属于 document对象，不能通过 document 对象调用。

通过元素节点对象调用 setAttribute 方法。

下面举个例子，实现：① 获取全部带有 title 属性的 li 元素，将它们的属性值全都修改为 ”快点做嗷~“。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <title>ToDo list</title>
 6     </head>
 7     <body>
 8         <div>
 9             <h1>待办清单</h1>
10             <p title="reminder">记得要做：</p>
11             <ul id="todo">
12                 <li title="buyVegetables">买菜</li>
13                 <li>做饭</li>
14                 <li title="mop">拖地</li>
15             </ul>
16             <script>
17                 var item1 = document.getElementsByTagName("li");
18                 for(let i=0; i<item1.length; i++){
19                     var title_text = item1[i].getAttribute("title");
20                     if( title_text ){    //title_text 与 title_text!=null 完全等价
21                         //属性值 title 修改为 "快点做嗷~"
22                         item1[i].setAttribute( "title", "快点做嗷~" );
23                         //查看是否修改成功
24                         console.log( item1[i].getAttribute("title") );
25                     }
26                 }
27             </script>
28         </div>
29     </body>
30 </html>

控制台输出：

posted on 2020-05-01 22:13 xiaoxustudy 阅读(180) 评论(0) 编辑收藏举报

刷新页面返回顶部