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事件
常用的事件可以分为以下几种:
- 鼠标事件
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。
onmousedown 鼠标按钮被按下。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 - 键盘事件
onkeydown 键盘摁下
onkeyup 键盘抬起
onkeypress 键盘松开 - 表单事件
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 移除函数
冒泡和捕获就不在这里展开讲了,有空开一篇新的博客