前端知識總結（6）：JS是如何實現人機交互的

上一篇：前端知識總結（5）：head標籤詳解

​ 由於一兩篇文章很難將JS基礎總結完，爲了管理，再給個標題吧

JS基礎總結（1）：JS是如何實現人機交互的

​ 在html、css、js之間的聯繫 提到對html進行邏輯上的裝飾，使人機交互變爲可能 ，但是具體來說JS是以什麼方式來實現的呢？

JS控制HTML

​ 往深來說js控制html，就是在控制DOM元素。額，DOM元素是啥？

---------------------- 開個小差 ------------------

在 HTML DOM (Document Object Model) 中, 每個東西都是 節點 :

• 文檔本身就是一個文檔對象

• 所有 HTML 元素都是元素節點

• 所有 HTML 屬性都是屬性節點

• 插入到 HTML 元素文本是文本節點

  。。。

---------------------- 迴歸標題 -------------------

也就是說，js控制了所有的DOM元素，不就是在控制HTML🐎

end -------

那麼來寫寫常見的DOM操作吧：

1. 節點查找API：

   語法	解釋
   document.getElementById	根據ID查找元素，大小寫敏感，如果有多個結果，只返回第一個
   document.getElementsByClassName	根據類名查找元素，多個類名用空格分隔，返回一個 HTMLCollection
   document.getElementsByTagName	根據標籤查找元素， * 表示查詢所有標籤，返回一個 HTMLCollection
   document.getElementsByName	根據元素的name屬性查找，返回一個 NodeList
   。。。	。。。

2. 節點創建API，有createElement、createTextNode、cloneNode、createDocumentFragment，寫個栗子吧：

   var elem = document.createElement("div");  
   elem.id = 'haorooms';  
   elem.style = 'color: red';  
   elem.innerHTML = '我是新創建的haorooms測試節點';  
   document.body.appendChild(elem);
   

3. 節點修改API，有appendChild、insertBefore、removeChild、replaceChild。。。

4. 還有節點關係API、節點屬性API。。。

這4點參考自總結js常用的dom操作

JS控制CSS

1. 通過.直接設置元素的屬性，語法element.style.attributename = attributevalue;例如：

document.body.style.width = '100px';   
// 擴展：還有這種寫法
document.body.style['background-color']= 'red';
// 等同於
document.body.style.backgroundColor= 'red';  

2. 通過 setAttribute 方法 設置元素的style屬性：添加指定的屬性，併爲其賦指定的值。
   如果這個指定的屬性已存在，則僅設置/更改值。語法：element.setAttribute(attributename,attributevalue)例如：

var a = document.body;
a.setAttribute("style","background-color:red;height:100px;");    

3. 通過style對象的 setProperty 方法 設置CSS屬性，語法：

element.style.setProperty (propertyName, propertyValue, priority);

​ 第三個參數指定樣式屬性的優先級，剩餘用法之類不再提了

4. 通過style對象的cssText屬性，控制CSS：style對象 的 cssText屬性設置或返回樣式聲明的內容作爲字符串。 語法：element.style.cssText = string，例如：document.body.style.cssText = "background-color:red"; 注意： 直接用 “=” 會覆蓋原來的值，需要追加新的值就用 “+=”

5. 通過元素的class屬性 控制CSS

6. 通過創建style標籤，引入新的css代碼

7. 通過創建link標籤，引入新的css文件

   。。。(我去，一總結咋這麼多，學起來好像不是這樣子的呀，這些參考自簡單說 通過JS控制CSS的各種方式（上）

再稍擴展一個點：CSS優先級 (TODO：有時間來好好學習一下)

感受：總算是把JS的大體這個主幹給總結完了(額，其實可能主幹更大呢，好吧，這些是我所看到的主幹給總結完了)，接下來就是js的一些細枝末節了，這些大部分可能只是列一下 百度/Google 的相關的常用關鍵詞 蛤

--------real end

下一篇：前端知識總結（7）：JS基本語法之變量聲明