摘要:事件處理允許對事件做出反應。還可以用代碼為多個元素分配相同的事件。指定事件監聽器接下來看看怎樣為元素分配事件監聽器。
翻譯:瘋狂惡的技術宅
https://medium.freecodecamp.o...
本文首發微信公眾號:jingchengyideng
歡迎關注,每天都給你推送新鮮的前端技術文章
Javascript DOM(文檔對象模型)是一個允許開發人員操縱頁面內容、結構和風格的接口。在本文中,我們將理解什么是 DOM 以及如何用 Javascript 去操作它。本文還可以作為基本 DOM 操作的參考。
什么是 DOM?基本上網頁由 HTML 和 CSS 文檔組成。瀏覽器用于創建文檔的描述被稱為文檔對象模型(DOM)。它使 Javascript 能夠訪問和操作頁面的元素和樣式。該模型構建在基于對象的樹結構中,并定義:
HTML 元素作為對象
HTML 元素的屬性和事件
訪問HTML元素的方法
HTML DOM模型
元素的位置稱為節點。不僅元素獲得節點,而且元素和文本的屬性也有屬于它們自己的節點(屬性節點和文本節點)。
DOM 文檔DOM 文檔是網頁中所有其他對象的所有者。這意味著如果你想訪問網頁上的任何對象,必須從這里開始。它還包含許多重要的屬性和方法,使我們能夠訪問和修改自己的頁面。
查找 HTML 元素現在我們了解了 DOM 文檔是什么,接下來就可以開始獲取我們的第一個 HTML 元素了。 Javascript DOM 有許多不同的方法可以用,不過這些最常見:
按 ID 獲取元素getElementById() 方法用于通過其 id 獲取單個元素。我們來看一個例子:
var title = document.getElementById(‘header-title’);
我們得到 id 為 header-title 的元素,并將其保存到變量中。
按類名獲取元素還可以用 getElementsByClassName() 方法獲取多個對象,該方法返回一個元素數組。
var items = document.getElementsByClassName(‘list-items’);
這里我們得到類 list-items 的所有項目,并將它們保存到變量中。
按標簽名稱獲取元素還可以用 getElementsByTagName() 方法按標記名稱獲取元素。
var listItems = document.getElementsByTagName(‘li’);
這里我們獲取 HTML 文檔中所有得 li 元素并將它們保存到變量中。
QueryselectorquerySelector() 方法返回與指定的 CSS選擇器匹配的第一個元素。這意味著你可以通過id、class、tag和所有其他有效的 CSS 選擇器獲取元素。在這里我列出了一些最常用的選項。
按 id 獲取:
var header = document.querySelector(‘#header’)
按 class 獲取:
var items = document.querySelector(‘.list-items’)
按標簽獲取:
var headings = document.querySelector(‘h1’);
獲取更具體的元素:
我們還可以使用 CSS Selectors 獲得更多的特定元素。
document.querySelector(“h1.heading”);
在這個例子中,我們同時搜索標記和類,并返回傳遞給 CSS Selector 的第一個元素。
QueryselectorallquerySelectorAll() 方法與 querySelector() 完全相同,只是它返回符合 CSS Selector 的所有元素。
var heading = document.querySelectorAll(‘h1.heading’);
在這個例子中,我們得到所有屬于 heading 類的 h1 標簽,并將它們存儲在一個數組中。
本文首發微信公眾號:jingchengyideng
歡迎關注,每天都給你推送新鮮的前端技術文章
HTML DOM 允許我們通過更改其屬性來對 HTML 元素的內容和樣式進行修改。
更改HTMLinnerHTML 屬性可用于修改 HTML 元素的內容。
document.getElementById(“#header”).innerHTML = “Hello World!”;
在這個例子中,我們得到 id 為 header 的元素,并把其內容設置為“Hello World!”。
InnerHTML 還可以把標簽放入另一個標簽中。
document.getElementsByTagName("div").innerHTML = "Hello World!
"
在這里將 h1 標記放入所有已存在的 div 中。
更改屬性的值還可以用 DOM 更改屬性的值。
document.getElementsByTag(“img”).src = “test.jpg”;
在這個例子中,我們把所有 標簽的 src 改為 test.jpg。
改變樣式要更改 HTML 元素的樣式,需要更改元素的樣式屬性。以下是更改樣式的示例語法:
document.getElementById(id).style.property = new style
接下來看一個例子,我們獲取一個元素并將底部邊框改為純黑線:
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;
CSS 屬性需要用 camelcase 而不是普通的 css 屬性名來編寫。在這個例子中,我們用 borderBottom 而不是 border-bottom。
添加和刪除元素現在我們來看看如何添加新元素和刪除現有元素。
添加元素var div = document.createElement(‘div’);
在這里我們用了 createElement() 方法創建一個 div 元素,該方法將標記名作為參數并將其保存到變量中。之后只需要給它一些內容,然后將其插入到 DOM 文檔中。
var content = document.createTextNode("Hello World!"); div.appendChild(newContent); document.body.insertBefore(div, currentDiv);
這里用了 createTextNode() 方法創建內容,該方法用字符串作參數,然后在文檔中已經存在的 div 之前插入新的 div 元素。
刪除元素var elem = document.querySelector("#header"); elem.parentNode.removeChild(elem);
本例中我們得到一個元素并使用 removeChild() 方法將其刪除。
替換元素現在讓我們來看看怎樣替換一個項目。
var div = document.querySelector("#div"); var newDiv = document.createElement(‘div’); newDiv.innerHTML = "Hello World2" div.parentNode.replaceChild(newDiv, div);
這里我們使用 replaceChild() 方法替換元素。第一個參數是新元素,第二個參數是要替換的元素。
直接寫入HTML輸出流還可以使用 write() 方法將 HTML 表達式和 JavaScript 直接寫入 HTML 輸出流。
document.write(“Hello World!
This is a paragraph!
”);
我們也可以把像日期對象這樣的參數傳給 JavaScript 表達式。
document.write(Date());
write() 方法還可以使用多個參數,這些參數會按其出現的順序附加到文檔中。
事件處理HTML DOM 允許 Javascript 對 HTML 事件做出反應。下面列出了一些比較重要的事件:
鼠標點擊
頁面加載
鼠標移動
輸入字段更改
分配事件可以用標記上的屬性直接在 HTML 代碼中定義事件。以下是 onclick 事件的例子:
Click me!
在此例中,單擊按鈕時, 的文本將被改為 “Hello!”。
還可以在觸發事件時調用函數,如下一個例子所示。
Click me!
這里我們在單擊按鈕時調用 changeText() 方法,并將該元素作為屬性傳遞。
還可以用 Javascript 代碼為多個元素分配相同的事件。
document.getElementById(“btn”).onclick = changeText();指定事件監聽器
接下來看看怎樣為 HTML 元素分配事件監聽器。
document.getElementById(“btn”)addEventListener("click", runEvent);
這里我們剛剛指定了一個 click 事件,在單擊 btn 元素時調用 runEvent 方法。
當然還可以把多個事件指定給單個元素:
document.getElementById(“btn”)addEventListener("mouseover", runEvent);節點關系
DOM Document 中的節點之間具有層次關系。這意味著節點的結構類似于樹。我們用 parent,sibling 和 child 等術語來描述節點之間的關系。
頂級節點稱為根節點,是唯一一個沒有父節點的節點。普通 HTML 文檔中的根是 標記,因為它沒有父標記,并且是文檔的頂部標記。
在節點之間導航可以用以下屬性在節點之間導航:
parentNode
childNodes
firstChild
lastChild
nextSibling
下面是得到 h1 的父元素的例子。
var parent = document.getElementById(“heading”).parentNode總結
望本文能幫助你理解 Javascript DOM 以及如何用它來操作頁面上的元素。
如果你覺得本文有用,請推薦給你的朋友和他們分享。如果你有什么問題或反饋,請在下面的評論中告訴我。
本文首發微信公眾號:jingchengyideng 歡迎掃描二維碼關注公眾號,每天都給你推送新鮮的前端技術文章 歡迎繼續閱讀本專欄其它高贊文章:12個令人驚嘆的CSS實驗項目
世界頂級公司的前端面試都問些什么
CSS Flexbox 可視化手冊
過節很無聊?還是用 JavaScript 寫一個腦力小游戲吧!
從設計者的角度看 React
CSS粘性定位是怎樣工作的
一步步教你用HTML5 SVG實現動畫效果
程序員30歲前月薪達不到30K,該何去何從
7個開放式的前端面試題
React 教程:快速上手指南
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103096.html
摘要:接下來該填表了生成行和單元格為了填充表格可以遵循同樣的方法,但這次我們需要迭代數組中的每個對象。對于每個對象,我們可以使用生成單元格。 翻譯:瘋狂的技術宅原文:https://www.valentinog.com/bl... 本文首發微信公眾號:jingchengyideng歡迎關注,每天都給你推送新鮮的前端技術文章 怎樣用原生 JavaScript 生成表格需?本文告訴你答案!...
摘要:內部機制探秘和文末附彩蛋和源碼這篇文章比較偏基礎,但是對入門內部機制和實現原理卻至關重要。當然也需要明白一些淺顯的內部工作機制。當改變出現時,相比于真實更新虛擬的性能優勢非常明顯。直到最終,會得到完整的表述樹的對象。 React 內部機制探秘 - React Component 和 Element(文末附彩蛋demo和源碼) 這篇文章比較偏基礎,但是對入門 React 內部機制和實現原...
摘要:一般來說,聲明式編程關注于發生了啥,而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題,剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理,這樣就能讓開發者專注于發生了啥,這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續譯者的廢話,這篇文章是前端攻略-從路人甲到英雄無敵的下半部分,在...
摘要:作為運行在瀏覽器中的腳本語言,它對于網頁操作非常有用。在技術圈中,我們將這些指令稱為操作。結論文檔對象模型是瀏覽器創建并保留在內存中的網頁的虛擬副本。資源如果你想了解更多關于文檔對象模型的內容,那么還有另一篇好文章。 翻譯:瘋狂的技術宅原文:https://www.valentinog.com/bl... showImg(https://segmentfault.com/img/bV...
閱讀 2975·2021-09-22 15:18
閱讀 3397·2019-08-30 15:54
閱讀 3276·2019-08-30 15:53
閱讀 592·2019-08-30 14:12
閱讀 819·2019-08-29 17:01
閱讀 2204·2019-08-29 14:04
閱讀 1390·2019-08-29 13:09
閱讀 867·2019-08-26 17:40