js面試，JS-WEB-API相關問題

首先說一下這部分我遇到過的面試題

• DOM屬於哪一種基本的數據結構（樹型數據結構）
• DOM操作常用的API（說到操作，其實就是數據處理，主要也就是增，刪，改，查，按這幾部分去說常用API即可）
• DOM節點的Attribute和property有什麼區別？（其實可以這麼說，property是對象在js中的屬性，attribute是對象在html中的屬性）

一、（增）

• document.createElement（‘元素名’）
• document.createAttribute(‘屬性名’)
• document.createTextNode(‘文本節點’)

二、（刪）

• parent.removeChild（）

三、（改）
3.1改動html的DOM

• parent.replaceChild(newnode,oldnode)
• parent.insertBefore(newnode,parentchildnoed)
• parent.appendChild()

3.2改動內容

• el.innerHTML
• el.textContent

3.3修改屬性
3.3.1核心DOM

• elem.getAttribute(‘屬性名’)，獲取屬性值
• elem.setAttribute(‘屬性名’，‘屬性值’)
• elem.hasAttribute('屬性名’)，判斷是否包含屬性
• elem.removeAttribute(‘屬性名’)，移除屬性
  3.3.2（擴展）
  HTML DOM訪問屬性：一些HTML標準屬性都被HTML DOM封裝在元素對象中，因此這樣的形式=>elem.屬性名，用普通對象的方式操作屬性也是可以的
• 獲取，el.屬性名
• 修改，el.屬性名 = “值”
• 判斷，el.屬性名 ！=“值”
• 移除，el.屬性名 =“”；

四、（查）
4.獲取html的dom元素
4.1.1按html查找（4種）

• 按id，document.getElementById(‘id’)
• 按標籤名，parent.getElementsByTagName(“標籤名”)，注意這個是獲取的一個數組
• 按name屬性，document.getElementsByName（“name”）//查表單
• 按class名稱，parent.getElementsByClassName(‘class名稱’)

4.1.2按HTML中css選擇器查找

• 僅查找一個元素，parent.querySelector(‘selector’)
• 找多個元素，parent.querySelector(‘selector’)

備註：查找語句之前有document的是要強制使用document，是parent的則表示，是要查找元素的祖先元素即可

4.2按節點關係查找
父子關係：

• node.parentNode
• node.childNodes
• node.firstChild
• node.lastChild

兄弟關係

• node.previousSibling
• node.nextSibling
  (值得注意的是，因爲是節點，網頁中一切都是節點，甚至看不見的換行符和空字符也是文本節點，因此會造成一定的干擾，看下面代碼)

//html代碼
< button id="btn" >< /button >
< div >
	xxx
< /div >
//js代碼
let btn = document.getElementById('btn')
let btntype = btn.nextSibling
console.log(btntype)
//你們認爲會打印什麼，是不是div
//如果是div就錯了，其實是#text，因爲<button>和<div>之間還有看不見的文本

4.3 按元素樹查找
注意：ie9+支持
父子關係：

• node.parentElement
• node.children
• node.firstElementChild
• node.lastElementChild

兄弟關係

• node.previousElementSibling
• node.nextElementSibling

五、
5.1 el.nodeType
就說一下通常遇到的值吧

• 9，代表el是document
• 1，代表el是element
• 2，代表el是attribute
• 3，代表el是text

5.2 el.nodeName

• el是document，其值就是#document
• el是element，其值就是全大寫的標籤名
• el是attribute，其值就是屬性名
• el是文本，其值就是#text

六、BOM相關問題
其主要的知識點就是navigator、screen、location、history

• navigator 對象包含有關瀏覽器的信息
• screen設備屏幕大小
• location 包含有關當前 URL 的信息
• history 對象包含用戶（在瀏覽器窗口中）訪問過的 URL

6.1如何檢測遊覽器的類型

let ua = navigator.userAgent
let isChrome = ua.indexOf('Chrome')

6.2拆解url的各個部分

• location.hash 返回一個URL的錨部分

• location.host 返回一個URL的主機名和端口

• location.hostname 返回URL的主機名

• location.href 返回完整的URL

• location.pathname 返回的URL路徑名。

• location.port 返回一個URL服務器使用的端口號

• location.protocol 返回一個URL協議

• location.search 返回一個URL的查詢部分