我們的日常前端開發(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)常會遇到類似諸如下面的需求:
在本文中,我們將討論四種可用于搜索數(shù)組中項(xiàng)目的方法。這些方法是:
接下來,我們就一起來看一下這四種方式
我們可以使用 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);
著這里:
如果數(shù)組中沒有項(xiàng)目符合條件,則返回一個(gè)空數(shù)組。
有時(shí),我們不需要滿足特定條件的所有元素。我們只需要一個(gè)符合條件的元素。在這種情況下,需要使用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ù):
但是請注意,如果數(shù)組中沒有項(xiàng)目符合條件,則返回 undefined。
但是,如果想檢查某個(gè)元素是否在數(shù)組中怎么辦?
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)
要了解索引的概念,讓我們再次使用上面的示例。
如果要檢查數(shù)組是否在第一個(gè)元素之外的其他位置包含10個(gè),可以執(zhí)行如下操作:
const array = [10, 11, 3, 20, 5];
const includesTenTwice = array.includes(10, 1);
console.log(includesTenTwice)//false
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)
請務(wù)必注意,includes 和 indexOf 方法都使用嚴(yán)格的相等性('===')搜索數(shù)組。如果值的類型不同(例如4和'4'),它們將分別返回 false 和 -1。
使用這些數(shù)組方法,無需使用 for 循環(huán)即可搜索數(shù)組。根據(jù)您的需求,您可以決定哪種方法最適合您的用例。
以下是何時(shí)使用每種方法的摘要:
例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:
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。