[ Day51 ]Python之路----JavaScript --DOM操作

標籤：曆史   next   onkeyup   nod   第一個   簡單的   之一   node   html 標籤   

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()            關閉瀏覽器視窗。

 

Window常用屬性

window.location

利用該屬性的location的href屬性可以完成簡單的頁面操作

window.location.href  擷取URLwindow.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  上一個兄弟標籤元素

操作內容

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.marginobj.style.widthobj.style.leftobj.style.position

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：

obj.style.marginTopobj.style.borderLeftWidthobj.style.zIndexobj.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      確認按鈕被點擊。

 

[ Day51 ]Python之路----JavaScript --DOM操作