DOM和BOM

注：W3C标准没有规定任何JS基础相关的东西（如：变量类型、原型、作用域、异步）。它只管定义用于浏览器中JS操作页面的API和全局变量。

JS内置的全局函数和对象：object、Array、Boolean、string、Math、JSON、window、document、Navigator、UserAgent

1、DOM的本质——文档对象模型

     DOM可以理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且JS可操作的一个模型而已。

2、DOM节点操作：获取DOM节点、prototype、Attribute

（1）获取DOM节点

         document.getElementById(“”);    //元素

         document.getElementsByTagName(“”);  //集合

         document.getElementsByClassName(“”);  //集合

         document.querySelectorAll(“”);  //集合

（3）property

（4）Attribute

    var pList = document.querySelectorAll('p');

    var p = pList[0];

    p.getAttribute('data-name');

    p.getAttribute('data-name','imooc');

    p.getAttribute('style');

    p.setAttribute('style','font-size:30px;')

3、DOM结构操作

（1）添加新节点

    var div1 = document.getElementById("");

    var p1 = document.createElement('p');

    p1.innerHTML = "this is p1";

    div1.appendChild(p1);   //添加新创建的元素

    var p2 = document.getElementById('')

    div1.appendChild(p2)

（2）获取父元素和子元素

    var div2 = document.getElementById('');

    var parent = div2.parentElement;   //父元素

    var child = div2.childNodes;    //子元素，集合

（3）移除元素

div2.removeChild(child[0]);

解答：

1、DOM是哪种基本的数据结构？   树

2、DOM操作的常用API有哪些？

    获取DOM节点，以及节点的property和Attribute

   获取父节点，获取子节点；新增节点；删除节点

3、DOM节点的Attribute和property有何区别？

     property：只是一个JS对象的属性的修改

     Attribute：是对HTML标签属性的修改

 

BOM操作——浏览器对象模型

知识点：navigator、screen、location、history

1、如何检测浏览器类型？navigator & screen

    var ua = navigator.userAgent;

    var isChrome = ua.indexOf('Chrome');

    console.log(isChrome);   //true   false

    screen.width;

    screen.height;

2、location和history

拆解url各部分：

location.href  http://coding.m.imooc.com/classindex.html?Cid=99&a=b#mid=100

location.protocol     //’http’’https’

location.host         //主机名  coding.m.imooc.com

location.pathname     //’.../.../’    /classindex.html

location.search    //参数    ?Cid=99&a=b

location.hash      //哈希    #mid=100

history.back()

history.forward()