【JS面試】第七章 JS-Web-API DOM&BOM

1. DOM是哪一種基本的數據結構？
2. DOM操做經常使用API有哪些？
3. DOM節點的attr和property有何區別？
4. 如何檢測瀏覽器的類型？
5. 拆解URL的各個部分

回顧JS基礎知識

---

特色：表面看來並不能用於工做中開發代碼

• 內置函數：Object、Array、Boolean、String等
• 內置對象：Math、JSON等
• 咱們連在網頁彈出一句hello world都不能實現

常說的JS（瀏覽器執行的JS）包含兩部分：JS基礎知識（ECMA262標準）和JS-Web-API（W3C標準）

• JS基礎知識 ：ECMA262標準，只是一個規則
• JS-Web-API：W3C標準，沒有規定任何JS基礎相關的東西，無論什麼變量類型、原型、做用域和異步，只管定義用於瀏覽器中JS操做頁面的API和全局變量
• W3C標準中關於JS的規定有：DOM操做、BOM操做、事件綁定、Ajax請求（包括http協議）等
• NodeJS由於是基於JS因此符合ECMA262標準，可是其服務於服務器端，沒有window、document等，而是有network、service等，不符合W3C標準

全面考慮，JS內置的全局函數和對象有哪些？

• 以前講過的Object、Array、Boolean、String、Math、JSON
• 剛剛提到的window、document
• 全部未定義的全局變量，如navigator.userAgent

DOM本質

---

XML是一種可擴展的描述語言，能夠描述任何結構化的數據

• 數據結構：樹
• HTML是XML的一種特殊類型

DOM：瀏覽器把拿到的HTML代碼，結構化一個瀏覽器能識別而且JS可操做性的一個模型

• Document 文檔
• Object 對象
• Modal 模型

DOM節點操做

---

獲取DOM節點

QuerySelector/QuerySelectorAll和getElementById/getElementsByClassName的區別

// div一、divList、containerList、pList都是JS對象
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對象的標準屬性，有關JS的屬性

var pList = document.querySelectorAll('p');// 集合
var p = pList[0];
console.log(p.style.width); // 獲取樣式
p.style.width='100px';  // 修改樣式
console.log(p.className); // 獲取class
p.className='p1'; // 修改class

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

Attribute

• 文檔直接修改，查看源碼便可看到修改
• 修改的是HTML代碼文檔內的標籤，有關文檔內標籤的屬性
• setAttribute本來沒有的標籤屬性會自動添加

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結構操做

---

針對樹的操做

獲取父元素

var div1 = document.getElementById("div1");
var parent = div1.parentElement;

獲取子元素

在使用childNodes獲取子元素時，換行也會算做1個text，計爲1個Node

var div1 = document.getElementById("div1");
var child = div1.childNodes;
console.log(child[0].nodeType) // text 3
console.log(child[1].nodeType) // p 1 標籤都是1
console.log(child[0].nodeName) // text #text
console.log(child[1].nodeName) // p P

新增節點

var div1 = document.getElementById('div1')
// 添加新節點
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) // 添加新建立的元素

// 移動已有節點
var p2=document.getElementById('p2')
div1.appendChild(p2)

刪除節點

var div1 = document.getElementById('div1');
var child = div1.childNodes;
div1.removeChild(child[0]); // 可能看不到效果，由於刪除的child[0]多是1個因換行引發的text Node

BOM

---

• Browser 瀏覽器
• Object 對象
• Modal 模型

navigator

var ua = navigator.userAgent;
var isChrome = ua.indexof('Chrome');
console.log(isChrome);

screen

console.log(screen.width);
console.log(screen.height);

location

console.log(location.href); // 整個url
location.protocol; //協議：http or https
location.host; // 域名
location.pathname;  // 路徑
location.search; // ?後的參數
location.hash // #後面是哈希

history

history.back(); // 返回
history.forward(); // 前進

題目解答

---

1. DOM是哪一種基本的數據結構？

樹

2. DOM操做經常使用API有哪些？

• 獲取DOM節點以及節點的property和Attribute
• 獲取父節點、子節點
• 新增節點和刪除節點

3. DOM節點的attr和property有何區別？

• property只是一個JS對象的屬性的修改和獲取
• Attribute是對HTML標籤屬性的修改和獲取

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

var ua = navigator.userAgent;
var isChrome = ua.indexof('Chrome');
console.log(isChrome);

5. 拆解URL的各個部分

console.log(location.href); // 整個url
location.protocol; //協議：http or https
location.host; // 域名
location.pathname;  // 路徑
location.search; // ?後的參數
location.hash // #後面是哈希