目录：
获取到所需元素后，可以利用 getAttribute 获取它的各个属性，利用 setAttribute 更改属性节点的值。
（获取元素相关笔记：https://www.cnblogs.com/xiaoxuStudy/p/12814869.html#five ）
参数是打算查询的属性的名字。
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 方法不属于 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>
控制台输出：
