一、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('[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;
二、Jquery获取元素的方式
根据id获取元素
$('#elementId')
根据类名获取元素
$('.className')
根据标签名获取元素
$('tagName')
根据name属性名获取元素
$('input[name="someName"]')
获取所有元素：
$('*')
获取直接子元素：
$('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获取到是哪个元素触发了事件
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); //获取事件触发元素classnameconsole.log(event.target.innerHTML); //获取事件触发元素的内容console.log(event.target.id);//获取事件触发元素idconsole.log(event.currentTarget.nodeName); //获取事件绑定元素标签name console.log(event.currentTarget.className); //获取事件绑定元素classnameconsole.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>
