03WebAPIs

DOM

获取元素

通过ID进行获取
    返回的是一个元素对象
    文档.获取 元素 通过 id ('字符串')  驼峰命名
    var timer = document.getElementById('id名称');
    console.log(timer);
    //打印元素对象更好的去查看元素的属性和方法
    console.dir(timer);
    
根据标签名获取
    返回的是一个元素集合，以伪数组的形式存储
    文档.获得 元素 通过 标签 名称('字符串')
    var lis = document.getElementsByTagName('li');
    遍历
    for (var i = 0; i < lis.length; i++) {
    	console.log(lis[i]);
    }
    
获取父元素指定的标签名的子元素：
    var ol = document.getElementById('ol');
    var lis1 = ol.getElementsByTagName('li');
    
HTML5新增方法
    根据类名进行获取
        返回的是一个元素集合，以伪数组的形式存储
        文档.获得 元素 通过 类名 名称('字符串')
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        
    更具选择器返回第一个指定对象
        字符串可以是所有选择器
        var box1 = document.querySelector('.box');
        console.log(box1);
        var nav = document.querySelector('#nav');
        console.log(nav);

    更具选择器返回所有对象
        返回的是一个伪数组
        var divs = document.querySelectorAll('div');
        console.log(divs);

    获取body
        var body = document.body;
        console.dir(body);

    获取html
        var html = document.documentElement;
        console.dir(html);

事件基础

事件的组成（事件三要素）：
    事件源（事件被触发的对象）
    事件类型（如何触发）  
    事件处理程序（通过一个函数赋值的方式进行完成）

    鼠标点击     onclick  
    鼠标经过     onmouseover  
    鼠标离开     onmouseout  
    获得鼠标焦点  onfocus  
    失去鼠标焦点  onblur  
    鼠标弹起     onmouseup  
    鼠标按下     onmousedown

    btn.onclick = function () {

    }

操作元素

改变元素内容

InnerText非便准标签
    在用做改变内容时：不能识别html标签，同时去除空格和换行
    事件源.innerText = '<strong>今天</strong>真美好'
    在用做文件读取时：去除标签同时去除空格和换行
    console.log(事件源.innerText);

innerHTML识别html标签  满足W3C标准
	在做改变内容时：能识别html标签，同时保留空格和换行
    事件源.innerHTML = '<strong>今天</strong>真美好';
    在用做文件读取时：保留标签同时保留空格和换行
    console.log(事件源.innerHTML);

元素可以不用添加事件，改变元素内容
    事件源.innerText = '<strong>今天</strong>真美好'
    事件源.innerHTML = '<strong>今天</strong>真美好';

也可以通过添加事件改变元素内容
    事件源.事件类型 = function () {
        事件源.innerText = '<strong>今天</strong>真美好'
        事件源.innerHTML = '<strong>今天</strong>真美好';
    }

常用属性操作

img的src属性
    事件源.事件类型 = function () {
        //img的src属性
        img事件源.src = "images/zxy.jpg";
    }
    
input的value属性和disabled属性
    事件源.事件类型 = function () {
        //修改表单里面的值通过value修改
        input事件源.value = '被点击了';
        //要求某个表单被禁用，不能再点击disabled 我们想要这个按钮button禁用
        button事件源.disabled = true;
        //表单禁用
        input事件源.disabled =true;
    }

修改样式
	使用element.style获得修改元素样式
        适合元素较少，功能简单的情况
        事件源.事件类型 = function () {
            //产生的为行内样式，权重较高，命名方式驼峰命名
            需要修改的事件源.style.backgroundColor = 'red';
            //this指向事件函数的调用者
            this.style.width = '250px';
        }
    
    element.className修改样式
        适合样式较多，功能复杂的情况    类名会改变
        1、创建一个css类名样式 将样式添加在里面
        2、通过element.className修改样式
        事件源.事件类型 = function () {
            this.className = '类名';
            //如果要保留原先的类名   多类名选择器
            //this.className = '原先类名 需要添加的类名';
        }

排他思想

先排除所有人，在修改我自己
//获取所有元素
var btns = document.querySelectorAll('button');
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            //去除所有元素
            for (var j = 0; j < btns.length; j++) {
            btns[j].style.backgroundColor = '';
        }
            //点击自己变色
            this.style.backgroundColor = 'pink';
    }
}

自定义属性

自定义属性： 属性="属性值"
	<div id="demo" index="1"></div>
设置H5自定义属性
    以date-开头做为属性名并赋值 
    <div data-index="1"></div>

获取属性的值
    element.属性
        获取的为内置属性，元素本身自带的属性
        console.log(div.id);
        
    element.getAttribute('属性')
        主要获得自定义属性，可以由程序员自定义的属性
        console.log(div.getAttribute('id'));
		console.log(div.getAttribute('index'));
		
	H5新增方法
		dataset是一个集合里面存放了所有data开头的自定义属性
		只能获取data-开头的属性
		console.log(div.dataset.index);
		console.log(div.dataset['index']);
		
        自定义属性设置时中间可以用短横线连接data-list-name="andy
        <div id="demo" data-list-name="andy"></div>
        
        获取时不需要中间短横线连接，要进行驼峰命名listName
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);

设置属性的值
    element.属性= '值';
        设置内置属性
        div.id = 'text';
    
    element.setAttribute('属性', '值');
    	主要针对自定义属性
    	div.setAttribute('index', '2');

移除属性
	element.removeAttribute('属性');
		div.removeAttribute('index');

节点操作

节点层级

结点：
	至少拥有结点类型nodeType，节点名称nodeName，节点值nodeValue三个基本属性
    元素结点nodeType为1
    属性结点nodeType为2
    文本结点nodeType为3（文本节点包含文字、空格、换行等）

父节点 
	node.parentNode  
	如果找不到父节点就返回为空
    console.log(div.parentNode);

子节点 
	parentNode.childNodes
	childNodes所有的子节点包含 元素节点 文本节点等
    console.log(ul.childNodes);

获取所有子元素节点
    通过对parentNode.childNodes获取所有的子节点，在通过元素节点的nodeType为1进行判断获取
    for (var i = 0; i < ul.childNodes.length; i++) {
        if(ul.childNodes[i].nodeType == 1){
        	console.log(ul.childNodes[i]);
        }
    }
    
    通过parentNode.children获取  非标准   返回的是一个伪数组
    console.log(ul.children);

获取第一个或最后一个子节点
	firstChild 第一个子节点  包含所有节点
	console.log(ul.firstChild);
	
	latChild 最后一个子节点  包含所有节点
	console.log(ul.lastChild);
	
	firstElementChild  第一个子元素节点   ie9以上支持
	console.log(ul.firstElementChild);
	
	lateElementChild  最后一个子元素节点  ie9以上支持
	console.log(ul.lastElementChild);
	
	实际开发中获取第一个子元素节点
	console.log(ul.children[0]);
	
    实际开发中获取最后一个子元素节点
    console.log(ul.children[ul.children.length - 1]);

获取兄弟节点
	node.nextSibling  获取当前元素下一个兄弟节点  包含所有节点
	console.log(ol.nextSibling);
	
	node.previousSibling 获取当前元素上一个兄弟节点  包含所有节点
	console.log(ol.previousSibling);
	
	node.nextElementSibling     获取当前元素下一个兄弟元素节点   ie9以上支持
	console.log(ol.nextElementSibling);

	node.previousElementSibling     获取当前元素上一个兄弟元素节点   ie9以上支持
	console.log(ol.previousElementSibling);

	实际开发中通过封装函数进行获取   获取当前元素下一个兄弟元素节点
	function getNextElementSibling(element) {
        var el = element;
        //使el等于el的下一个节点，直到出现为元素节点时返回节点
        while (el = el.nextSibling){
            if (el.nodeType === 1){
            	return el;
            }
        }
        return null;
	}
	console.log(getNextElementSibling(ol));

节点操作

创建节点
	document.createElement('元素')
    var li = document.createElement('li');
    var p = document.createElement('p');

添加节点
	添加到父元素子节点末尾  相当于CSS中after伪元素
		node.appendChild(child)
    	ul.appendChild(创建的节点);

	添加到父元素指定节点元素前面  相当于CSS中before伪元素
		node.insertBefore(child,指定节点元素)
        div.insertBefore(p,span);
    
    添加在子元素的第一个
    	node.insertBefore(child, node.children[0])

删除节点  
	node.removeChild(child)
    div.removeChild(span);

复制节点
	node.cloneNode()
	括号中为空或者false则为浅拷贝，只复制节点本身，不克隆里面子节点  括号中为true则为深拷贝，克隆里面子节点
    var cloneDiv = div.cloneNode();
    div.appendChild(cloneDiv);

事件高级

注册事件

传统方式注册事件
	注册事件唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将覆盖前面注册的处理函数
    事件源.事件对象 = function () {

	}       

方法监听注册事件 ie9之前不支持
	事件.添加 事件 监听 ('事件类型不用带on', 事件处理函数)，同一个元素同一个事件可以添加多个监听器（事件处理程序）
    事件源.addEventListener('事件对象',function () {
            
    })
      
兼容性处理   先照顾大多数浏览器，在照顾特殊处理器
    function addEventListener(element,eventName,fn){    //事件对象  事件处理方式  函数
        //判断当前浏览器是否支持 addEventListener方法
        if(element.addEventListener){
            element.addEventListener(eventName ,fn); //第三个参数默认为false
        }else if (element.attachEvent){   //ie9之前浏览器使用
            element.attachEvent('on'+eventName, fn);
        }else {
            //相当于 element.onclick = fn
            element['on' + eventName] = fn;
        }
    }

删除事件

传统方式删除事件
    事件源.事件对象 = function () {

        //传统方式删除事件
        this.onclick = null;
    }
        
方法监听的方式删除事件        
	divs[1].addEventListener('click', fn);   //调用函数不需要添加小括号
	function fn() {
		
		//方法监听的方式删除事件
		//事件. 删除 事件 监听('事件类型不用带on', 事件处理函数)
		divs[1].removeEventListener('click', fn);
}

删除事件兼容性问题
    function removeEventListener(element, eventName, fn) {     //事件对象  事件处理方式  函数
        if (element.removeEventListener){
            element.removeEventListener(eventName,fn)  //第三个参数默认为false
        }else if (element.detachEvent){   //ie9之前浏览器使用
            element.detachEvent('on'+eventName, fn);
        }else {
            //相当于 element.onclick = null
            element['on' + eventName] = null;
        }
    }

事件流

事件流：
	事件发生时会在元素节点之间按着特定的顺序传播，这个传播的过程称之为事件流
    捕获阶段：从DOM最顶节元素开始，逐级向下传播到具体元素接收的过程
    当前目标阶段：
    冒泡阶段：从具体元素开始接收，逐级向上转播到DOM最顶层节点的过程
    js代码中只能执行捕获或者冒泡其中一个阶段
    onclick和attachEvent只能得到冒泡阶段
    addEventListener('事件处理方法', 函数, unCapture) 如果第三个参数是true则为事件捕获阶段调用事件处理程序；如果为false或者不写则表示事件冒泡阶段调用事件处理程序
    有的事件没有冒泡：onblur onfocus onmouseenter onmouseleave
    
事件捕获
	第三个参数为true
    从上向下捕获，当点击小盒子时会先执行父盒子函数在执行子盒子函数  先
    son.addEventListener('click',function () {
        console.log('son');
    },true)
    father.addEventListener('click',function () {
        console.log('father');
     },true)

事件冒泡
	第三个参数为false或者不写
	从下向上冒泡，当点击小盒子时会先执行子盒子函数在执行父盒子函数
	son.addEventListener('click',function (e) {
    	console.log('son');
		//阻止冒泡
		e.stopPropagation();
	})
	father.addEventListener('click',function () {
		console.log('father');
	})

事件对象

事件对象
	event 就是一个事件对象 写道监听函数小括号里面 可以当作形参看待  可以该名字 通常用 e evt event
	事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
	事件对象是我们事件一系列的集合，跟事件相关的 比如鼠标点击就包含了鼠标的相关信息，键盘敲入就包含键盘相关信息
    div.onclick = function (event) {
        //console.log(event);
        //ie6、7、8会有兼容性问题，通过window.event获取
        event = event || window.event;
        console.log(event);
        //返回事件类型
        console.log(event.type);
    }

    ul.onclick = function (e) {
        //this 哪个元素绑定事件就返回哪个元素
        console.log(this);
        //e.target 点击哪个元素就返回哪个元素   返回触发事件
        console.log(e.target);
    }

    a.addEventListener('click',function (e) {
        //阻止默认事件   例如超链接不跳转
        e.preventDefault();
    })

事件委托

事件委托：
	不是每个字节点单独设置监听器，而是在事件监听器设置在父节点上，然后利用冒泡原理影响每个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function (e) {
    console.log('点我');

        //获得点击对象
        e.target.style.backgroundColor = 'pink';

        //排他思想
        for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].onclick = function () {
                //去除所有元素
                for (var j = 0; j < ul.children.length; j++) {
                	ul.children[j].style.backgroundColor = '';
            	}
                //点击自己变色
                this.style.backgroundColor = 'pink';
            }
        }
    })

常用鼠标事件

常用鼠标事件：
    鼠标点击左键触发 onclick
    鼠标经过触发 onmouseover
    鼠标离开触发 onmouseout
    获得鼠标焦点触发 onfocus
    失去鼠标焦点触发 onblur
    鼠标移动触发 onmousemove
    鼠标弹起触发 onmouseup
    鼠标按下触发 onmousedown

禁用右键菜单
    document.addEventListener('contextmenu',function (e) {
        //阻止默认事件
        e.preventDefault();
    })
静止鼠标选中
    document.addEventListener('selectstart', function (e) {
    	e.preventDefault();
    })
鼠标事件对象
    document.addEventListener('click', function (e) {
        console.log(e);
        //返回鼠标相对于浏览器窗口的可视区域X坐标
        console.log(e.clientX);
        //返回鼠标相对于浏览器窗口的可视区域Y坐标
        console.log(e.clientY);
        //返回鼠标相对于文档页面的X坐标   ie9以上支持
        console.log(e.pageX);
        //返回鼠标相对于文档页面的Y坐标
        console.log(e.pageY);
        //返回鼠标相对于电脑屏幕的X坐标
        console.log(e.screenX);
        //返回鼠标相对于电脑屏幕的Y坐标
        console.log(e.screenY);
    })

常用键盘事件

常用键盘事件
    某个键盘被松开时触发 onkeyup
        document.addEventListener('keyup', function (e) {
            console.log('我被弹起了up');
            console.log(e);
        })
    某个键盘被按下时触发 onkeydown
        document.addEventListener('keydown', function () {
            console.log('我被按下了down');
        })
    某个键盘被按下时触发 但是不能识别功能键 onkeypress
        document.addEventListener('keypress', function () {
            console.log('我被按下了press');
        })
    三个事件的执行顺序为：onkeydown onkeypress onkeyup
    
    键盘对象中的keyCode属性可以得到相应键的ASII码值
    	keyup和keydown不区分大小写得到的是小写ASII；keypress区分大小写
    	console.log(e.keyCode);
    	
    键盘对象中的key属性可以得到相应键输入值
    	console.log(e.key);

BOM

window常见事件

 窗口加载事件
     当文档中内容完全加载完成后（包括图像，脚本文件，CSS,文件等）就会触发该事件
     传统注册事件只能写一次，如果写多个则以最后一个为准
     window.onload = function () {

    }
    
    window.addEventListener('load', function () {
    
    })
    
    仅当DOM加载完成后（不包括样式表，图片，flash等）触发    ie9以上支持
    document.addEventListener('DOMContentLoaded', function () {

    })
    
调整窗口大小事件
    只要窗口大小发生变化就会触发事件
    window.onresize = function () {

	}

    window.addEventListener('resize', function () {
   
    })
    
     // 获取屏幕宽度
    console.log(window.innerWidth);

定时器

setTimeout()定时器
    window.setTimeout(调用函数, [延迟毫秒数]);
    当时间到了就调用函数  window调用时可以省略
    定时器可能有很多，经常给定时器赋值一个标识符
    var time = setTimeout(calkback, 2000);
    function calkback() {
    }
    
    停止定时器
    window.clearTimeout(定时器名称);
    clearTimeout(time);
    
setInterval()定时器
    window.setInterval(回调函数, [间隔毫秒数])
    window可以省略  反复调用一个函数，每隔一段时间调用一次
    var time = setInterval(function () {
    
    }, 1000)
    
    停止定时器
    window.clearInterval(定时器名称);
    clearInterval(time);

JS执行机制

同步：前一个认为执行结束后执行后一个任务
异步：同时进行多个任务

同步任务都是在主线程上执行，形成一个执行栈
异步是通过回调函数实现的  异步任务（回调函数）是放在任务队列（消息队列）当中
异步任务通常有三种类型
普通事件：如click，resize等
资源加载：load，error等
定时器：setInterval，setTimeout

先执行执行栈中的同步任务，遇见异步任务（回调函数），放到任务队列（消息队列）当中，等待同步任务全部执行，系统就会按次序读取任务队列中的异步任务。

location对象

location属性：用于获取或设置窗体的URL，并且可以用于解析URL
URL统一资源定位符
一般语法格式
通信协议://主机（域名）[:端口号]/路径/[?参数]#片段
protocol://hose[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#pink

location对象的属性
	返回主机名host  返回端口号port  返回路径pathname  返回片段hash
    获取URL
    console.log(location.href);
    设置URL，跳转的新的页面
    location.href = 'http://www.itcast.cn'
    获取参数
    location.search
    
location对象的方法
    与href一样可以跳转页面，保留历史浏览记录可以进行后退操作
    location.assign(URL);
	跳转页面，不保留历史浏览记录不能进行后退操作
	location.replace(URL);
	重新刷新页面  相当于属性按钮或者f5  如果参数为true表示强制刷新相当于ctrl+f5
	location.reload();

navigator对象

 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            window.location.href = ""; //手机
        }else {
            window.location.href = ""; //电脑
        }

history对象

后退：history.back()
前进：history.forward()
前进后退：history.go(参数)  如果参数为1前进一个网页，如果参数为-1后退一个网页