一、JavaScript获取元素的方式
在JavaScript中，常用的获取元素的方式有以下几种：
根据id获取元素
- var element = document.getElementById('elementId');
- var elements = document.getElementsByClassName('className');
- var elements = document.getElementsByTagName('tagName');
- var elements= document.getElementsByName('name');
- 通过querySelector()获取(选择器 只获取第一个)：
- var elements= document.querySelector("tagName");
- 通过CSS选择器获取单个元素：
- var element = document.querySelector('.className');
- 通过queryselectorAll()获取(选择器 获取所有)：
- var elements= document.querySelectorAll("tagName");
- 通过CSS选择器获取元素集合：
- var elements = document.querySelectorAll('.className');
- 通过HTML5新属性获取元素集合（如data-*）：
- var elements = document.querySelectorAll('[data-custom]');
- 通过父元素直接获取子元素：
- var child = parentElement.firstElementChild; // 第一个子元素
- var child = parentElement.lastElementChild; // 最后一个子元素
- var children = parentElement.children; // 所有子元素
- 通过子元素获取父元素：
- var parent = element.parentElement;
- 通过Document获取body和html元素：
- var body = document.body;
- var html = document.documentElement;
根据id获取元素
根据类名获取元素
根据标签名获取元素
根据name属性名获取元素
- $('input[name="someName"]')
获取直接子元素：
获取后代元素：
获取相邻兄弟元素：
获取后面的所有兄弟元素：
三、onclick如何获取点击变乱所在的元素
在JavaScript中，可以通过给元素添加onclick变乱处理器来获取触发变乱的元素。变乱处理器会被传入一个变乱对象（event），该对象包罗关于变乱的所有信息，包罗触发变乱的元素。
变乱的三要素
1、变乱源：被触发的元素
2、变乱范例:变乱触发的方式：鼠标变乱 、键盘变乱 、浏览器变乱
3、变乱的处理程序：变乱触发后要执行的代码（函数）
变乱公式：变乱源.变乱范例 = 变乱的处理程序
详看示例代码，如何在onclick变乱处理函数中获取变乱所在的元素：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script>
- function manualClick(event){
- var element =event.target;
- console.log("element",element);
- alert("你点击了: " + element.id);
- }
- </script>
- </head>
- <body>
-
- <button id="button" onclick=manualClick(event) style="width: 80px; height: 20px;color: red;">点击一下</button>
- </body>
- </html>
event.currentTarget返回绑定变乱的元素
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script>
- function manualClick(event){
- var element =event.target;
- console.log("element",element);
- alert("你点击了: " + element.id);
- console.log(event.target);
- console.log(event.target.nodeName ); //获取事件触发元素标签name
- console.log(event.target.className); //获取事件触发元素classname
- console.log(event.target.innerHTML); //获取事件触发元素的内容
- console.log(event.target.id);//获取事件触发元素id
- console.log(event.currentTarget.nodeName); //获取事件绑定元素标签name
- console.log(event.currentTarget.className); //获取事件绑定元素classname
- console.log(event.currentTarget.innerHTML); //获取事件绑定元素的内容
- console.log(event.currentTarget.id);//获取事件绑定元素id
- }
- </script>
-
- </head>
- <body>
-
- <button id="button" onclick=manualClick(event) style="width: 80px; height: 20px;color: red;">点击一下</button>
- </body>
- </html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
