一、获取页面中元素的方法
1、document.getElementById(“元素的Id名称”)
在整个文档中,通过这个方法获取到的是一个元素。(注意:如果页面中的id重复了,那么这个方法默认只获得第一个元素)
如果没有获取到,返回的结果为null。
2、document.getElementsByTagName(“元素的标签名”)
返回的是htmlcollection 集合 ,用法和数组一致。获取的是一个对象数据类型结果,并且是一个类似数组(索引从0开始,逐级递增,索引代表的是当前对应的某一个元素,有一个叫做length的属性代表获取的个数)
3、document.getElementsByClassName(“元素的类名称”) ;
返回的也是htmlcollection 集合 ,用法和数组一致。即使你获取的只有一个,它也是 类数组,也是一个集合,如果想用其中的第一个,就要通过索引拿出引用。
4.、context.getElementsByName(“元素的name值”)
返回的是nodelist类型,这个方法应用于获取具有同样name的表单元素。
5、document.querySelector(“选择器名称”)获取一个
document.querySelectorAll(“选择器名称”)获取多个
比如:<div class="btn" id="a"></div>
获取方法如下:document.querySelector(".btn");或者document.querySelector("#a");
6、document.body 获取body元素;
二、事件的绑定方法
1、在页面元素之内直接进行事件的绑定
具体方法如下:<button onclick="点击事件发生执行的函数名"></button
2、dom元素操作进行事件绑定
具体方法如下:<button id="btn">按钮</button>
通过id获取dom元素:var btn=document.getElementById(“btn”);
btn.οnclick=function () {
代码、、、
}
(在事件执行函数里的this对象指的是当前的事件执行对象)
3、通过事件的监听进行事件的绑定
<div><button id="btn1"></button></div>
<script>
var btn1=document.getElementById("btn1");
function show(){
alert(1);
}
btn1.addEventListener("click", showbtn);
</script>