各种事件及一些算法思想
- 表单
// value改变表单里的值: input.value = "被点击了"; //禁用表单: disabled = true; // this是指向事件函数的调用者 this.disabled = true;
- 样式
- 行内样式:element.style = ‘’;
- 类名样式:element.className = ‘’;
- 注册事件:
- 获得焦点事件:onfocus; 失去焦点事件:onblur;
- 移动或离开鼠标:onmouseover 和 onmouseout;
- 按住或松开鼠标:onmousedown和onmouseup;
- 点击:onclick
- mouseenter和mouseover的区别
- 两者类似,区别于:mouseover鼠标经过自身盒子触发,经子盒子也触发;mouseenter只会经过自身盒子触发
- 原因:mouseenter不会冒泡、mouseleave也不会
- 排他思想
// 1. 获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i] 所有的button注册事件onclick for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } // (2) 然后才让当前的元素背景颜色为pink 留下我自己 this.style.backgroundColor = 'pink'; } } //2. 首先先排除其他人,然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
- 添加类名:
btn.onclick = function () { //直接覆盖原先的 this.className = 'chage'; //不覆盖原先的 this.className = '原先 change'; }
- 复选框选中的状态:this.check
- 返回true为选中;
- false未选中
- 属性的操作:
- 获取属性:element.属性——获取内置属性
- element.getAttribute(‘属性’)——获取自定义属性
- H5自定义属性名用data-开头;用驼峰命名
- 获取用div.dataset.属性名或div.dataset.[‘属性’]
- 设置属性:element.属性 = ‘值’、class类名时用classnam
- element.setAttribute(‘属性’,‘值’) 主要用于自定义属性
- 移除属性:element.removeAttribute(‘属性’)
- 除了innerHTML,也可用childNodes和nodeValue属性来获取元素
document.getElementsByTagName("BUTTON")[0].childNodes[0].nodeValue
- 三种创建元素方式区别:
- document.write():创建元素(如果页面流动加载完毕,再调用导致重绘,之前加载的都没了)
- element.innerHTML():创建多个元素效率高(不拼接字符,采取数组形式拼接)
var inner = document.querySelector('.inner'); // for (var i = 0; i <= 100; i++) { // inner.innerHTML += '<a href="#">百度</a>' // } var arr = []; for (var i = 0; i <= 100; i++) { arr.push('<a href="#">百度</a>'); } inner.innerHTML = arr.join(''); // 直接添加 <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script>
- createElement():创建多个元素效率低一点,但结构比较清晰
节点操作
- 父节点parentNode :
- erweima.parentNode(没有最近的父亲返回null)
- 字节点
- childNodes 返回包含所有节点(包括元素、文本节点)
- children 返回元素节点
- parentNode.firstChild/lastChild 返回元素、文本节点
- parentNode.lastElementChild / firstElementChild 返回元素节点 ie9才支持
- 实际开发parentchildren[0]
- 兄弟节点:
- 下一个兄弟节点:nextSibling 包括所有节点 元素(换行/空格)、文本
- nextElementSibling:只有元素节点、previousSibling: ie9以上兼容
- 创建节点:
- document.createElement(‘tagName’); 创建之后要进行添加操作才能显示
- 添加节点 从后面追加:
- node.appendChild(child) :ul.appendChild(li) (node父亲、child儿子)
- 添加节点 (从前面添加):
- node.insertBefore(child追加的元素,指定的元素前ul.children[0])
- 删除节点:
- node父亲.removeChild(child)
- 复制节点:node.clone()
- 括号内为空或false为浅拷贝,只复制标签、不复制内容;
- 括号内为true为深拷贝