DOM元素的获取及相关操作

一、获取页面中元素的方法

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>