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] 跟拿到数组中的某一位的办法是一样的!
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点
- 【JS学习笔记】07 添加和删除节点(HTML 元素)
- html——原生js与jquery创建元素节点区别
- html中iframe子页面与父页面元素的访问以及js变量的访问
- js操作元素节点对象innerHTML
- html中iframe子页面与父页面元素的访问以及js变量的访问
- 【HTML】- js获取元素的所有兄弟节点
- html中iframe子页面与父页面元素的访问以及js变量的访问
- js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
- html中iframe子页面与父页面元素的访问以及js变量的访问
- html中iframe子页面与父页面元素的访问以及js变量的访问
- html —— 查看元素属性 与 js 全局属性
- 浏览器打开本地html不能访问的js对象_收集
- selenium中用js定位html上没有id,没有name的元素
- js获取html节点
- DOM操作HTML文档;js创建表格;清除空文本节点
- JS简单添加元素新节点的方法示例
- JS创建一个元素节点, 并把该节点添加为文档中指定节点的子节点
- 关于父页面访问iframe中元素和js的那点事
- JS获取节点的兄弟,父级,子级元素