[作特效, 學JS] -- 12 加餐-DOM擴展

時間 2019-11-17

標籤特效加餐 dom 擴展欄目 JavaScript 简体版

原文原文鏈接

什麼是DOM

文檔對象模型(document object model)
網頁裏面的各個元素都是樹形結構

js操做網頁

找對象javascript
- document.getElementById() 經過id來找對象
- document.getElementsByTagName() 經過標籤名來找對象, 返回的是一個數組, 即使只有一個元素
- document.querySelector() 經過css選擇器來找對象, 只找第一個
- document.querySelectorAll() 經過css選擇器來找對象, 找到全部對象, 返回"數組"
- document.getElementsByClassName() 經過類名來找對象, 返回的是一個"數組"
操做對象css
- 改內容, object.innerHTML, object.innerText
- 改屬性, 對象.屬性名 = 屬性值
```
document.getElementById("image").src="landscape.jpg";
複製代碼
```
- 改樣式, 對象.style.樣式名 = 樣式值
- css怎麼寫, js就怎麼寫, 可是若是有-, 須要改爲駝峯命名
```
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
複製代碼
```
dom事件
- onclick 鼠標點擊觸發html
- onmouseover 鼠標移入觸發前端
- onmouseout 鼠標移出觸發java
- 追加的方式node
  - 對象.onclick = function(){}
- onfocus, input框獲取焦點時觸發正則表達式
- 事件監聽 addEventListener數組
- 如下兩行, 效果同樣bash
```
document.getElementById("myBtn").addEventListener("click", displayDate);
document.getElementById("myBtn").onclick = displayDate;
複製代碼
```
- 還有onmouseover, onmouseout
```
element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);
複製代碼
```
- 移除監聽事件
- removeEventListener()
```
element.removeEventListener("mousemove", myFunction);
複製代碼
```
節點操做
- appendChild() 追加一個子元素到最後
- insertBefore(a,b) 把子元素, 插入到某個特定的子元素以前, 把a插到b以前
- 刪除子元素parentNode.removeChild(子元素對象), 須要父元素來調用
- 替換子元素parentNode.replaceChild(a,b), 用a把b換掉, a和b都是子元素
```
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
複製代碼
```
以上三行, 至關於建立<p>這是一個新的段落。</p>app
- document.createTextNode, 建立一個文本節點
- 注意一點, document.getElementsByTagName(), 能夠用下標來獲取值, 可是, 不是一個數組.
引薦一位前端大神阮一峯
- 我的博客:www.ruanyifeng.com/home.html
- js教程:wangdoc.com/javascript/…