javascript中查找HTML元素的三种方式

最新推荐文章于 2022-10-12 20:43:20 发布

超吵超吵

最新推荐文章于 2022-10-12 20:43:20 发布

阅读量1.3k

点赞数

文章标签： JavaScript的自学之旅（1）

本文链接：https://blog.csdn.net/q1210082153/article/details/102560452

版权

javascript中查找HTML元素的三种方式：

纯属本人学习时作为笔记使用，不建议参考

1.通过ID查找

#查找到ID名为test1的元素并将其内部的HTMl改成byID
document.getElementById("test1").innerHTML="byID"

2.通过class查找

#查找到class名为test2的第一个元素并将其内部的HTML改成byclass（注：用class来查找时返回的是一个HTMLCollection，元素在中的存放顺序与其在HTMLCollection中的顺序一致）
document.getElementsByClassName("test2")[0].innerHTML="byclass"

3.通过标签查找

#查找到标签名为p即带有<p><\p>的第一个元素并将其内部的HTML改成byTag（注：用标签来查找时返回的是一个HTMLCollection，元素在HTMLCollection中的存放顺序与其在文本中的顺序一致，这点与通过class查找相似）
document.getElementsByTagName("p")[0].innerHTML="byTag"

<script>
function test1() {document.getElementById("test1").innerHTML="byID";}
function test2() {document.getElementsByClassName("test2")[0].innerHTML="byclass";}
function test3() {document.getElementsByTagName("p")[0].innerHTML="byTag";}

</script>
<p id="test1" class="test2"></p>
<button type="button" onclick="test1()" >byID</button>
<button type="button" onclick="test2()" >byclass</button>
<button type="button" onclick="test3()" >byTag</button>