JS DOM获取元素属性+操作方法

最新推荐文章于 2025-03-27 20:58:18 发布

OGoodness

最新推荐文章于 2025-03-27 20:58:18 发布

阅读量8.5k

点赞数 4

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_46275230/article/details/124231507

版权

JS 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了如何使用JSDOM获取和操作HTML元素的属性，包括title、tagName、className、Nodelist.length、Nodelist.item、classList、textContent、innerText、getAttribute、setAttribute以及hasAttribute等方法，同时展示了它们在实际代码中的应用。

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

JS DOM获取元素属性+操作方法

基础属性

title属性

title是元素本身就有的属性,所以能获得

<body>
  <div class="one" title="小情歌"></div>
  <script>
    let one = document.querySelector(".one")
    console.log(one.title);
    ==>小情歌
  </script>
</body>

tagName属性 : 获取标签名

默认返回大写字母,可通过toLowerCase()改为小写

<body>
  <div class="one" title="小情歌"></div>
  <script>
    let one = document.querySelector(".one")
    console.log(one.tagName);
    ==>DIV
  </script>
</body>

className属性 : 获取类名

<body>
  <div class="one two three" title="小情歌"></div>
  <script>
    let one = document.querySelector(".one")
    console.log(one.className);
    ==>one two three
  </script>
</body>

Nodelist.Length : 获取元素集合长度

1.NodeList为元素集合,即获取了多个元素的集合对象
2.getElementsByClassName()返回元素结合

<body>
  <div class="one" title="小情歌"></div>
  <div class="one" title="小情歌"></div>
  <div class="one" title="小情歌"></div>

  <script>
    let one = document.getElementsByClassName("one")
    console.log(one.length); ==>3
  </script>
</body>

Nodelist.item(index) : 获取集合中指定元素

Nodelist.item(index)和Nodelist[index] 效果相同

<body>
  <div class="one" title="小情歌"></div>
  <div class="one" title="小情歌"></div>
  <div class="one" title="小情歌"></div>

  <script>
    let one = document.getElementsByClassName("one")
    console.log(one.item(1)); 
    ==>返回第二个div标签
  </script>
</body>

上下代码效果相同

<body>
  <div class="one" title="小情歌"></div>
  <div class="one" title="小情歌"></div>
  <div class="one" title="小情歌"></div>

  <script>
    let one = document.getElementsByClassName("one")
    console.log(one[1]); 
    ==>返回第二个div标签
  </script>
</body>

classList 获取类名集合

获取单个元素类名集合

<body>
  <div class="one two three" title="小情歌"></div>

  <script>
    let one = document.querySelector("div")
    console.log(one.classList);
    ==>返回类名集合
  </script>
</body>

请添加图片描述

获取标签文本内容

textContent 和 innerText 和innerText

1.textContent 返回带格式文本内容
2.innerText 返回纯文本内容
3.innerHTML 返回标签+格式+文本内容


<body>
<div><p><span>  这是一首小情歌  </span></p></div>
  
  <script>
    let one = document.querySelector("div")
    console.log(one.textContent);
    ==>"  这是一首小情歌  "
    console.log(one.innerText);
    ==>"这是一首小情歌"
    console.log(one.innerHTML);
    ==>"<p><span>这是一首小情歌</span></p>"
  </script>
</body>

获取属性 : getAttribute() 和 .属性名

区别:
1.getAttribute()
获取未处理的属性内容
可获取自定义得属性
2. .属性名
img标签中src属性路径被自动处理
不能获取自定义的属性

<body>
  <img class="one" src="./img/bird.png"></img>
  
  <script>
    let one = document.querySelector("img")
    console.log(one.getAttribute("src"));
    ==> "./img/bird.png"
    console.log(one.src);
    ==> "file:///D:/VSCode/HyTest/img/bird.png"
  </script>
</body>

修改属性 setAttribute()

<body>
  <img class="one" src="./img/bird.png"></img>

  <script>
    let one = document.querySelector("img")
    one.setAttribute("src","./img/pig.png")
    console.log(one);
  </script>
</body>

请添加图片描述

检验属性是否存在 :hasAttribute()

也可检验自定义属性

<body>
  <img class="one" src="./img/bird.png" data-name="小情歌"></img>

  <script>
    let one = document.querySelector("img")
    console.log(one.hasAttribute("data-name"));
    ==>true
  </script>
</body>