前端-常用点击变乱获取元素的方式及onclick如何获取点击变乱所在的元素
一、JavaScript获取元素的方式在JavaScript中，常用的获取元素的方式有以下几种：
根据id获取元素
var element = document.getElementById('elementId'); 根据类名获取元素
var elements = document.getElementsByClassName('className'); 根据标签名获取元素
var elements = document.getElementsByTagName('tagName'); 根据name属性名获取元素
var elements= document.getElementsByName('name'); 通过querySelector获取
通过querySelector()获取(选择器 只获取第一个)：
var elements= document.querySelector("tagName");
通过CSS选择器获取单个元素：
var element = document.querySelector('.className'); 通过querySelectorAll获取
通过queryselectorAll()获取(选择器 获取所有)：
var elements= document.querySelectorAll("tagName");
通过CSS选择器获取元素集合：
var elements = document.querySelectorAll('.className');
通过HTML5新属性获取元素集合（如data-*）：
var elements = document.querySelectorAll(''); 父找子，子找父
通过父元素直接获取子元素：
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; 二、Jquery获取元素的方式
根据id获取元素
$('#elementId') 根据类名获取元素
$('.className') 根据标签名获取元素
$('tagName') 根据name属性名获取元素
$('input') 获取所有元素：
$('*') 获取直接子元素：
$('parent > child') 获取后代元素：
$('ancestor descendant') 获取相邻兄弟元素：
$('prev + next') 获取后面的所有兄弟元素：
$('prev ~ siblings') 三、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> 当按钮被点击时，会触发handleClick函数，而且通过event.target获取到是哪个元素触发了变乱
https://i-blog.csdnimg.cn/direct/af00bbda05d34bfc94573a5e923e382c.png
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>
https://i-blog.csdnimg.cn/direct/f7c366dc0ae64e1b9b2c639f28c57354.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]