您的位置:首页 > Web前端 > JavaScript

JS访问HTML节点元素

2020-02-01 09:47 337 查看

现在无论逛那个网站,都有着铃兰满目的特效,还有我们上一篇说到的点击事件等等事件,上一遍我们说了点击事件,我们要先获取,点击的那个元素,在给他添加点击事件,今天我们说一下怎么获取这个元素节点!
获取元素的办法有很多种
通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素
这些方法都可以查找的HTML元素,我们举几个列子

<div id = 'box'><div>
<script type="text/javascript">
var box1 =document.getElementById('box');
</script>

这样我们就获取到了这个id 名为box 的div,因为id属性是唯一的所以我们获取到得 这个元素也是唯一的!

通过类名查找 HTML 元素:
如果您需要找到拥有相同类名的所有 HTML 元素,请使用 getElementsByClassName(), 看下面代码

//通过类名查找HTML元素
<p class="p1"></p>
<script type="text/javascript">
var p1 =document.getElementsByClassName('p1');
console.log(p1);
</script>

通过我们对id 的描述我们应该可以联想到,class 不是唯一的 那么它返回 回来的是什么呢 ,控制台输出的应该是一个数组,这个我们在下一个在进行介绍下一个 通过标签名查找 HTML 元素:

<i></i>
<script type="text/javascript">
var i1 =document.getElementsByTagName('i');
console.log(i1);
</script>

这就是通过标签去查找元素 ,上面我们说到,现在我们知道返回的是一个数组,既然我们知道是一个数组那我们应该也能返回出每一个吧! 比如例子中我们只有一个i 标签那我们要获取到和一个 我们就只用 i1[0] 跟拿到数组中的某一位的办法是一样的!

  • 点赞
  • 收藏
  • 分享
  • 文章举报
Eason_______ 发布了17 篇原创文章 · 获赞 0 · 访问量 162 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: