JavaScript入门api详细介绍

事件基础

事件是有三部分组成，事件源，事件类型，事件处理程序，我们也称为事件三要素

1. 事件源：事件被触发的对象，谁 按钮

   var btn = document.getElementById('btn');
   

2. 事件类型：如何触发，发生事件，比如鼠标点击，还是鼠标经过，还是按下键盘

   onclick：鼠标点击
   onmouserover：鼠标经过触发
   onmouseout：鼠标离开触发
   onfocus：获得鼠标焦点触发
   onblur：失去鼠标焦点触发
   onmousemove：鼠标移动触发
   onmouseup：鼠标弹起触发
   onmousedown：鼠标按下触发
   

3. 事件处理程序：通过一个函数赋值的方式，完成。

   btn.onclick = function(){
   	alert('唐伯虎点秋香');
   }
   

操作元素

1. 改变元素内容/读取内容

   element.innerText:从起始位置到终止位置的内容，但他去除html标签，同事空格和换行也会去掉，不识别html标签 读取时候会将里面的空格和换行去掉
   element.innerHTML:起始位置到终止位置的全部内容，包括html标签，同事保留空格和换行，识别html标签（w3c推荐的标签）读取时候会将里面的空格和换行读取
   

2. 获取属性值

   1.element.属性  ： 获取属性值
   2.element.getAttribute('属性')
   区别：element.属性 是获取内置属性值（元素本身自带的属性）
   		 element.getAttribute('属性') 主要获取自定义的属性（标准）可以获取我们程序员自定义的属性
   

3. 设置属性值

   1、element.属性 = '值'  设置内置属性值
   2、element.getAttribute('属性', ’值')    
   两者区别同上。
   

4. 移除属性

   element.removeAttribute('属性')
   

5. 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要高
``