1.DOM是哪種基本的數(shù)據(jù)結(jié)構(gòu)
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é)點代表文檔的構(gòu)成部分（例如： element——頁面元素、字符串或注釋等等）。
DOM可以理解為瀏覽器把拿到的HTML代碼，結(jié)構(gòu)化為一個瀏覽器能識別并且js可操作的模型。BOM本質(zhì)
BOM（Browser Object Document）即瀏覽器對象模型。
BOM提供了獨立于內(nèi)容 而與瀏覽器窗口進行交互的對象；
由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window；
BOM由一系列相關的對象構(gòu)成，并且每個對象都提供了很多方法與屬性；-
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 - 獲取DOM節(jié)點
標簽屬性，用于擴充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é)構(gòu)操作
- 新增節(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ù)結(jié)構(gòu)
樹
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);
