javascript 高级程序设计

在HTML中使用javascript

1、<script> 元素
    （1） async 可选  应该立即下载脚本，但不影响页面的其他操作（只对外部脚本有效）
    （2） charset 可选 通过src属性指定代码的字符集
    （3） defer 可选 脚本可以延迟到文档完全别解析和显示之后执行（只对外部脚本有效）
    （4） language 废弃
    （5） src 可选 包含执行代码的外部文件
    （6） type 可选 编写代码使用的脚本语言的内容类型
  引入方式
    （1）直接在页面中嵌入  只需为<script>指定type属性
    （2）使用外部文件 src  属性必须指出  外部文件可以是与包含页面位于同一个服务器文件，也可以是其他任何域中的文件  优点：可维护  可缓存  适应未来
  执行顺序
    从上到下依次被解析
1.1、标签位置
    body 最下面  </body>前面
1.2、延迟脚本  最佳方案：页面底部
1.3、异步脚本  不要在加载期间修改dom

基本概念

语法
数据类型
流程控制语句
函数

1、 语法
1.1 区分大小写
1.2 标识符 变量 函数 属性的名字 函数的参数 不能把关键字、保留字、true、false、null 用作标识符
第一个字符必须是一个字母、下划线（_)、或美元符号($)
其他字符可是字母 下划线 美元符号 数字
最佳 ** 驼峰大小写 **
1.3 注释
单行注释
/* /
多行注释
/
*
*
*/
1.4 严格模式
use strict
1.5 语句
以分号结尾
2、关键字和保留字
关键字 表示控制语句的开始和结束或用于执行特定的操作
保留字 导致“Identifier Expected” 错误
3、变量
松散类型
定义变量 var a (变量名) 未初始化 undefined ==>var 定义一个变量在函数退出后就会被销毁
var a = 1 ,b = true , c = "hello world";
4、数据类型
5种基本数据类型 undefined null boolean number string
1复杂数据类型 object
typeof 操作符来检测
object 这个值可能是对象或者null
1.undefined 只有一个值 未初始化
2.null 第二个只有一个值的数据类型 表示一个空对象指针
3.Boolean === true false 区分大小写
4.number 整数和浮点数
NaN 任何涉及到NaN的操作都会返回NaN NaN与任何值都不相等

  数值转换
    Number()  用于任何数据类型
        true false  ==》 1  0 
        数字值
        null  ==》 0 
        undefined  ==> NaN
        string   只包含数字   ==》 十进制
                 包含浮点  ==》 浮点数值
                 十六进制 ==》 十进制
                 空 ==》  0 
                 以外  ==>  NaN
        object  valueOf()   toString()
    parseInt()  
        如果第一个字符不是数字会符号  ==》NaN
        空字符串  ==》0 
        不具有解析八进制的能力
    parseFloat()  解析到一个无效的浮点字符为止  只解析十进制
5.string 
    ""    ''
    转换为字符串   toString()
                String()  null ==》null  undefined ==>undefined
6.Object  一组数据和功能的集合
    constructor  保存着用于创建当前对象的函数
    hasOwnProperty  检查给定的属性在当前对象实例中是否存在
    isPrototypeOf 检查传入的对象是否是当前对象的原型
    propertyIsEnumerable  检查给定的属性是否能够使用for-in 语句来枚举
    toLocaleString  返回对象的字符串表示  该字符串与执行环境的地区对应
    toString  返回对象的字符串表示
    valueOf 返回的字符串  数值 布尔 表示   与toString  返回值相同

5、操作符
一元操作符 操作一个值
递增递减
一元加减 “+“ 只是进行转换 ”-“ 进行转化的同时也进行计算
位操作符 有符号整数 无符号整数
布尔操作符
！ & ||
乘性操作符
* /
加性操作符
+ -
关系操作符
< > <= >=
相等操作符
== !=
=== !==
条件操作符
条件表达式
赋值运算符
=
逗号操作符
,
6、语句
if 语句
do-while
while
for
for-in 枚举对象的属性
es6 增加for of
lable 添加标签
break continue 控制循环中的代码执行
whth 将代码的作用域设置到一个特定的对象中
switch
7、函数 function
调用函数

 return 非必须  (1)  返回值  （2）结束函数

 理解参数
    ECMAScript 中的参数在内部是用一个数组来表示  通过arguments对象来访问这个参数数组（并没有数组实例） length 属性
    命名的参数只提供便利 但不是必需的
    arguments可以与命名参数一起使用    值与对应的命名参数的值保持同步

变量 作用域 和内存

变量  基本类型值   简单的数据段
      引用类型值    可能由多个值构成的对象
        引用类型的值中的属性可以是基本类型也可以是引用类型
        引用 可以动态的添加属性  基本类型不可以

     特点：
     基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中。
     从一个变量向另一个变量复制基本类型的值，会创建这个值的副本，
     引用类型的值是对象，保存在堆内存中，
     包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针，
     从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终指向同一个对象。
    传递参数
        所有函数的参数按值传递，也就是说 把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。
    检测类型
        typeof  只能检测5种  string  number  undefined  boolean  object
        instanceof 检测引用类型的值

        * 使用typeof时，function规范要求返回‘function’,但是在firfox以及ie的某些版本中会返回‘object’.
        * ES6中新增加了一个类型‘Symbol’，使用typeof检测这个类型时会返回'Symbol'。
        * ES6中新增的Set，Map，使用typeof检测时会返回'object'。

    执行环境
        每一个执行环境都有一个与之关联的变量对象
        全局执行环境  Window
            代码执行完毕  该环境也被销毁  保存在其中的所有变量和函数定义也随之销毁
        函数执行环境
            每一个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入到一个环境栈中。而在函数执行之后，栈弹出。把控制权返回给之前的执行环境。

            当代码在一个环境中执行，会创建变量对象的一个作用域链
            用途：保证执行环境有权访问的所有变量和函数的有序访问。

            在局部作用域中定义的变量可以在局部环境中与全局变量互换使用。

            内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数，这些环境之间的联系是线性的、有次序的。

引用类型

引用类型是一种数据结构，用于将数据和功能组织在一起  
对象是某个特定引用类型的实例，新对象是使用new 操作符后跟一个构造函数来创建

object 
    创建object的两种方式
     一、new 操作符
        var person = new Object();
        person.name = "smy";
        person.age = 18;
     二、对象字面量
        var person = {
            name:"smy",
            age:18
        }

    访问对象属性时使用都是  .   也可以使用方括号
    alert(person["name"])   优点：可以通过变量来访问属性
    alert(person.name)
array
    创建数组的两种方式
        一、使用Array构造函数
            var books = new Array();
            或者  var books = new Array("js","css","html")
            也可以省略 new 
        二、数组字面量表示法
            var books = ["html","css","js"]
            索引 只能使用数字
            alert(books[0]);
            books[1] = "jquery";
            length  不是只读 可改变
        检测数组
            Array.isArray()
        转换方法
            toLocaleString()、toString()、valueOf()
        栈方法
            push() 尾部增加 并返回修改后数组的长度
            pop()  尾部移除 减少数组的length  返回移除项
        队列方法
            unshift() 前边添加任意项，并返回新数组的长度
            shift() 移除数组的第一个并返回该项  数组长度- 1 
        重新排序方法
            reverse()  翻转
            sort()  升序
        操作方法
            concat()  基于当前数组中的所有项创建一个新的数组
            slice()  接受一个或两个参数  即 起始  结束位置   但不包括结束位置的项。
            splice()
            作用： 删除 splice(0,2)  删除数组中的前两项
                  插入 splice(0,2,"red","blue") 从第二个插入
                  替换 splice(2,1,"red","blue") 删除当前数组位置2的项，从位置2插入字符串。
                最终返回一个数组，该数组包含从原始数组中删除的项（如果没有 返回空数组）
        位置方法
            接受两个参数  1.要查找项（要求严格相等）  2、查找起点位置的索引（可选）
            返回要查找的项在数组中的位置，没有找到返回 -1
            indexOf() 从开头开始查找
            lastIndexOf() 从末尾开始查找
        迭代方法
            5种  接受两个参数 1.要在每一项上运行的函数 2.运行该函数的作用域对象---影响this的值（可选）
            传入这些方法中的函数都会接受三个参数 数组项的值、该项在数组中的位置、数组对象本身。
            every() 对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true
            filter() 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组
            forEach() 对数组中的每一项运行给定函数，没有返回值
            map() 对数组中的每一项运行给定函数，返回每次函数条用的结果组成的数组
            some() 对数组中的每一项运行给定函数，如果该函数对任一项返回true 则返回true。
        归并方法
            迭代所有项，然后构建一个最终返回值
            reduce() 从第一项开始 逐个遍历
            reduceRight() 最后一项
            接受两个参数 1.在每一项上调用的函数 2.作为归并基础的初始值（可选）
            函数接受4个参数  前一个值、当前值、项的索引、数组对象 
            返回值都会作为第一个参数自动传给下一项。
Date
    var now = new Date()
    Date.parse() 
    Date.UTC() 返回表示日期的毫秒数
    Date.now() 调用这个方法时的日期和时间毫秒数
        var start = Date.now(); 如果浏览器不支持 var  start = + new Date();
        doSomething();
        var stop = Date.now(),
        result = stop - start;
    继承的方法
        在不同的浏览器中返回的日期和时间格式不同
    日期格式化方法
        toDateString() 以特定于实现的格式展示星期、月、日、年 (浏览器而异)
        toTimeString()                     时分秒地区
        toLocaleDateString()  特定地区的                    （浏览器而异）
        toLocaleTimeString()   特定地区的
        toUTCString() 特定于实现的格式完整的UTC日期
    时间组件的方法
        。。。
RegExp
    g 全局
    i 不区分大小写
    m 多行
      es6增加了 y u 两个标志符
    元字符需要转义  ( [ { \ ^ $ } ] ) ? * + .
    创建方式
        一、字面量
        var pattern = /[bc] at /i
        二、RexExp构造函数  接受两个参 数  1.匹配的字符串的模式 2.可选标志符串。
        var pattern2 = new RexExp("[bc]at","i")
    实例方法
        exec() 专门捕获组设计 接受一个参数 返回包含第一个匹配项信息的数组
        test() 接受一个字符串参数  匹配 true  否则 false
Function
    每一个函数都是function 的实例  而且都与其他引用类型一样具有属性和方法
    函数是对象，因此函数名实际上也是一个指向函数对象的指针。
    函数通常使用函数声明语法定义的
      function sum (num1,num2){
          return num1+ num2
      }
      函数表达式定义函数
         var sum = function(num1,num2){
             return num1+ num2
         }
      使用Function构造函数
        var sum = new Function("num1","num2","return num1 + num2")  不推荐
    一个函数可能会有多个名字
    
    没有重载  将函数想象指针
     第二个函数实际上覆盖了上一个函数
    
    函数声明与函数表达式
        先读取函数声明，并使其在执行任何代码之前可用，表达式必须等到解析器执行到它所在的代码执行，才会真正执行。
    作为值的函数
     函数名本身就是变量，函数也可以作为值来使用。也就是说，不仅可以将像传递参数一样吧一个函数传递给另一个函数，也可以将函数作为另一个函数的结果返回。
    内部属性
        arguments 
            类数组对象，包含传入函数中的所有参数
            callee属性，是一个指针，指向拥有这个arguments对象的函数
        this 引用的是函数执行的环境对象---或者说是this的值
        函数的名字仅仅是一个包含指针的变量而已。
        caller 保存着调用当前函数的函数的引用，如果全局作用域中调用当前函数，他的值为null
    属性和方法
        length 表示函数希望接收的命名函数参数的个数  
        prototype 保存他们所有实例方法的真正所在，不可枚举，for-in无法发现
        在特定的作用域中调用函数，实际上等于设置函数体内this对象的值
        apply() 接收两个参数 一个是在其中运行函数的作用域 另一个参数数组（可以是array实例，也可以说是arguments对象
        call() 作用类似apply（）区别在于 ，传递给函数的参数必须逐个列举出来
        bind() 创建一个函数的实例，其this会被绑定到传给bind（）函数的值。
基本包装类型  Boolean Number String
    与引用类型的区别，对象的生存期
    Boolean 
        与引用类型的布尔区别   1.typeof 基本类型==》boolean
                                      引用类型==》object
                             2.Boolean对象是Boolean类型的实例  instanceof  ==>true
                               c测试基本类型布尔返回false
    Number
        toFixed() 按照指定的小数位返回数值的字符串
        toExponential() 返回以指数表示法，表示的数值的字符串形式
    String
        字符方法
            charAt() 以单字符字符串的形式返回给定位置的那个字符
            charCodeAt()  字符编码
        字符串的方法
            concat() 用于将一或多个字符串拼接起来，返回拼接得到的新字符串
            slice()
            substr()
            substring()
        字符串位置的方法
            indexOf()
            lastIndexOf()
        trim()方法
            创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果。
        字符串大小写转换
            toLowerCase()
            toLocaleLowerCase() 特定地区
            toUpperCase()
            toLocaleUpperCase() 特定地区
        字符串的模式匹配方法
            match() 接受一个参数 表达式or RegExp对象  返回一个数组
            search() 返回字符串中的第一个匹配项的索引  没有  返回 -1  从头开始查
        localeCompare() 比较两个字符串并返回 下列值中的一个：
            a 在 b 之前  -1
            a = b        0
            a 在 b 之后  1
        forCharCode() 接受一个或者多个字符编码
        HTML 方法
单体内置对象
    Globle 对象  不属于其他 对象的属性和方法，最终都是它的属性和方法
        URL 编码
        eval() 方法
        globle对象的属性
        Windows对象
    Math对象
        min()
        max()
        舍入方法
            Math.ceil() 向上舍入
            Math.floor() 向下舍入
            Math.round() 向标准舍入
        random() 返回大于等于0 小鱼1 的一个随机数
            公式：值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)
        其他方法
            Math.abs(num) 绝对值 、幂次方、对数、平方根......

面向对象的程序设计

无序属性的集合，其属性可以包含基本值，对象或者函数

理解对象
    属性类型
        数据属性
            [[Configurable]]
            [[Enumerable]]
            [[Writable]]
            [[Value]]

            Object.defineProperty() 接受三个参数 属性所在的对象、属性的名字、一个描述符对象
        访问器属性
            getter、setter

            [[Configurable]]
            [[Enumerable]]
            [[Get]] 读取
            [[Set]] 写入
                 不能直接定义 必须使用Object.defineProperty()来定义
    定义多个属性
        Object.defineProperties() 接受两个对象参数 1.添加和修改其属性的对象 2.对象的属性与第一个对象中要添加或修改的属性一一对应。
    读取属性的特性
        Object.getOwnPropertyDescriptor() 去的给定属性的描述符
            属性所在的对象和要读取其描述符的属性名称

创建对象
    对象可以在代码执行过程中创建和增强，因此具有动态性而非严格定义的实体。

    工厂模式
        解决多个相似对象的问题，但未解决对象识别的问题。
    构造函数模式
        构造函数始终以一个大写字母开头，非构造函数则应该以一个小写字母开头

        使用new 操作符，步骤
        1.创建一个新对象
        2.将构造函数的作用域赋给新对象（因此this指向这个新对象）
        3.执行构造函数中的代码（为这个新对象添加属性）
        4.返回新对象

        将构造函数当做函数
            区别：调用他们的方式不同，只要通过new操作符来调用的，那么他就可以作为构造函数。
            缺点：每一个方法都要在每一个实例上重新创建一遍。
    原型模式
        每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
    构造函数与原型的组合
        构造函数用于定义实例属性，原型用于定义方法和共享的属性
    动态原型模式
        把所有的信息封装在构造函数，而通过在构造函数中初始化缘溪行，又保持同时使用构造函数和原型的优点。
    寄生构造函数
        创建一个函数，这个函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象。
    稳妥构造函数
        新创建对象的实例方法不引用this,不使用new操作符调用函数。
继承
    接口继承  实现继承
        原型链
        构建：是通过将一个类型的实例赋值给另一个构造函数的原型实现的。
            这样子类型就能够访问超类型的所有属性和方法。
            
            利用原型让一个引用类型继承另一个引用类型的属性和方法。
            如果确定原型和实例的关系
                1.instanceof操作符
                2.isPrototypeOf()
            谨慎定义方法
                给原型添加方法的代码一定要放在替换原型的语句之后。
                通过原型链继承时，不能使用对象字面量创建原型方法。
        借用构造函数
            call()
            apply()
            在将来新创建的对象上执行构造函数。
        组合继承
            使用原型链实现对原型属性方法的继承，而通过借用构造函数来实现对实例属性的继承。
        原型式继承
            基于已有的对象创建新对象，不必印尼次创建自定义类型。
        寄生式继承
            创建一个仅用于封装继承过程的函数，该函数内部以某种方式来增强对象，最后再像真的是它做了所有的工作一样返回对象。
        寄生组合式继承 （最有效的方式）

函数表达式

特点：
不同于函数声明，函数声明要求必须有名字，但表达式不用，没有名字的表达式也叫匿名函数。

定义函数的两种
    1.函数声明
        函数声明提升
            在执行代码之前会先读取函数声明。
            sayHi()
            function sayHi(){
                alert("hi");
            }
    2.函数表达式
        必须先赋值才能使用
        var functionName = function(arg0,arg1,arg2){
            函数体
        }
递归
    使用回调提升性能。
    通过使用argument.callee代替函数名，确保无论怎样调用函数都不会出问题。
闭包
    有权访问另一个函数作用域中的变量函数。

    创建闭包的方式：在一个函数内部创建另一个函数
                    当某个函数调用的，会创建一个执行环境，以及相应的作用域链，然后，使用arguments和其他命名参数的值来初始化函数的活动对象。但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，....直至为作用域链终点的全局执行环境。

                    作用域链的本质是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。

                    闭包与变量
                       闭包保存所保存的是整个变量的对象，而不是某个特殊的变量。
                    this
                        this对象是在运行时基于函数的执行环境绑定的
                        在全局中 this 等于Window、
                        当作位某个对象方法调用时，this等于那个对象。
                        匿名函数的执行环境具有全局性，通常执行window

                        this与argument存在同样的问题，如果想访问作用域中的argument 对象，必须将该对象的引用保存到另一个闭包能访问的变量中。

                        var name = "The window"
                        var object = {
                            name : "My Object",

                            getNameFunc :function(){
                                var that = this;
                                return function(){
                                    return that.name;
                                };
                            }
                        };
                        alert(object.getNameFunc()());

                      内存泄漏

                    模仿块级作用域
                        块语句中定义变量，实际上是在包含函数中而非语句中创建的。

                        function Number(count){
                            for(var i = 0;i < count;i++){
                                alert(i)
                            }
                            alert(i)  //计数
                        }

                         function Number(count){
                            for(var i = 0;i < count;i++){
                                alert(i)
                            }
                            var i;//重新声明变量
                            alert(i)  //计数
                        }
                        在es6 中有所改变，  let i ;  不可在同一作用域中，多次声明

                        (function(){
                            //这里是块级作用域
                        })()
                        立即执行函数。

                    私有变量
                        任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数外部访问这些变量

                        私有变量包括：函数的参数，局部变量和在函数内部定义的其他函数。

                        function  add(num1,num2){
                            var sum = num1 + num2;
                            return sum;
                        }
                        
                        静态私有变量
                            初始化未经声明的变量，总是会创建一个全局变量
                            在严格模式下，给未经声明的变量赋值会导致错误。
                        模块模式  为单例  （只有一个实例的对象）创建私有变量和特权方法。
                        增强的模块模式  适合单例必须是某种类型的实例，同时还必须添加某些属性和伙房对其加以增强的情况。

BOM 浏览器对象模型

1.window 对象
    BOM 的核心对象 window，它表示一个浏览器的实例

    全局作用域
        1.window对象同时扮演着 ECMScript 中的Global 对象角色, 因此全局声作用域中的声明的变量、函数都会变成window对象的属性和方法。
        2.全局变量不能通过delete删除，而直接在window对象上定义的属性和方法。
        3.尝试访问未声明的变量会抛出错误，但是可以通过window对象，可以知道未声明的变量是否存在。
    var age = 20;
    function sayAge(){
        alert(this.age)
    }

    alert(window.age)  //29
    sayAge()   //29
    window.sayAge() //29

    窗口关系及框架
        保存在frames 集合中
        
        top指向最高（最外）层的框架，也就是浏览器窗口。
        parent始终指向当前框架的直接上层框架。  有可能与等于top
    窗口的位置
        ie  safari opear chrome 提供   screenLeft/screenTop  表示窗口相对于屏幕左方的和上方的位置。
        firefox screenX/y  

        moveTo()
        moveBy()
    窗口大小
        ie9+  safari opear chrome firefox innerWidth/innerHeight（opear，页面视区大小，减去边框）  outerWidth/outHeight（ie9+  safari  firefox 返回本身尺寸）

        通过doucument.documentElement.clientWidth/Height 保存页面视口的信息
    导航和打开窗口
        window.open()导航到一个特定的url,也可以打开一个新的浏览器窗口，接受四个参数1.要加载的URL，窗口目标，一个特性字符串，一个新页面是否取代浏览器历史记录中当前加载页面的布尔值。
    间歇调用和超时调用
        setTimeout() 接受两个参数  1.要执行的代码  以毫秒表示的时间。  返回一个id，表示超时调用。
        clearTimeout()
        setInterval() 返回一个id  用于将来某个时间取消间歇调用
    系统对话框
        alert()
        confim()
        prompt()

2.location 对象
    提供了与当前窗口中加载的文档有关的信息，还有一些导航功能。
    它既是window对象的属性，也是document的属性。
    用处：不仅只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，      让开发人员可以通过不同的属性访问这些片段。
    2.1 查询字符串参数
        function getStringArgs(){
            var qs = (location.search.length > 0 ? location.search.substring(1):""),  //去掉查询字符串开头的问号

            args = {},

            items = qs.length ? qs.split("&") : [],//分割字符串，并返回name = vaule格式的字符串数组。
            item = null,
                name = null,
                value = null,
                i = 0,
                len = items.length;
                 for( i = 0; i < len;i++){
                     item = items[i].split("="); //根据  =  分割每一项。
                        第一项为参数名，第二项为参数值的数组。
                     name = decodeURLComponent(item[0]);
                     value = desodeURLComponent(item[1]);
                     //分别解码name  和 value 

                     if(name.length){
                         args[name] = value;// name作为args对象的属性，value作为相应属性的值
                     }
                 }
                 return args;   
        }

        2.2 位置操作
            改变浏览器的位置：assign()方法并为其传递一个URL
            location.assigin("http://www.baidu.com")
            等同于：window.location = "http://baidu.com"
                    location.href = "http://baidu.com"

            禁用“后退按钮”  使用replace()方法  只接受一个参数，url,结果虽然会导致浏览器位置的改变，但不会在历史记录中生成新的记录。

            reload() 重新加载当前显示的页面。
    
3.navigator 对象
    3.1 检测插件
        非ie浏览器  plugins数组达到这个目的
            name：插件的名称
            description:插件的描述
            filename:插件的中文名
            length:插件所处理的MIME类型的数量
    3.2 注册处理程序
4.screen 对象
    基本上只用来表明客户端的能力，浏览器窗口外部的显示器的信息，如像素宽度和高度
5.history 对象
    用来保存上网的历史记录，从窗口被打开的那一刻起算。
    使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。接受一个参数，history(-1)//后退
        history(1/2) //前进一页/两页
   也可以传一个字符串参数
    history.go("wrox.com") //跳转到最近的wrox.com页面
    可以用back() 和 forward() 来代替

客户端检测

1.能力检测
    检测的目标不是识别特定的浏览器，而是识别浏览器的能力
    if(object.propertyInQuestion) {
        //使用object.propertyInQuestion
    }
    1.1 更可靠的能力检测
        想知道某个特性是否会按照适当的方式行事。
    1.2 能力检测，不是浏览器检测

2.怪癖检测
    识别浏览器的特殊行为  想知道浏览器存在什么缺陷（bug)
        var hasDontEnumQuirk = function (){
            var o = { toString :function()*{} };
            for( var prop in o){
                if(prop == "toString"){
                    return false;
                }
            }
            return true;
        } ();
3.用户代理检测
    通过检测用户代理字符串来确定实际使用的浏览器。
    在每一次http请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过js的navigator.userAgent属性访问。

DOM 文档对象模型

DOM 描绘了一个层次化的节点树，允许开发人员添加、移除、和修改页面的某一部分。
1.节点层次
    对层次、多类型
    节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据、方法。

    文档节点是每一个文档的跟节点。
    
    节点关系
        childNodes 其中保存着一个NodeList对象 类数组对象。用于保存一组有序的节点，可以通过位置来访问这些节点。也有length 属性，但不是Array实例。
        它基于DOM结构动态执行查询结果。
        parentNode属性 指向文档树的父节点。
            hasChildNodes()
            ownDocument() 指向整个文档的文档节点。
        操作节点
            appendChild() 末尾添加节点。
            insertBefore() 接受两个参数，要插入的节点，作为参照的节点。
            replaceChild() 接受两个参数，要插入的节点，要替换的节点。
            cloneNode() 接受一个布尔值  是否深复制
     Documnet 类型
        文档子节点
        文档信息
        查找元素
            getElementById() getElementByTagName()
        特殊集合
        DOM 一致性检测
        文档写入
     Element 类型
        html 元素
        取得特性
            getAttribute() 与实际特性名相同
             h5 支持自定义特性应该加上data-前缀以便验证。
        设置特性  接受两个参数，要设置的特性名，值
            setAttribute() 

            removeAttribute() //彻底删除元素的特性
        attributes 属性 可获取、可设置
        创建元素
            document.creatElement() 创建新元素  接受一个参数，元素的标签名。
        子节点
            childNodes 包含了它所有的子节点
     Text 类型
        创建文本节点
            document.creatTextNode() 创建新文本节点，接受一个参数，要插入节点中的文本。
        规范化文本节点
            normalize()
        分割文本节点
            splitText()
     comment 类型
     
DOM 操作技术
    1.动态脚本
        插入外部文件
        直接插入js代码
    2.动态css

    3.操作表格
    4.使用NodeList

DOM扩展

1.querySelector() 接受一个css接受符，返回与该模式匹配的第一个元素，如果没有，返回null。
2.querySelectorAll() 同上。
3.matchesSeletor() 接受一个css接受符 返回true   false

元素遍历
HTML5
    类相关扩充
        getElementByClassName() 接受一个参数，一个包含一或多个类名的字符串，返回指定类的所有元素的NodeList
        classList属性
        document.activeElement焦点属性
        HTMLDocument 的变化

psb.jpg