HTML DOM getAttribute() 方法

夜不眠，码三千

于 2023-11-24 23:47:45 发布

阅读量449

点赞数 13

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_74064480/article/details/134608462

版权

目录

1、 getAttribute()的作用、用法

2、语法

3、语法分析（参数）

4、实际应用

5、注意事项

6、总结

1、 getAttribute()的作用、用法

作用：getAttribute() 方法通过名称获取属性的值。
用法：元素.getAttribute('属性')

2、语法

element.getAttribute(attributename)

注意：attributename要带引号

3、语法分析（参数）

element:你想获取的属性值的所属元素；（必）

getAttribute：getAttribute()方法名称；（必）

attributename：你想获取的属性值；（必）

4、实际应用

eg.获取标签img中src属性值

预期结果：是一段图片的相对位置

1、使用getAttribute()方法获得src;
<body>
    
    <img src="./images/主图-3.jpg" alt="例图" width="200px" />
    <script>
      //获取img标签元素
      let demoImg = document.querySelector("img");
      //console.log(demoImg.src);
      //打印输出src
      console.log(demoImg.getAttribute("src"));
    </script>
  </body>
运行结果：运行结果与预期结果相符；

2、不使用getAttribute()方法获得src;
<body>
    
    <img src="./images/主图-3.jpg" alt="例图" width="200px" />
    <script>
      //获取img标签元素
      let demoImg = document.querySelector("img");
      //打印输出src
      console.log(demoImg.src);
    </script>
  </body>
运行结果：运行结果是一段描述图片本地位置的长代码串，虽然在特殊条件下可以使用，但是，不是我们想要的结果；