前端基礎之DOM操作
阿新 • • 發佈：2017-12-25
事件 scrollto 高度 closed con select pan 增刪改 簽名 
改
前戲
到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。也就是我們還不能制作一些我們經常看到的網頁的一些交互，我們需要繼續學習DOM相關知識。
JavaScript可以操作整個瀏覽器，但是這個瀏覽器對象比較大，因此為了操作方便，又分為三個對象。
1.BOM對象
BOM對象主要操作地址欄，瀏覽歷史，窗口高度等。
2.DOM對象
DOM對象主要操作網頁上的元素和相關元素的CSS樣式。
3.Window對象
Window對象是瀏覽器的宿主對象，其提供的方法和屬性和JavaScript沒什麽關系。
上面三個對象，我們主要學習的是DOM對象，通過DOM編程，可以輕易實現我們常見的一些效果。
Window對象
Window對象方法
alert() 顯示帶有一段消息和一個確認按鈕的警告框。 setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。 clearInterval() 取消由 setInterval() 設置的 timeout。 setTimeout() 在指定的毫秒數後調用函數或計算表達式。 clearTimeout() 取消由 setTimeout() 方法設置的 timeout。 scrollTo() 把內容滾動到指定的坐標。 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框。 open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 close() 關閉瀏覽器窗口。
幾個例子
// 每隔一段時間就執行一次相應函數 var timer = setInterval(function(){console.log(123);}, 3000) // 取消setInterval設置 clearInterval(timer); // 在指定時間之後執行一次相應函數 var timer = setTimeout(function(){alert(123);}, 3000) // 取消setTimeout設置 clearTimeout(timer);View Code
Window常用屬性
window.location
利用該屬性的location的href屬性可以完成簡單的頁面操作
window.location.href 獲取URL window.location.href="URL" 重定向 window.location.reload 重新加載
DOM對象
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)：
- 整個文檔是一個文檔節點(document對象)
- 每個 HTML 元素是元素節點(element 對象)
- HTML 元素內的文本是文本節點(text對象)
- 每個 HTML 屬性是屬性節點(attribute對象)
- 註釋是註釋節點(comment對象)
查找標簽
document.getElementById 根據ID獲取一個標簽
document.getElementsByName 根據name屬性獲取標簽集合
document.getElementsByClassName 根據class屬性獲取
document.getElementsByTagName 根據標簽名獲取標簽合集
間接查找
parentNode 父節點
childNodes 所有子節點
firstChild 第一個子節點
lastChild 最後一個子節點
nextSibling 下一個兄弟節點
previousSibling 上一個兄弟節點
parentElement 父節點標簽元素
children 所有子標簽
firstElementChild 第一個子標簽元素
lastElementChild 最後一個子標簽元素
nextElementSibling 下一個兄弟標簽元素
previousElementSibling 上一個兄弟標簽元素
DOM對象的屬性操作
操作內容
innerText 文本
innerHTML HTML內容
value 值
操作屬性
attributes 獲取所有標簽屬性
setAttribute(key, value) 設置標簽屬性
getAttribute(key) 獲取指定標簽屬性
removeAttribute(key) 刪除屬性
樣式操作
操作class類
className 獲取所有樣式類名
classList.remove(cls) 刪除指定類
classList.add(cls) 添加類
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS屬性的規律：
1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
文檔節點的增刪改查
增
createElement(name) 創建元素
appendChild() 將元素添加
刪
查找到要刪除的元素
獲取它的度元素
使用removeChild()方法刪除
改
第一種方式:
使用上面增和刪結合完成修改
第二種方式:
使用setAttribute();方法修改屬性
使用innerHTML屬性修改元素的內容
查
使用之前介紹的方法.
前端基礎之DOM操作