8個javascript獲取元素的方法

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

1、innerHTML 屬性

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

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

2、outerHTML 屬性

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

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

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

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

replaceChild() 方法用新節(jié)點替換某個子節(jié)點。

語法：

3、innerText 屬性

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

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

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

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

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

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

輸出：

4、outerText 屬性

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

這行代碼實際上相當于如下兩行代碼：

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

5、value 屬性

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

6、text()

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

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

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

7、html()：

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

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

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

8、val()方法

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

控制臺輸出：

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

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

天想聊聊在Web前端開發(fā)中經(jīng)常用到的技術(shù)：獲取元素屬性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()】

這些方法，大家應(yīng)該用過，如果讓你說出它們的一些區(qū)別和聯(lián)系，能答得上來嗎？接下來讓我們一起來溫故下。

首先我們需要把它們歸類下：

innerHTML、outerHTML、innerText 、outerText、value 屬于原生javascript的方法。
text()、html()，val()屬于jQuery中的方法。

1、innerHTML 屬性

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

<div id="content">
 <p>This is a <strong>paragraph</strong> with a list following it.</p>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>

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

<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

2、outerHTML 屬性

<div id="content">
 <p>This is a <strong>paragraph</strong> with a list following it.</p>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>

如果在<div>元素上調(diào)用 outerHTML，會返回與上面相同的代碼，包括<div>本身。

使用 outerHTML 屬性以下面這種方式設(shè)置值：

div.outerHTML="<p>This is a paragraph.</p>";

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

var p=document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);

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

replaceChild() 方法用新節(jié)點替換某個子節(jié)點。

語法：

node.replaceChild(newnode,oldnode)

3、innerText 屬性

<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

對于這個例子中的 <div> 元素而言，其中 innerText 屬性會返回下列字符串：

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

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

div.innerText="Hello world!";

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

<div id="content">Hello world!</div>

設(shè)置 innerText 屬性移除了先前存在的所有子節(jié)點，完全改變了 DOM 樹。

設(shè)置 innerText 永遠只會生成當前節(jié)點的一個子文本節(jié)點，而為了確保只生成一個字文本節(jié)點，就必須要對文本進行 HTML 編碼。利用這一點，可以通過 innerText 屬性過濾掉 HTML 標簽。方法是將 innerText 設(shè)置等于 innerText，這樣就可以去掉所有 HTML 標簽，比如：

div.innerText=div.innerText;

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

<label id="lab">請輸入北京今天空氣質(zhì)量：<input id="aqi-input" type="text"></label>

輸出：

4、outerText 屬性

div.outerText="Hello world!";

這行代碼實際上相當于如下兩行代碼：

var text=document.createTextNode("Hello world!");
div.parentNode.replaceChild(text,div);

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

5、value 屬性

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

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

1）無參text（）：

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

2）有參text（val）：

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

7、html():設(shè)置或者獲取所選元素的內(nèi)容（包括html標記）

1）無參html（）：

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

2）有參html（val）：

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

8、val()方法

主要用于獲取表單元素的值如input, select 和 textarea。當在一個空集合上調(diào)用，它返回undefined；

1）無參 val() :

獲取匹配的元素集合中第一個元素的當前值。例子：

HTML代碼：

<input type="text" value="你好啊">
<input type="text" value="啊哈哈哈">
<input type="text" value="嘻嘻嘻嘻">

控制臺輸出：

2）有參val（val）：

設(shè)置每一個匹配元素的值。返回一個jquery對象。

總結(jié)

對于這八大方法：innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()。您現(xiàn)在是否已經(jīng)很清晰了？

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://mp.weixin.qq.com/s/K7SyPeuZedmuj-a4HwoYfQ
作者：前端大牛愛好者

分享成果，隨喜正能量】人生，有多少計較，就有多少痛苦。有多少寬容，就有多少歡樂。痛苦與歡樂都是心靈的折射，就像鏡子里面有什么，決定于鏡子面前的事物。心里放不下，自然成了負擔，負擔越多，人生越不快樂。計較的心如同口袋，寬容的心猶如漏斗。復(fù)雜的心愛計較，簡單的心易快樂。

《VBA信息獲取與處理》教程是我推出第六套教程，目前已經(jīng)是第一版修訂了。這套教程定位于最高級，是學完初級，中級后的教程。這部教程給大家講解的內(nèi)容有：跨應(yīng)用程序信息獲得、隨機信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時操作，剪貼板應(yīng)用、Split函數(shù)擴展、工作表信息與其他應(yīng)用交互，F(xiàn)SO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。程序文件通過32位和64位兩種OFFICE系統(tǒng)測試。是非常抽象的，更具研究的價值。

教程共兩冊，八十四講。今日的內(nèi)容是專題八“VBA與HTML文檔”的第二節(jié)上半部分：HTML文檔元素

第二節(jié) HTML文檔的元素分析之一

大家好，我們這講開始HTML的講解，為了認識這種特殊的語言，我們要先看看這種語言中的各種元素個代表什么意義。上節(jié)中在講這種語言的特征時講過，標簽是用來描述網(wǎng)頁的。瀏覽器讀取HTML文檔，識別標簽，并按標簽要求以網(wǎng)頁進行顯示文本。大部分標簽都是成隊出現(xiàn)的。

起始標簽和結(jié)束標簽之間的所有文本，都叫做元素。也就是這個格式就是：

<起始標簽:也叫元素名>元素的內(nèi)容<結(jié)束標簽:/+元素名>

標簽是可以擁有屬性的，屬性提供了元素的一些附加信息，起始標簽，有時候格式如下：

<元素名屬性名稱=”屬性值”>

同時，元素是可以擁有元素的，即某個元素的內(nèi)容有時候是一個子元素。

元素這東西，比較抽象，我們可以把它且當作一個對象來理解，例如工作簿對象，每個工作簿的名稱都不一樣（屬性），每個工作簿里面都有工作表（子元素），每個表都有名稱（屬性），里面填寫的內(nèi)容也不一樣（元素的內(nèi)容）。

1 HTML文檔構(gòu)成的整體框架結(jié)構(gòu)

在上一講中我們舉了一個最為簡單的實例來說明HTML文檔：

<html>

<body>

<h1>學習VBA語言</h1>

<p>為了更好的掌握VBA的各個知識點，您可以參考我的第一套教程：VBA代碼解決方案</p>

</body>

</html>

我們將上面的格式修正一下，如下面：

<html>

<title>

VBA應(yīng)用提高篇

</title>

</head>

<h1>學習VBA語言</h1>

<p>為了更好的掌握VBA的各個知識點，您可以先參考我的第一套教程：VBA代碼解決方案</p>

</body>

</html>

將上面的內(nèi)容寫入記事本中保存為.html文件：HTML基礎(chǔ)學習-1.html

然后我們雙擊打開這個文件，看看瀏覽器的翻譯效果：

我們再看看網(wǎng)頁的源碼：

從上面的框架代碼，我們可以看出，一般的頁面，都有html元素，其一般內(nèi)含兩個元素，一個是head元素，一個是body元素。Head元素僅僅說明文檔的相關(guān)消息，并不展示文檔實體，body元素才是真正展示文檔主體的，所有要在頁面展示的元素，都要在body內(nèi)進行書寫。

2 HTML文檔常用元素的構(gòu)成

1）HTML標題 <h1> - <h6>

標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題。<h6> 定義最小的標題。瀏覽器會自動地在標題的前后添加空行。標題很重要，將 HTML heading 標簽只用于標題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標題。因為用戶可以通過標題來快速瀏覽您的網(wǎng)頁，所以用標題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。應(yīng)該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。在HTML基礎(chǔ)學習.HTML文件中我們已經(jīng)用到了標題的元素

2）HTML水平線 <hr />

<hr /> 標簽在 HTML 頁面中創(chuàng)建水平線。可用于分隔內(nèi)容。

[待續(xù)]

本節(jié)參考文件：HTML基礎(chǔ)學習-1.html；HTML基礎(chǔ)學習-2.html

我20多年的VBA實踐經(jīng)驗，全部濃縮在下面的各個教程中，教程學習順序：

【分享成果，隨喜正能量】人生，一歲有一歲的味道，一站有一站的風景，你的年齡應(yīng)該成為你生命的勛章而不是你傷感的理由。 ??

在線咨詢

上一篇：PEP8（二），命名風格
下一篇：西班牙語同聲傳譯入門技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

8個javascript獲取元素的方法

第二節(jié) HTML文檔的元素分析之一

1 HTML文檔構(gòu)成的整體框架結(jié)構(gòu)

2 HTML文檔常用元素的構(gòu)成

您的項目需求