ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端-常用点击变乱获取元素的方式及onclick如何获取点击变乱所在的元素 [打印本页]
作者: 王國慶    时间: 2024-12-11 13:45
标题: 前端-常用点击变乱获取元素的方式及onclick如何获取点击变乱所在的元素
一、JavaScript获取元素的方式

在JavaScript中，常用的获取元素的方式有以下几种：

根据id获取元素

  1. var element = document.getElementById('elementId');
复制代码
根据类名获取元素

  1. var elements = document.getElementsByClassName('className');
复制代码
根据标签名获取元素

  1. var elements = document.getElementsByTagName('tagName');
复制代码
根据name属性名获取元素

  1. var elements= document.getElementsByName('name');
复制代码
通过querySelector获取

  1. 通过querySelector()获取(选择器 只获取第一个)：
  2. var elements= document.querySelector("tagName");
  5.  通过CSS选择器获取单个元素：
  6. var element = document.querySelector('.className');
复制代码
通过querySelectorAll获取

  1. 通过queryselectorAll()获取(选择器 获取所有)：
  2. var elements= document.querySelectorAll("tagName");
  5. 通过CSS选择器获取元素集合：
  6. var elements = document.querySelectorAll('.className');
  9. 通过HTML5新属性获取元素集合（如data-*）：
  10. var elements = document.querySelectorAll('[data-custom]');
复制代码
父找子，子找父

  2. 通过父元素直接获取子元素：
  3. var child = parentElement.firstElementChild; // 第一个子元素
  4. var child = parentElement.lastElementChild; // 最后一个子元素
  5. var children = parentElement.children; // 所有子元素
  8. 通过子元素获取父元素：
  9. var parent = element.parentElement;
  13. 通过Document获取body和html元素：
  14. var body = document.body;
  15. var html = document.documentElement;
复制代码
二、Jquery获取元素的方式

根据id获取元素

  2. $('#elementId')
复制代码
根据类名获取元素

  1. $('.className')
复制代码
根据标签名获取元素

  2. $('tagName')
复制代码
根据name属性名获取元素

  1. $('input[name="someName"]')
复制代码
获取所有元素：

  1. $('*')
复制代码
获取直接子元素：

  1. $('parent > child')
复制代码
获取后代元素：

  2. $('ancestor descendant')
复制代码
获取相邻兄弟元素：

  1. $('prev + next')
复制代码
获取后面的所有兄弟元素：

  1. $('prev ~ siblings')
复制代码
三、onclick如何获取点击变乱所在的元素

在JavaScript中，可以通过给元素添加onclick变乱处理器来获取触发变乱的元素。变乱处理器会被传入一个变乱对象（event），该对象包罗关于变乱的所有信息，包罗触发变乱的元素。
变乱的三要素

1、变乱源：被触发的元素
2、变乱范例:变乱触发的方式：鼠标变乱 、键盘变乱 、浏览器变乱
3、变乱的处理程序：变乱触发后要执行的代码（函数）
变乱公式：变乱源.变乱范例 = 变乱的处理程序
详看示例代码，如何在onclick变乱处理函数中获取变乱所在的元素：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script>
  8.         function manualClick(event){
  9.             var element =event.target;
  10.             console.log("element",element);
  11.             alert("你点击了: " + element.id);
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17.    
  18.     <button id="button" onclick=manualClick(event) style="width: 80px; height: 20px;color: red;">点击一下</button>
  19. </body>
  20. </html>
复制代码
当按钮被点击时，会触发handleClick函数，而且通过event.target获取到是哪个元素触发了变乱

event.currentTarget返回绑定变乱的元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script>
  8.         function manualClick(event){
  9.             var element =event.target;
  10.             console.log("element",element);
  11.             alert("你点击了: " + element.id);
  12.             console.log(event.target);
  13.             console.log(event.target.nodeName ); //获取事件触发元素标签name
  14.             console.log(event.target.className);  //获取事件触发元素classname
  15.             console.log(event.target.innerHTML); //获取事件触发元素的内容
  16.             console.log(event.target.id);//获取事件触发元素id
  17.             console.log(event.currentTarget.nodeName); //获取事件绑定元素标签name
  18.             console.log(event.currentTarget.className); //获取事件绑定元素classname
  19.             console.log(event.currentTarget.innerHTML); //获取事件绑定元素的内容
  20.             console.log(event.currentTarget.id);//获取事件绑定元素id
  22.         }
  23. </script>
  24.                            
  25. </head>
  26. <body>
  27.    
  28.     <button id="button" onclick=manualClick(event) style="width: 80px; height: 20px;color: red;">点击一下</button>
  29. </body>
  30. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4