JS之dom操作getAttribute()方法

最新推荐文章于 2023-11-24 23:47:45 发布

原创最新推荐文章于 2023-11-24 23:47:45 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #DOM属性 #操作

javascript 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了如何使用getAttribute()和setAttribute()方法来获取和设置HTML元素的属性值。通过具体实例展示了如何利用这些方法实现对页面中特定元素属性的操作。

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

getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

demo：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>   
<p id="intro">课程列表</p>  
    <ul>  
        <li title="第1个li">HTML</li>  
        <li>CSS</li>  
        <li title="第3个li">JavaScript</li>  
        <li title="第4个li">Jquery</li>  
        <li>Html5</li>  
    </ul>  
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
    var con=document.getElementsByTagName("li");
    for (var i=0; i< con.length;i++){
      var text=con[i].getAttribute("title");//使用getAttribute()方法，获取LI标签的title值
      if(text!=null)
      {
        document.write(text+"<br>");
      }
    } 
 </script> 
</body>
</html>

运行结果：

课程列表

    HTML
    CSS
    JavaScript
    Jquery
    Html5

以下为获取的不为空的li标签title值:
第1个li
第3个li
第4个li

setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意：

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
  <p id="intro">我的课程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
  var liatt = document.getElementsByTagName("li");
  for(var i = 0;i < liatt.length;i++) {
        var tit = liatt[i].getAttribute("title");
        if(tit != "") {
                document.write(tit + "<br/>");
            }
            else
            {
                liatt[i].setAttribute("title","web前端技术");
                document.write("new" + liatt[i].getAttribute("title") + "<br/>");
            }
      }
</script>
</body>
</html>