在我們的日常前端開(kāi)發(fā)工作中，經(jīng)常會(huì)用到j(luò)avascript技術(shù)，那么javascript獲取元素的方法有哪些，大家都知道嗎？目前獲取元素屬性的方法中最常見(jiàn)的有8個(gè)，包括innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()，讓我們分別了解下應(yīng)用方法吧。

　　1、innerHTML 屬性

　　在讀模式下，innerHTML屬性返回與調(diào)用元素的所有子節(jié)點(diǎn)(包括元素、注釋和文本節(jié)點(diǎn))對(duì)應(yīng)的 HTML 標(biāo)記。在寫(xiě)模式下，innerHTML 會(huì)根據(jù)指定的值創(chuàng)建新的 DOM 樹(shù)，然后用這個(gè) DOM 樹(shù)完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)。下面是一個(gè)例子：

　　對(duì)于上面的元素來(lái)說(shuō)，它的 innerHTML 屬性會(huì)返回如下字符串。

　　2、outerHTML 屬性

　　在讀模式下，outerHTML 返回調(diào)用它的元素及所有子節(jié)點(diǎn)的 HTML 標(biāo)簽。在寫(xiě)模式下，outerHTML 會(huì)根據(jù)指定的 HTML 字符串創(chuàng)建新的 DOM 子樹(shù)完全替換調(diào)用元素。下面是一個(gè)例子。

　　如果在元素上調(diào)用 outerHTML，會(huì)返回與上面相同的代碼，包括本身。使用 outerHTML 屬性以下面這種方式設(shè)置值：

　　這行代碼完成的操作與下面這些 DOM 腳本代碼一樣：

　　結(jié)果，就是新創(chuàng)建的元素會(huì)取代 DOM 樹(shù)中的元素。

　　replaceChild() 方法用新節(jié)點(diǎn)替換某個(gè)子節(jié)點(diǎn)。

　　語(yǔ)法：

　　3、innerText 屬性

　　通過(guò) innerText 屬性可以操作元素中包含的所有文本內(nèi)容，包括子文檔樹(shù)中的文本。在通過(guò) innerText 讀取值時(shí)，它會(huì)按照由淺入深的順序，將子文檔樹(shù)中的所有文本拼接起來(lái)。在通過(guò) innerText 寫(xiě)入值時(shí)，結(jié)果會(huì)刪除元素的所有子節(jié)點(diǎn)，插入包含相應(yīng)文本值的文本節(jié)點(diǎn)。下面是一個(gè)例子：

　　對(duì)于這個(gè)例子中的元素而言，其中 innerText 屬性會(huì)返回下列字符串：

　　使用 innerText 屬性設(shè)置這個(gè)元素內(nèi)容，則只需一行代碼：

　　執(zhí)行這行代碼后，頁(yè)面的 HTML 代碼就會(huì)變成如下所示：

　　設(shè)置 innerText 屬性移除了先前存在的所有子節(jié)點(diǎn)，完全改變了 DOM 樹(shù)。設(shè)置 innerText 永遠(yuǎn)只會(huì)生成當(dāng)前節(jié)點(diǎn)的一個(gè)子文本節(jié)點(diǎn)，而為了確保只生成一個(gè)字文本節(jié)點(diǎn)，就必須要對(duì)文本進(jìn)行 HTML 編碼。利用這一點(diǎn)，可以通過(guò) innerText 屬性過(guò)濾掉 HTML 標(biāo)簽。方法是將 innerText 設(shè)置等于 innerText，這樣就可以去掉所有 HTML 標(biāo)簽，比如：

　　執(zhí)行這行代碼后，就用原來(lái)的文本內(nèi)容替換了容器元素中的所有內(nèi)容(包括子節(jié)點(diǎn)，因而也就去掉了 HTML 標(biāo)簽)。舉個(gè)栗子：

　　輸出：

　　4、outerText 屬性

　　除了作用范圍擴(kuò)大到了包含 調(diào)用它的節(jié)點(diǎn)之外，outerText 與innerText 基本上沒(méi)有多大區(qū)別。在讀取文本值時(shí)，outerText 與 innerText 的結(jié)果完全一樣。但在寫(xiě)模式下，outerText 就完全不同了：outerText 不只是替換調(diào)用它的元素的子節(jié)點(diǎn)，而是會(huì)替換整個(gè)元素(包括子節(jié)點(diǎn))。比如：

　　這行代碼實(shí)際上相當(dāng)于如下兩行代碼：

　　本質(zhì)上，新的文本節(jié)點(diǎn)會(huì)完全取代調(diào)用 outerText 的元素。此后，該元素就從文檔中被刪除，無(wú)法訪問(wèn)。

　　5、value 屬性

　　屬性可設(shè)置或返回密碼域的默認(rèn)值。獲取文本框的值。

　　6、text()

　　設(shè)置或者獲取所選元素的文本內(nèi)容

　　1)無(wú)參text()：取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本。返回的是一個(gè)String。

　　2)有參text(val)：設(shè)置所有匹配元素的文本內(nèi)容,與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應(yīng)的HTML實(shí)體).返回一個(gè)jquery對(duì)象。

　　7、html()：

　　設(shè)置或者獲取所選元素的內(nèi)容(包括html標(biāo)記)

　　1)無(wú)參html()：取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔，返回的是一個(gè)String。

　　2)有參html(val)：設(shè)置每一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。返回一個(gè)jquery對(duì)象。

　　8、val()方法

　　主要用于獲取表單元素的值如input, select 和 textarea。當(dāng)在一個(gè)空集合上調(diào)用，它返回undefined;1)無(wú)參 val()：獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值。例子：HTML代碼：

　　控制臺(tái)輸出：

　　2)有參val(val)：設(shè)置每一個(gè)匹配元素的值。返回一個(gè)jquery對(duì)象。

　　大家對(duì)以上的8個(gè)javascript獲取元素的方法是否有了一些了解呢？根據(jù)獲取元素方法的不同，所應(yīng)用的場(chǎng)景也不相同。想要熟練地使用這8種方法，就需要了解它們各個(gè)特征。更多關(guān)于前端培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。