JavaScript总结(二) Dom

Dom

Html Dom能够通过Js进行访问，在dom中所有的元素都被定义为对象.
方法和基本使用

增删改查

	//增
	document.createElement(element) //添加
	//删
	document.removeChild(element) //删除
	//改
	document.repalceChild(element) //替换
	//添加
	document.appendChild(element)
	//查
	//根据id 查找元素
	document.getElementById("id的名字")
	//根据class查找元素
	document.getElementsByClassName("class的名字")
	//根据标签查找元素
	document.getElementsByTagName("tag的名字")
    document.querySelector("")//可以查找任何格式 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 w3c
    document.quertSelectorAll("")//querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。 w3c
NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

js修改css样式

	//改变元素的innerHtml
	element.innerHtml=new Value
	//直接设置style的属性 
	element.style.width="100px"
	element.style.height="100px"
	//setAttribute
	element.setAttribute('height', 100);
	element.setAttribute('height', '100px');
	element.setAttribute("style","width:50px")
	element.setAttribute('style', 'height: 100px !important');
	//使用setProperty 
	element.style.setProperty('height', '300px', 'important');
	//cssText  通过js设置css属行 会不停的创建销毁 如果 css 多次设置 可以选择cssText 减少重排
	element.style.cssText = 'width: 100px';
	element.style.cssText += 'height: 100px !important';

重绘和重排

 重绘：是指元素的样式发生了变化，而大小和尺寸没有发生变化。
 重排：是指元素的位置或者大小发生了改变，浏览器需要重新去计算渲染树，新的渲染树建立之后，浏览器会重新绘制所影响的元素

更详细的可以去这个博主的介绍

DOM事件

常用的事件可以分为以下几种:

1. 鼠标事件
   onmousemove 鼠标被移动。
   onmouseover 鼠标移到某元素之上。
   onmouseout 鼠标从某元素移开。
   onmouseup 鼠标按键被松开。
   onmousedown 鼠标按钮被按下。
   onmouseenter 当鼠标指针移动到元素上时触发。
   onmouseleave 当鼠标指针移出元素时触发
   onclick 当用户点击某个对象时调用的事件句柄。
   ondblclick 当用户双击某个对象时调用的事件句柄。
2. 键盘事件
   onkeydown 键盘摁下
   onkeyup 键盘抬起
   onkeypress 键盘松开
3. 表单事件
   onblur 元素失去焦点时触发
   onchange 该事件在表单元素的内容改变时触发( , , , 和 )
   onfocus 元素获取焦点时触发
   onfocusin 元素即将获取焦点时触发
   onfocusout 元素即将失去焦点时触发
   oninput 元素获取用户输入时触发
   onreset 表单重置时触发
   onsearch 用户向搜索域输入文本时触发 ( <input=“search”>)
   onselect 用户选取文本时触发 ( 和 )
   onsubmit 表单提交时触发
   详细的事件可以去菜鸟查看

EventListener

addEventListener() 方法 可以向指定的元素添加事件，在原生js中绑定多个onclick事件可以用，而用addEventListener可以添加多个onclick事件，且后面的不会对前面的onclick事件覆盖.
具体用法

	element.addEventListener('click',fn,true)
	//element 绑定的元素
	//click 绑定的事件名
	// fn  需要执行的函数
	//true  最后一个参数是一个Boolean值，当为true是 开启事件捕获 ，false 则为 冒泡

removeEventListener() 方法用于删除 EventListener

element.removeEventListener('onmouseout',fn)
//onmouseout 触发事件
//fn 移除函数

冒泡和捕获就不在这里展开讲了，有空开一篇新的博客