DOM元素获取

最新推荐文章于 2024-07-25 09:24:40 发布

余斯内克

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量123

点赞数

文章标签： html5 javascript html dom操作

本文链接：https://blog.csdn.net/ShhLife/article/details/120196394

版权

DOM获取元素

总结一下自己对DOM获取元素的理解与使用，希望对大家有所帮助，如有错误，欢迎指正。

document.getElementById();

直接使用元素的id值进行选择，只需要在元素中加入 id=“id名” 就行；
优点：简单易懂,指向强;
缺点：id值具有唯一性，一个元素只能使用一个id，对起名困难户及其为难
代码示例:

<body>
<input type="button" name="btn" id="btn">
</body>
<script>
var oBtn = document.getElementById("btn");
//这样 就选择上了input元素;可以开始对oBtn所代表的input进行操作
</script>

document.getElemensTagName()

通过标签名获取元素对象，获取的是一个 元素集合（数组的形式），在使用的时候只需要在对应的变量后面加上数组下标即可。
优点：因为是使用的标签名选择，所以选择范围大，在对不同的元素进行操作的时候，只需要对下标进行改变即可，完全不用和id一样声明一个选择一个;
缺点：还未发现明显缺点，唯一的难处可能是不好去理解容易粗心大意导致bug？
代码示例：

<body>
<input type="button" name="btn" id="btn">
</body>
<script>
var oBtns = document.getElementsByTagName("input");
oBtns[0].onclick = ()=>{};
//随便绑定的点击事件，主要展示如何去使用TagName 下标0表示选择第一个input
</script>

document.getElementsByClassName();

通过类名来获取元素，获取的同样是一个元素集合(所有符合条件的元素所组成的数组);
优点：可以使用css选择器来进行获取比如ByClassName(".box input")这样使用包含选择器来进行获取(这里为方便简写了，在使用的时候一定要写全!!)
缺点：因为选择方式更多，所有更容易出错，所以睁大眼睛，尽量选对;
代码示例：

<body>
<input type="button" name="btn" id="btn" class="ipt">
</body>
<script>
var oBtns = document.getElementsByClassName(".ipt");
oBtns[0].onclick = ()=>{};
//同样，使用的时候需要在对应变量后方加上下标
</script>

document.getElementsByName();

可通过name值来获取元素对象，所获取的元素对象是所有符合条件的（同name值）集合(也就是数值)
优点:可以通过name值获取，也就是说再做表单就不用费那劲去给表单里的元素想名字啦！
缺点：俺寻思还是容易出错，毕竟选择的多
代码示例:

<body>
<input type="button" name="btn" id="ibtn" class="ipt">
</body>
<script>
var oBtns = document.getElementsByClassName("btn");
oBtns[0].onclick = ()=>{};
//同样，使用的时候需要在对应变量后方加上下标

document.querySelector()

使用类名或者元素标签进行选取，这玩意跟以上那些不一样的是它只能选择排列顺序上的第一个元素，就算满足条件的元素有多个，那也只会选取第一个元素
上代码:

<body>
<input type="button"  class="ipt1">
<input type="button"  class="ipt2">
<input type="button"  class="ipt3">
</body>
<script>
var oBtn = document.querySelector("input");;
oBtn.onclick = ()=>{};
//选取的是第一个input
//因为只有一个元素，所以就不需要下标了
</script>

document.querySelectorAll();

众所周知，都加all了，那肯定是全都要；
同样可以通过类名或者元素标签来获取元素。
只要是符合条件的，都给你搞过来，所以使用的时候得加个下标。
代码:

<body>
<input type="button"  class="ipt1">
<input type="button"  class="ipt2">
<input type="button"  class="ipt3">
</body>
<script>
var oBtns = document.querySelectorAll("input");;
oBtns[2].onclick = ()=>{};
//选取的是所在下标2里的ipt3
//一定要加下标啊！一定要掰好指头数好下标了再加！
</script>