dom数的获取方式
1.dom元素的获取
几种方式: 8种:
4种动态获取方式
<button class="btn" name="but" id="btn_1">按钮</button>
<button class="btn">按钮2</button>
<button id="btninsert">动态添加</button>
<script>
var dom1=document.getElementsByTagName("button");
console.log(dom1[0]);//htmlcollection 集合类型 [index] 获取元素
var dom2=document.getElementsByClassName("btn");
console.log(dom2);//htmlcollection 集合类型 [index] 获取元素
var dom3=document.getElementsByName("but");
console.log(dom3);//NodeList 集合 [index] 获取元素
var dom4=document.getElementById("btn_1");
console.log(dom4);//object 单个对象
- 固定获取
初始化页面有几个元素 获取几个 后期动态添加的不能直接获取
var querybtn=document.querySelector(".btn");
console.log(querybtn);
var queryall=document.querySelectorAll(".btn");
console.log(queryall);//nodelist集合 [index] 获取元素
提供了两个固定元素的获取
// body
console.log(document.body);
//html
console.log(document.documentElement)
添加事件
dom 元素的事件
事件都哪几类:
* 鼠标事件
* mousedown mouseup mouseover mousemove mouseleave mouseout mouseenter
* 键盘事件
* keydown keyup keypress
* 表单事件
* blur focus change
* 浏览器事件
* load error resize
* 触屏事件
* touchstart touchmove touchend
*
* js的事件在使用的时候要带on
1.dom元素直接绑定事件 在元素亨内直接添加事件 行内同类型事件只能绑定一次
2.直接动态绑定事件 (获取dom 在绑定事件)
3.事件的监听
监听事件 事件类型不带on
regest.addEventListener("click", method1);
function method1() {
console.log("回调函数");
}
regest.addEventListener("click", method2);
function method2() {
console.log("回调函数1");
regest.removeEventListener("click", method2);
}
addEventListener 监听事件 第三个参数不写 默认是事件冒泡
// 第三个参数默认为false 冒泡 true 捕获
var parbtn = document.getElementsByClassName("parbtn");
for (var i = 0; i < parbtn.length; i++) {
parbtn[i].addEventListener("click",function (){
console.log(this);
},true);
}
- //事件的执行参数
e event
var event_ele=document.getElementById("btnevent");
event_ele.onclick=function (e){
//鼠标执行参数
//clientX/Y pageX/Y 当前鼠标相对浏览器的坐标
// srcElement target 目标元素
//触发的事件间隔timeStamp ms
console.log(e);
}
document.body.onkeydown=function (){
var e=window.event;
//keyCode charCode which ascii值
//key code 字母值
//srcElement target 目标元素
//timeStamp 时间间隔
console.log(e);