亚洲日韩精品无码AV海量,总裁老公惹不得,日韩欧美中文字幕公布

大家好，我是你們的導師，經常看我朋友圈的同學應該知道，我每天會在微信上給大家免費提供以下服務！

1、長期為你提供最優質的學習資源！

2、給你解決技術問題！

3、每天在朋友圈里分享優質的技術文章！

4、每周1、3、5送紙質書籍免費送給大家，每年至少送書800本書！

5、為大家推薦靠譜的就業單位！

請注意！我上面說的5點全部都是免費的！全網你應該找不到第二家吧！

當然，大家在我私人微信上問我問題，僅限回答web前端、java相關的。

---------------------------

好了，接下來開始今天的技術分享！上次老師跟大家分享了NPM 快速使用開發技巧的知識，今天跟大家分享下JS中獲取元素屬性的方法的知識。

0 前言

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

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

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

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

1 innerHTML屬性

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

<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屬性

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

<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>元素上調用 outerHTML，會返回與上面相同的代碼，包括<div>本身。

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

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);

結果，就是新創建的<p>元素會取代 DOM 樹中的<div>元素。

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

語法：

node.replaceChild(newnode,oldnode)

3 innerText屬性

通過 innerText 屬性可以操作元素中包含的所有文本內容，包括子文檔樹中的文本。在通過 innerText 讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。在通過 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 1Item 2Item 3

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

div.innerText = 'Hello world!';

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

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

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

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

div.innerText = div.innerText;

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

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

輸出：

4 outerText屬性

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

div.outerText = 'Hello world!';

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

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

本質上，新的文本節點會完全取代調用 outerText 的元素。此后，該元素就從文檔中被刪除，無法訪問。

5 value屬性

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

6 text()屬性

1）無參text（）：

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

2）有參text（val）：

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

7 html()屬性

1）無參html（）：

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

2）有參html（val）：

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

8 val()屬性

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

1）無參 val() :

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

HTML代碼：

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

控制臺輸出：

2）有參val（val）：

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

總結

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

今天就分享這么多，關于JS中獲取元素屬性的方法，你學會了多少？

本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請點擊舉報。

精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕