事件基础
事件是有三部分组成,事件源,事件类型,事件处理程序,我们也称为事件三要素
-
事件源:事件被触发的对象,谁 按钮
var btn = document.getElementById('btn');
-
事件类型:如何触发,发生事件,比如鼠标点击,还是鼠标经过,还是按下键盘
onclick:鼠标点击 onmouserover:鼠标经过触发 onmouseout:鼠标离开触发 onfocus:获得鼠标焦点触发 onblur:失去鼠标焦点触发 onmousemove:鼠标移动触发 onmouseup:鼠标弹起触发 onmousedown:鼠标按下触发
-
事件处理程序:通过一个函数赋值的方式,完成。
btn.onclick = function(){ alert('唐伯虎点秋香'); }
操作元素
-
改变元素内容/读取内容
element.innerText:从起始位置到终止位置的内容,但他去除html标签,同事空格和换行也会去掉,不识别html标签 读取时候会将里面的空格和换行去掉 element.innerHTML:起始位置到终止位置的全部内容,包括html标签,同事保留空格和换行,识别html标签(w3c推荐的标签)读取时候会将里面的空格和换行读取
-
获取属性值
1.element.属性 : 获取属性值 2.element.getAttribute('属性') 区别:element.属性 是获取内置属性值(元素本身自带的属性) element.getAttribute('属性') 主要获取自定义的属性(标准)可以获取我们程序员自定义的属性
-
设置属性值
1、element.属性 = '值' 设置内置属性值 2、element.getAttribute('属性', ’值') 两者区别同上。
-
移除属性
element.removeAttribute('属性')
-
H5自定义属性规定,一般以data-开头
H5获取属性的方法:element.dataset.名称 (只能获取以data-开头的自定义属性,并且获取时只需要data- 后面的名称
节点概述
一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性
元素节点 nodeType 为 1 (例如:html标签)
属性节点 nodeType 为 2 (例如:class id等)
文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
注意:我们一般节点操作主要操作的是元素节点
父节点
node.parentNode 得到的是离元素最近的父级节点,如果得不到则返回为null
子节点
parentNode.chlidNodes 标准用法 得到所有的子节点,包含文本节点和元素节点等等
注意:如果只想要获取里面的元素节点,则需要专门处理,所以我们一般不提倡使用chlidNodes
处理如下:
var ul = document.querySelector('ul');
for(var i = 0; i <= ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == 1){
//ul.childNodes[i]是元素节点
console.log(ul.childNodes[i]);
}
}
parentNode.children 非标准,获取所有的子元素节点(实际开发常用的)
parentNode.firstChild 获取元素的第一个子节点,找不到则返回null 不管是元素节点还是文本节点
parentNode.firstElementChild 获取元素的第一个子元素节点 (注意:只有ie9以上才能用)
实际开发中用:parentNode.children[0]
parentNode.lastChild 获取元素的最后一个子节点,找不到则返回null 不管是元素节点还是文本节点
parentNode.lastElementChild 获取元素的第一个子元素节点 (注意:只有ie9以上才能用)
兄弟节点
node.nextSibling 返回当前元素的下一个兄弟节点 找不到则返回null 如果下一个兄弟是文本节点也能得到
node.nextElementSibling 返回当前元素的下一个兄弟元素节点 (注意:只有ie9以上才能用)
node.previousSibling 返回当前元素的上一个兄弟节点 找不到则返回null 如果上一个兄弟是文本节点也能得到
node.previousElementSibling 返回当前元素的上一个兄弟元素节点 (注意:只有ie9以上才能用)
自己封装一个兼容性的函数:
function getNextElementSibling(element){
var el = element;
while(el = el.nextSibling){
if(el.nodeType === 1){
return el;
}
}
return null;
}
创建节点
document.createElement('tagName') 该方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点
添加节点
node.appendChild(child) 该方法将一个节点添加到指定父节点的子节点列表末尾,类似于CSS里面的after伪元素,其中node是父级,child是子级
node.insertBefore(child,指定元素) 该方法将一个节点添加到父节点的指定子节点前面,其中node是父级,child是子级
注意:所以页面中想要添加元素我们分两步:
1.需要创建元素 2.添加元素
删除节点
node.removeChild(child) 该方法从DOM中删除一个子节点,返回删除的节点 node是父节点 child是子节点
复制节点
node.cloneNode() 该方法返回调用该方法的节点的一个副本,也称为克隆或者拷贝,克隆后还需要使用添加方法才能页面显示
注意:
1、如果括号内参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点
2、如果括号参数为true,则是深度拷贝,会复制节点本身以及里面的所有子节点
三种动态创建元素的区别
document.write() 是直接将内容写入页面的内容流,但是当页面执行完成后,再执行这个方法时他会将页面全部重新书写,也就是只显示document.write() 的内容
innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML 创建多个元素效率更高(前提是不采取拼接字符串的形式,要采用数组push,然后数组join 形式),结构稍微复杂
createElement() 创建多个元素效率稍微低一点点,但是结构更加清晰
总结:不同浏览器下innerHTML效率要比createElement要高
``