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

知識點#####

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

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

• DOM節(jié)點操作

  • 獲取DOM節(jié)點

    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對象的屬性

  var pList=document.querySelectorAll('p')
  var p=pList[0]
  //獲取了DOM對象，對象在js中都是可擴展的
  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
  

標簽屬性，用于擴充HTML標簽，可以改變標簽行為或提供數(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é)點

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

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

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

• 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ù)結構
樹
2.DOM操作常用的API有哪些

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

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

• property是一個JS對象的屬性的修改
• Attribute是HTML標簽屬性的修改

4.如何檢測瀏覽器的類型

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);