DOM&BOM

题目（答案见每题下方空白处）

　　1.DOM是哪一种基本数据结构

　　树

　　2.DOM操做的经常使用API有哪些

　　获取DOM节点以及节点的property、attribute，获取父子节点，节点的添加和删除

　　3.DOM节点的attribute和property的区别？

　　property操做的时候，是把DOM节点当成一个JS对象进行操做的，也就是说能够理解成间接操做DOM节点，是对JS对象属性的修改，所以只能操做DOM节点中的一些固有属性，而对自定义属性不能操做

　　而attribute操做的时候，是操做真正的DOM节点，也就是HTML标签的属性的操做，所以能够直接修改DOM节点上的属性，包括固有属性和自定义属性，通常是用getAttribute和setAttribute两个方法进行操做

 　　4.如何检测浏览器类型

　　用BOM中的navigator里的userAgent属性来判断

　　5.url的组成

　　能够用BOM中的location的几个属性去解释，包括协议、域名、路径、查询字符串、哈希五个部分

 

知识点

DOM本质

　　DOM，即文本对象模型（document object model），本质上是一个树结构

 　　实际上，DOM的做用（本质）是：浏览器把HTML代码，结构化成一个浏览器可识别而且JS可操做的模型

DOM操做

　　DOM操做关键在三部分：节点获取、property以及attribute

节点获取

　　能够分为获取单个节点元素（id）以及获取节点元素集合（tag、class、queryselector），而这里虽然获取的是DOM节点，但这个节点本质上是一个JS对象（否则如何被JS操做呢）

　　具体的节点获取再也不详细列出

property

　　property即DOM节点的属性，这里能够理解成，每个DOM节点在JS中实际为一个JS对象，所以这些节点都是有属性的

　　这些属性例如style（能够进一步获取CSS样式）、nodeName（节点名称），实际在浏览器中的节点中是不存在的，所以不能够设置/修改自定义属性（例如dataname）

attribute

　　attribute是真正的DOM节点在文档中所拥有的属性，例如a标签的href属性、img标签的src属性等，也包括class以及自定义属性（dataname之类的）

　　能够经过getAttribute以及setAttribute来获取并设置DOM节点的属性，这里的获取和设置是直接的，设置的都将以属性的形式添加到DOM标签上，也能够设置自定义属性

　　这里property和attribute的区别以下图所示

　　

　　浏览器中的输出如图所示

　　

DOM结构操做

　　这里的结构操做，即对DOM这颗树来进行操做，包括节点的添加、父子元素节点的获取、节点的删除、遍历节点等

节点添加

　　经常使用的是createElement（建立节点）、appendChild（在节点下添加子节点），这里须要注意appendChild若是操做的是一个已有的节点，则会移动这个已有节点

　　

　　

父子元素节点获取

　　经常使用的有parentElement以及childNodes属性，也能够用removeChild方法删除子节点

　　这里须要注意，如今主流的浏览器会把换行产生的空白当成一个子节点

　　

　　执行结果以下

　　

BOM

　　Browser Object Model，即浏览器对象模型

　　其中包括了navigator、screen、history、location

　　navigator中有userAgent属性，属性值是一个长字符串，里面包括了浏览器的特性，可用来判断浏览器的类型

　　若是在Chrome中模拟手机特性，则userAgent中也会对应出现手机的信息（例如iPhone）

　　

　　screen里有width、height属性，为屏幕的宽高

　　location能够理解成url，里面有href（整个url）、protocal（协议，如https、http）、host（域名）、pathname（路径）、search（？后的查询字符串，多个之间用&链接）、hash（哈希，#后的内容）等属性

　　history是浏览历史记录，有back和forward方法