Web API介绍

获取元素

var nav = document.getElementById('nav'); // 这个获得id 属性
var lis = document.getElementsByTagName('li')//这个获得li 元素
 var nav = document.getElementByClassName('nav'); 这个获得class 属性

H5新增获取属性方法

var li = document.querySelector('li')获取一个li元素
querySelectorall获取全部li  class属性('.li')  id属性（’#li‘）

时间三要素

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

 //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
btn.onclick = null;  删除事件，再点击不谈对话框

常见的鼠标事件

改变元素内容（获取或者设置）

样式属性修改添加

设置属性值

// 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

移除属性

// class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');

元素节点

父节点 parentNode
得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(xxx.parentNode);

children 获取所有的子元素节点 
console.log(ul.children); 获取ul所有li
children[0] 返回第一个子元素节点
children[ul.children.length - 1]) 返回第最后一个子元素节点

建立子节点
var li = document.createElement('li');

添加节点 node.appendChild(child)  node 父级  child 是子级 最后面追加元素  类似于数组中的push
ul.appendChild(li);

添加节点 node.insertBefore(child, 指定元素); node 父级  child 是子级
ul.insertBefore(li, ul.children[0]);

删除节点

删除元素  node.removeChild(child)
ul.removeChild(ul.children[0]);删除ul第0个孩子

克隆节点

var lili = ul.children[0].cloneNode(true);克隆ul第一个孩子li
括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
括号为true 深拷贝 复制标签复制里面的内容

事件监听

事件侦听注册事件
同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

btns[1].addEventListener('click', function() {
     alert(22);  侦听器1
     alert(44);  侦听器2
里面的事件类型是字符串 必定加引号 而且不带on
removeEventListener删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }只弹出一次对话框
son.addEventListener('click', function() {
            alert('son');
e.stopPropagation()// 阻止事件冒泡
        },false);
冒泡阶段 son -> father ->body -> html -> document
捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son

事件对象

传统事件div.addEventListener('click', function(e)
监听事件ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this)// this指向ul

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);  // li

            })

bom事件

window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
等页面加载完运行，可以放在html任何位置

定时器

setTimeout(function() {
          console.log('时间到了');
         }, 2000);  // 2秒后运行
第二种写法
function callback() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(callback, 3000);
定时器setInterval持续输出

设置跳转页面

设置跳转页面   location.href =‘网址’

元素偏移

1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(xx.offsetTop);
        console.log(xx.offsetLeft);
        // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
        // 2.可以得到元素自身的大小 宽度和高度 是包含padding + border + width 
        console.log(xx.offsetWidth);
        console.log(xx.offsetHeight);
        // 3. 返回带有定位的父亲 否则返回的是body
        console.log(xx.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位