整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          8個(gè)javascript獲取元素的方法

          我們的日常前端開發(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:


          主站蜘蛛池模板: 97人妻无码一区二区精品免费 | 一区二区三区免费精品视频| 搜日本一区二区三区免费高清视频 | 亚洲综合在线一区二区三区| 一区二区精品在线观看| 蜜臀AV一区二区| 国产在线视频一区| 美女AV一区二区三区| 国产福利无码一区在线| 精品动漫一区二区无遮挡| 亚洲av无码一区二区乱子伦as| 亚洲一区二区三区无码影院| 成人精品一区二区电影| 无码一区二区三区爆白浆| 亚洲福利一区二区三区| 一区二区三区福利视频免费观看| 一区二区三区美女视频| 日本夜爽爽一区二区三区| 日本v片免费一区二区三区| 无码人妻精品一区二区蜜桃| 大香伊人久久精品一区二区| 在线视频一区二区| 伊人久久精品一区二区三区| 国产精品视频一区二区三区经| 韩国美女vip福利一区| 91视频一区二区| 亚洲综合无码一区二区痴汉| 亚洲熟女综合一区二区三区| 在线观看视频一区二区| 日韩A无码AV一区二区三区| 一区二区三区杨幂在线观看| 视频一区二区中文字幕| 免费一区二区无码东京热| 亚洲图片一区二区| 国产吧一区在线视频| 春暖花开亚洲性无区一区二区| 美女视频一区二区三区| 国产在线视频一区二区三区98| 精品性影院一区二区三区内射| 成人免费观看一区二区| 日本无卡码免费一区二区三区|