js--dom元素

一、dom元素的事件

1.键盘事件

onkeydown(键盘按下) onkeyup(键盘抬起) onkeypress(按键事件)

2.表单事件

onfocus(获得焦点) onblur（失去焦点）

3.鼠标事件

onclick（单击） ondbclick （双击） onmouseleave(水平离开) onmouseout（离开） onmousemove（鼠标移动） onmouseenter（鼠标进入） onmouseover（鼠标悬停） onmousewheel(鼠标滚轮事件)

4.浏览器事件

window事件 onload（加载完成事件） onresize(窗口变化事件) onerror（报错事件） onscroll(滑动事件)

5.触屏事件

touch（触屏） touchstart （开始触屏 ） touchmove（触屏移动） touchend(触屏结束)

二、给dom元素添加事件

1.常规添加

function btndou(a) { console.log(a); }

2.动态添加

var btn = document.getElementById("btn"); btn.onclick = function () { console.log(1); } btn.onclick = showinfo;

三、时间监听

var btn2 = document.getElementById("btn2"); btn2.addEventListener("click", showbtn); function showbtn() { console.log(2); }

四、获取dom元素

1.getElementByClassName(返回集合)

var btn=document.getElementsByClassName("btnlist"); console.log(btn[0]);

2.getElementByName(返回nodelist) 

var btn1=document.getElementsByName("btninfo"); console.log(btn1[0]);

3. getElementByID(返回单个对象)

var btn2=document.getElementById("btn"); console.log(btn2);

4. getElementByTagName（返回htmlcollection集合）

var btn3=document.getElementsByTagName("button"); console.log(btn3[0]);

五、操作dom元素属性和行为

var btn=document.getElementsByTagName("button"); /*修改属性 -----js操作的属性都是行内的 (设置或者获取)*/ btn[0].style.background="red"; btn[0].style.width="200px"; /*获取对象的属性*/ console.log(btn[0].style.width); /* * js获取非行内样式 * */ console.log(window.getComputedStyle(btn[0]).height);

六、子父节点

1.获取元素

var nav = document.getElementById("nav");

2.子父

1）获取子节点 childElementCount 子节点个数;获取所有的节点个数 childNodes 获取所有的节点

a）nodeType 当前节点的类型

b）nodeName 节点名称 大写

c）nodevalue 节点的值

2）找子元素 children 子元素

        a）返回指定元素的子元素集合

        b）返回值都是数组

nextSibling 下一个节点 nextElementSibling 下一个元素 previousSibling上一个节点 previousElementSibling 前一个元素 3）获取父元素里面的第一个或者最后一个 firstElementChild 第一个元素 firstChild 第一个节点 lastChild 最后一个节点 lastElementChild 最后一个元素