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

1、innerHTML 屬性

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

對于上面的元素來說，它的 innerHTML 屬性會返回如下字符串。

2、outerHTML 屬性

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

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

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

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

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

語法：

3、innerText 屬性

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

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

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

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

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

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

輸出：

4、outerText 屬性

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

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

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

5、value 屬性

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

6、text()

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

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

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

7、html()：

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

1)無參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對象。

8、val()方法

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

控制臺輸出：

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

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

實(shí)際開發(fā)當(dāng)中，我們經(jīng)常會遇到類似諸如下面的需求：

1. 獲取滿足特定條件的數(shù)組中的所有項(xiàng)目
2. 要檢查是否滿足條件？
3. 檢查數(shù)組中是否有特定值？
4. 在數(shù)組中找到指定值的索引？

在本文中，我們將討論四種可用于搜索數(shù)組中項(xiàng)目的方法。這些方法是：

1. filter
2. find
3. includes
4. indexOf

接下來，我們就一起來看一下這四種方式

Array.filter()

我們可以使用 Array.filter() 方法在數(shù)組中查找滿足特定條件的元素。

例如，如果我們要獲取大于10的數(shù)字?jǐn)?shù)組中的所有項(xiàng)目，則可以執(zhí)行以下操作：

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.filter(element => element > 10);

console.log(greaterThanTen) //[11, 20]

使用 array.filter() 方法的語法如下：

let newArray = array.filter(callback);

著這里：

• newArray是返回的新數(shù)組
• array 是我們要進(jìn)行查找的數(shù)組本身
• callback 是應(yīng)用于數(shù)組每個(gè)元素的回調(diào)函數(shù)

如果數(shù)組中沒有項(xiàng)目符合條件，則返回一個(gè)空數(shù)組。

有時(shí)，我們不需要滿足特定條件的所有元素。我們只需要一個(gè)符合條件的元素。在這種情況下，需要使用find()方法。

Array.find()

使用 Array.find()方法查找滿足特定條件的第一個(gè)元素。就像 filter 方法一樣，它以回調(diào)為參數(shù)，并返回滿足回調(diào)條件的第一個(gè)元素。

我們嘗試一下在上面的示例中對數(shù)組使用 find 方法。

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.find(element => element > 10);

console.log(greaterThanTen)//11

array.find() 的語法為

let element = array.find(callback);

callback 是在數(shù)組中的每個(gè)值上執(zhí)行的函數(shù)，帶有三個(gè)參數(shù)：

• element -當(dāng)前被遍歷的元素（必填）
• index -當(dāng)前遍歷的元素的索引/位置（可選）
• array- 當(dāng)前數(shù)組（可選）

但是請注意，如果數(shù)組中沒有項(xiàng)目符合條件，則返回 undefined。

但是，如果想檢查某個(gè)元素是否在數(shù)組中怎么辦？

Array.includes（）

includes() 方法確定數(shù)組是否包含某個(gè)值，并在適當(dāng)時(shí)返回 true 或 false。

因此，在上面的示例中，如果我們要檢查20是否為數(shù)組中的元素之一，則可以執(zhí)行以下操作：

const array = [10, 11, 3, 20, 5];

const includesTwenty = array.includes(20);

console.log(includesTwenty)//true

你會注意到此方法與其他方法之間的區(qū)別。此方法接受值而不是回調(diào)作為參數(shù)。這是 include 方法的語法：

const includesValue = array.includes(valueToFind, fromIndex)

• valueToFind 是要在數(shù)組中檢查的值（必填）
• fromIndex 是要開始從中搜索元素的數(shù)組中的索引或位置（可選）

要了解索引的概念，讓我們再次使用上面的示例。

如果要檢查數(shù)組是否在第一個(gè)元素之外的其他位置包含10個(gè)，可以執(zhí)行如下操作：

const array = [10, 11, 3, 20, 5];

const includesTenTwice = array.includes(10, 1);

console.log(includesTenTwice)//false

Array.indexOf（）

indexOf() 方法返回可以在數(shù)組中找到給定元素的第一個(gè)索引。如果數(shù)組中不存在該元素，則返回 -1。

回到例子。讓我們找到數(shù)組中 3 的索引。

const array = [10, 11, 3, 20, 5];

const indexOfThree = array.indexOf(3);

console.log(indexOfThree)//2

其語法類似于該 includes 方法的語法。

const indexOfElement = array.indexOf(element, fromIndex)

• element 是要在數(shù)組中檢查的元素（必填），并且
• fromIndex 是要從數(shù)組中搜索元素的啟始索引或位置（可選）

請務(wù)必注意，includes 和 indexOf 方法都使用嚴(yán)格的相等性（'==='）搜索數(shù)組。如果值的類型不同（例如4和'4'），它們將分別返回 false 和 -1。

總結(jié)

使用這些數(shù)組方法，無需使用 for 循環(huán)即可搜索數(shù)組。根據(jù)您的需求，您可以決定哪種方法最適合您的用例。

以下是何時(shí)使用每種方法的摘要：

• 如果你想找到在符合特定條件的陣列中的所有項(xiàng)目，使用 filter。
• 如果你想檢查是否至少有一個(gè)項(xiàng)目符合特定的條件，請使用 find。
• 如果你想檢查一個(gè)數(shù)組包含一個(gè)特定的值，請使用 includes。
• 如果要在數(shù)組中查找特定項(xiàng)目的索引，請使用indexOf 。

例1：

<!DOCTYPE html>
<html>
<head>
<title>新建網(wǎng)頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h2>獲得元素節(jié)點(diǎn)</h2>
<p><input type="text" id="username" value="tom"></p>
<p><input type="text" id="useremail" value="tom@163.com"></p>
</body>
</html>
<script type="text/javascript">
//② document.getElementsByTagName(tag標(biāo)簽名稱)
// 該方法會返回一個(gè)對象集合(無論對應(yīng)的節(jié)點(diǎn)有幾個(gè))
var hh = document.getElementsByTagName('h2');
console.log(hh);//對象集合 HTMLCollection[h2]
//兩種方式 可以從對象集合中 獲得具體的一個(gè)元素節(jié)點(diǎn)對象
console.log(hh[0]); //<h2>
console.log(hh.item(0)); //<h2>
var ipt = document.getElementsByTagName('input');
console.log(ipt);//HTMLCollection[input#username 屬性(attribute)值 = "tom", input#useremail 屬性(attribute)值 = "tom@163.com"]
console.log(ipt.item(1));
</script>

關(guān)于節(jié)點(diǎn)的獲取需待HTML加載完畢后, javascript代碼才能執(zhí)行;

為此可以使用DOM1事件機(jī)制、window.onload語句、將javascript語句放在HTML語句最后;

而DOM2事件機(jī)制(即事件監(jiān)聽函數(shù))要放在window.onload語句中, 或者放在HTML語句最后;

實(shí)例2：