1.DOM是哪種基本的數(shù)據(jù)結(jié)構(gòu)
2.DOM操作常用的API有哪些
3.DOM節(jié)點(diǎn)的attr和property有何區(qū)別
4.如何檢測(cè)瀏覽器的類型
5.拆解url的各部分

知識(shí)點(diǎn)#####

• DOM本質(zhì)
  DOM（Document Object Model——文檔對(duì)象模型）是用來(lái)呈現(xiàn)以及與任意 HTML 或 XML 交互的API文檔。DOM 是載入到瀏覽器中的文檔模型，它用節(jié)點(diǎn)樹的形式來(lái)表現(xiàn)文檔，每個(gè)節(jié)點(diǎn)代表文檔的構(gòu)成部分（例如： element——頁(yè)面元素、字符串或注釋等等）。
  DOM可以理解為瀏覽器把拿到的HTML代碼，結(jié)構(gòu)化為一個(gè)瀏覽器能識(shí)別并且js可操作的模型。

• BOM本質(zhì)
  BOM（Browser Object Document）即瀏覽器對(duì)象模型。
  BOM提供了獨(dú)立于內(nèi)容 而與瀏覽器窗口進(jìn)行交互的對(duì)象；
  由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對(duì)象是window；
  BOM由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多方法與屬性；

• DOM節(jié)點(diǎn)操作

  • 獲取DOM節(jié)點(diǎn)

    var div1=document.getElementById('div1')  //元素
    var divList=document.getElementByTagName('div')   //集合
    console.log(divList.length);
    console.log(divList[0]);
    
    var containerList=document.getElementByClassName('.container')  //集合
    var pList=document.querySelectorAll('p')  //集合
    

  • property
    js對(duì)象的屬性

  var pList=document.querySelectorAll('p')
  var p=pList[0]
  //獲取了DOM對(duì)象，對(duì)象在js中都是可擴(kuò)展的
  console.log(p.style.width); //獲取樣式
  p.style.width='100px' //修改樣式
  console.log(p.className); //獲取className
  p.className='p1' //修改className

  //獲取nodeName和nodeType
  console.log(p.nodeName);
  console.log(p.nodeType);

  - Attribute
  

標(biāo)簽屬性，用于擴(kuò)充HTML標(biāo)簽，可以改變標(biāo)簽行為或提供數(shù)據(jù)，格式為name=value
var pList=document.querySelectorAll('p') var p=pList[0] p.getAttribute('data-name') p.setAttribute('data-name','imooc') p.getAttribute('style') p.setAttribute('style','font-size:30px;')

• DOM結(jié)構(gòu)操作
  • 新增節(jié)點(diǎn)

var div1=document.getElementById('div1')
var p1=document.createElement('p') //創(chuàng)建新節(jié)點(diǎn)
p1.innerHTML='Hello'
div1.appendChild(p1)  //添加新創(chuàng)建的節(jié)點(diǎn)
var p2=document.getElementById('p2')
div1.appendChild(p2)  //移動(dòng)已有節(jié)點(diǎn)

• 獲取父子元素、刪除節(jié)點(diǎn)

var div1=document.getElementById('div1')
var parent=div1.parentElement //獲取父元素
var child=div1.childNodes //獲取子元素
div1.removeChild(child[0])  //移除child[0]子節(jié)點(diǎn)

• navigator&screen

//ua
var ua=navigator.userAgent
var isChrome=ua.indexOf('Chrome')
console.log(isChrome);
 
  //screen
console.log(screen.width);
console.log(screen.height);

• location&history

//location
console.log(location.href);
console.log(location.protocol); //http https
console.log(location.pathname); //域名之后的路徑
console.log(location.search);
console.log(location.hash);

  //history
history.back()
history.forward()

解題#####

1.DOM是哪種基本的數(shù)據(jù)結(jié)構(gòu)
樹
2.DOM操作常用的API有哪些

• 獲取DOM節(jié)點(diǎn)以及節(jié)點(diǎn)的property和Attribute
• 獲取父節(jié)點(diǎn)，獲取子節(jié)點(diǎn)
• 新增節(jié)點(diǎn)，刪除節(jié)點(diǎn)

3.DOM節(jié)點(diǎn)的attr和property有何區(qū)別

• property是一個(gè)JS對(duì)象的屬性的修改
• Attribute是HTML標(biāo)簽屬性的修改

4.如何檢測(cè)瀏覽器的類型

navigator.userAgent

5.拆解url的各部分

//location
console.log(location.href);
console.log(location.protocol); //協(xié)議 http https
console.log(location.pathname); //域名之后的路徑
console.log(location.search);
console.log(location.hash);