js对象 document location history 内置对象 一、document 是html标签 样式变化 数据显示之类的 DOM(document object model) 1.先获取元素 如何获取dom(document object model)的元素 获取方式：首先在<body>中有一个按钮 <button id=“btn” class=“btnlist” name=“btninfor”>按钮</button> 通过类名称获取：var btn=document.getElementsByClassName(“btnlist”); console.log（btn）;返回集合 htmlcollection 用法和数组一致 console.log（btn[0]）;可以拿到当前对象 通过元素名称获取： var btn1=document.getElementByName(“btninfor”) console.log(btn1); 返回的是节点类型 console.log（btn1[0]）;可以拿到当前对象 通过元素id 名称获取：var btn2=document.getElementById(“btn”); console.log(btn2);**可以直接获取当前对象；（返回的是单个对象 可以直接使用） 通过标记名称获取：（通过标签的名称）：var btn3=document.getElementByTagName(“button”); console.log(btn3[0]); var btn4=document.querySelector(".bynlist"); console.log(btn4);//返回的是集合 var btn5=document.querySelectorAll("#btn"); console.log(btn5); 获取body 元素 console.log(document.body);
2.操作DOM元素 如何操作dom元素 操作dom元素的属性和行为（事件） 首先在<body>中写一个<button> 《1》操作属性： 获取它 var btn=document.getElementByTagName(“button”); 修改属性的操作：btn[0].style.background=“red”; btn[0].style.width=“200px”; **js直接操作的元素属性都是行内的； 获取对象的属性（行内样式）：console.log（btn[0].style.width）; js获取非行内样式（不能用上述方法） 可以用：console.log（Window.getComputedStyle(btn[0]).height）; 《2》操作dom元素的事件 dom事件有：（事件前缀都带on） 键盘事件：onkeydown键盘按下;onkeyup键盘抬起；onkeypress按键事件； 表单事件：onfocus获焦事件； onblur失去焦点； 鼠标事件：onclick鼠标单击事件；ondbclick鼠标双击事件；onmouseleave鼠标水平离开事件 onmouseout鼠标垂直离开（三维坐标）；onmousemove鼠标移动事件；onmouseheel鼠标滚轮； onmouseenter鼠标进入事件；onmouseover鼠标悬停事件； 浏览器事件（Window事件）onload加载完成事件；onresize浏览器窗口变化事件 onerror报错事件；onscroll滑动条事件； 触屏事件:touchstart开始触屏；touchmove触屏移动事件；touchend触屏结束； 如何给dom元素添加事件： （1）常规添加 直接在标签上添加事件；比如：<button οnclick=“里面写函数的调用”>按钮</button> （2）动态给dom元素添加事件 ：<button id=“btn”>按钮</button> 首先先获取元素：var btn=document.getElementById(“btn”); btn.οnclick=function(){ console.log(1); } 或者：btn.οnclick=showinfo;此时不能添加小括号 function showinfo(){ console.log(1); } (3) 事件的监听按钮</button> var btn2=document.getElementById(“btn2”); btn2.addEventListener(“click”,function(){ console.log(2); });
事件的执行参数： //鼠标点击事件 <button id=“btn”>按钮</button> var btn=document.getElememtById(“btn”); btn.οnclick=function(e){//e也可以写成 var e=window.event; console.log(e)；//e event 事件的执行参数 var target=e.target||e.srcElement; //当前点击的目标元素 console.log(target);//目标元素； }； //键盘事件 document.body.οnkeypress=function( ){ var e=window.event; console.log(e.keyCode); } //鼠标移动事件 document.body.οnmοusemοve=function(e){ var pageX=e.pageX||e.clientX； var pageY=e.pageY||e.clientY; console.log(pageX,pageY); } JS里面的this 可以指代当前事件的执行对象 函数里面的this指代Window里的对象 冒泡 在js里面要尽量避免事件的冒泡 只需要执行子容器 只有onclick会出现冒泡 如何处理事件的冒泡：在子容器中写 e.stopPropagation();//阻止事件冒泡 e.preventDefault();//阻止事件的默认行为 return false;//阻止冒泡 但是在js中只有第一个可以阻止事件冒泡；
事件的委托：父容器的事件委托给子容器去执行
