JS DOM获取元素属性+操作方法
文章目录
JS DOM获取元素属性+操作方法基础属性title属性tagName属性 : 获取标签名className属性 : 获取类名Nodelist.Length : 获取元素集合长度Nodelist.item(index) : 获取集合中指定元素classList 获取类名集合获取标签文本内容textContent 和 innerText 和innerText获取属性 : getAttribute() 和 .属性名修改属性 setAttribute()检验属性是否存在 :hasAttribute()基础属性
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>
