js DOM编程+事件

dom

文档对象模型

文章目录

• 获取元素的方法

• <script type="text/javascript">
  			document.getElementById()//通过id获取
  			document.getElementsByName()//通过name获取
  			document.getElementsByClassName()//通过类名获取
  			document.getElementsByTagName();//获取所有name
  			document.querySelector()//css选择一个
  			document.querySelectorAll()//选择所有
  		</script>

• 事件基础

• 概述：简单理解 触发的响应机制

• 鼠标常见的事件

• 鼠标事件对象
• e.pageX//文档中的鼠标位置
• e.pageY //文档中的鼠标位置
• e.offsetX//相对于设定事件的元素内的鼠标位置
• e.offsetY //相对于设定事件的元素内的鼠标位置
• e.target //被点击的目标

• onclick 点击 onmouseover 经过 onmousedown按下 
  			onmouseout 离开 onmouseup 弹起 

• 输入框常见事件

• onchange 内容变化时触发 oninput输入时

• 操作元素

• ele.innerHTML //改变元素内容 识别html标签
• ele.innerText //改变元素内容 不识别html标签

• 样式属性操作

• a.classList.add() //添加类名
  			a.classList.remove() //删除类名
  			a.classList.toggle() //有则删除 无则添加
  			a.classList.contains() //是否包含

• 获取元素的值

• a.getAttribute("index") //获取属性值
  			a.setAttribute(2,"index") //修改属性值
  			a.removeAttribute("index") //删除属性值

• 节点操作

• a.parentElement;//获取父级节点
  			a.previousElementSibling;//下一个兄弟节点
  			a.nextElementSibling;//上一个兄弟节点
  			parent.lastElementChild;//最后一个子级
  			parent.firstElementChild;//第一个子节点
  			parent.children;//所有子级

• 创造/添加/删除 元素节点

• a.createElement("a");//创建
  			div.appendChild("a");//添加
  			div.insertBefore(a,div.children[0]);//选定位置添加
  			div.removeChild("a");//删除子级
  			a.remove();//删除自己

• node.cloneNode()；//克隆 true深拷贝 false默认浅拷贝

• 注册事件

• 三种注册时间方法

• <button type="button" onclick="fun()">按钮</button>
  		<script type="text/javascript">
  			function fun(){//第一种方法
  				
  			}
  			var button=document.querySelector("button");
  			button.onclick=function(){}//第二种方法
  			button.addEventListener("click",fun);//第三种方法
  		</script>

• 移除事件的方法
•  

  removeEventListener("click",fun)//移除事件
  button.onclick=null//第二种方法

• DOM事件流

• button.addEventListener("click",fun,true);
  			第三个参数如果是true表示在事件捕捉阶段调用
  			事件处理函数 如果为false(默认为false)则表示在事件冒泡阶段调用事件处理程序

• 阻止冒泡/默认行为

• <script type="text/javascript">
  			button.addEventListener("click",function(e){
  				e.stopPropagation()//阻止冒泡
  				e.preventDefault()//阻止默认行为
  			},true);
  		</script>

• 常见键盘事件

• onkeyup 键盘被松开触发
• onkeydown 按下触发
• onkeypress 按下出发
• 键盘事件对象
• e.keyCode e.key

• 获取元素宽度

• offsetwidth 返回宽度包括边框 填充内容
• clientWidth 返回宽度 不包括边框
• scrollWidth 返回宽度 内容宽 不包括边框

• 获取页面垂直滚动距离

• <script type="text/javascript">
  			documen.documentElement.scrollTop;
  		</script>

• 最近所学