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">
<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>
<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">
<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>
<button id="button" onclick=manualClick(event) style="width: 80px; height: 20px;color: red;">点击一下</button>
</body>
</html>
onclick触发元素获取
&amp;lt;button class=&quot;btn&quot;onclick=&quot;a();&quot;&amp;gt;一号&amp;lt;/button&amp;gt;
&amp;lt;button class=&quot;btn&quot;onclick=&quot;
e.currentTarget //是你绑定事件的元素
//获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
//获得点击元素的第一个子元素
var doms = document.querySelectorAll('ul li');
for (var i = 0; i < doms.length; i++) {
!function(dom,index) {
$(document).click(function(e) { // 在页面任意位置点击而触发此事件
$(e.target).attr("id"); // e.target表示被点击的目标
})//此方法对于想要获取击元素获得当前点击元素信息如id,value,等信息,无法准确定位,获取,因此需要thi...
<a type='button' class="layui-badge margin-left-5 layui-bg-danger" target="view_window" onclick="audit_no(this)" value="{$value['id']}">
//修改订单状态,生成审核记录
function audit_no(obj)
var a = $(obj).attr("valu
vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑?)
转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html
熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个...
Button button =(Button)findViewById(R.id.button);//得到按钮实例
button.setOnClickListener(new View.OnClickListener() {//设置一个监听器
@Override
public void onClick(View v) {//调用onclick方法