DOM擴展-HTML5、專有擴展

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)新城免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

HTML5

與類相關(guān)的擴充

1、getElementsByClassName()方法

改方法接受一個參數(shù)，即一個包含一或多個類名的字符串，返回帶有指定類的所有元素的NodeList。傳入多個類型時，先后順序不重要。

1         //取得所有類中包含"username"和"current"的元素，類名的先后順序不重要2         var allCurrentUsername = document.getElementsByClassName('username current');3         //取得ID為'myDiv'的元素中都帶有類名"selected"的所有元素4         var selected = document.getElementById('myDiv').getElementsByClassName('selected');

調(diào)用這個方法時，只有位于調(diào)用元素子樹中的元素才會返回。

2、classList屬性

在操作類名時，需要通過className屬性添加，刪除和替換類名。因為className中是一個字符串，所以即使只修改字符串的一部分，也必須每次都設(shè)置整個字符串。HTML5新增加了一種操作類名的方式，那就是為所有元素都添加classList屬性。這個classList屬性是新集合類型DOMTiokenList的實例。與其他DOM集合類似，DOMTokenList有一個表示自己包含多少元素的length屬性，而要取得每個元素可以使用item()方法，也可以使用方括號語法。此外，這個新類型還定義如下方法：

//Alt + 41406、Alt + 41407
【1】add(value):將給定的字符串添加到列表中，如果以存在就不在添加；
【2】contains(value):表示列表中是否存在給定的值，如果存在就返回true，反之返回false；
【3】remove(value):從列表中刪除給定的字符串；
【4】toggle(value):如果列表中存在給定的值，刪除它，如果列表中沒有給定的值，添加它；

1         //添加"currrent"類2         div.classList.add('current');3         //切換"user"類4         div.classList.toggle('user');

焦點管理

document.activeElement屬性，這個屬性始終會引用DOM中當(dāng)前獲得了焦點的元素。元素獲得焦點的方法通常有頁面加載，用戶輸入和在代碼中調(diào)用focus()方法。

1         var button = document.getElementById('myButton');2         button.focus();3         console.log(document.activeElement === button); //true

默認(rèn)情況下，文檔剛剛加載完成時，document.activeElement的值為document.body，當(dāng)文檔加載時document.activeElement的值為null；

document.hasFocus()方法，這個方法用于確定文檔是否獲得了焦點；

1         var button = document.getElementById('myButton');2         button.focus();3         console.log(documet.hasFocus()); //true

HTMLDocument的變化

HTML5擴展了HTMLDocument，增加了新的功能
1、readyState屬性

它有兩個可能的值
【1】loading,正在加載文檔。
【2】complete,已經(jīng)加載完文檔。

使用document.readyState的最恰當(dāng)方式，就是通過它來實現(xiàn)一個指示文檔已經(jīng)加載完成的指示器

2、兼容模式

在標(biāo)準(zhǔn)模式下，document.compatMode的值等于"CSS1Compat",而在混雜模式下，document.compatMode的值等于"BackCompat"。

3、head屬性

作為對document.body引用文檔的<body>元素的補充，HTML5新增了document.head屬性，引用文檔的<head>元素，要引用文檔的<head>元素，可以結(jié)合使用這個屬性和另一種后備方法。

1         var head = document.head || document.getElementsByTagName('head')[0];

字符集屬性

HTML5新增了幾個與文檔字符集有關(guān)的屬性，其中，charset屬性表示文檔中實際使用的字符集，也可以用來指定新字符集。默認(rèn)情況下，這個屬性的值為"UTF-16";

1         console.log(document.charset); //"UTF-16"2         document.charset = "UTF-8";

另一個屬性是defaultCharset，表示根據(jù)默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置，當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么。如果文檔沒有默認(rèn)的字符集，那charset和defaultCharset屬性的值可能會不一樣，例如：

1         if(document.charset != document.defaultCharset){2             console.log("Custom character set being used.");3         }

自定義數(shù)據(jù)屬性

HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴data-,目的是為元素提供與渲染無關(guān)的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以data-開頭即可

1         <div id="myDiv" data-appid="12345" data-myname="Nicholas"></div>

添加了自定義屬性后，可以通過dataset屬性來訪問自定義屬性的值，只不過屬性名沒有data-前綴

DOM擴展-HTML5、專有擴展

1         var div = document.getElementById('myDiv');2 3         //取得自定義屬性的值4         var appid = div.dataset.appid;5         var myName = div.dataset.myName;6 7         //設(shè)置值8         div.dataset.appid = 23456;9         div.dataset.myName = "Michael";

DOM擴展-HTML5、專有擴展

如果需要給元素添加一些不可見的數(shù)據(jù)以便進行其他處理，那就要用到自定義數(shù)據(jù)屬性

插入標(biāo)記

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

DOM擴展-HTML5、專有擴展

1         <div>2             <p>This is a <strong>paragraph</strong>with a list following it.</p>3             <ul>4                 <li>Item 1</li>5                 <li>Item 2</li>6                 <li>Item 3</li>7             </ul>8         </div>

DOM擴展-HTML5、專有擴展

對于上面的<div>來說，他的innerHTMl屬性會返回如下字符串。

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

不要指望所有瀏覽器返回的innerHTML值完全相同,使用innerHTML屬性也有一些限制。比如，在大多數(shù)瀏覽器中，通過innerHTML插入<script>元素并不會執(zhí)行其中的腳本。但IE8除外，但是也有要求：
【1】必須為<script>元素指定defer屬性
【2】<script>元素必須位于"有作用域的元素"之后(<script>元素被認(rèn)為是"無作用域的元素"，也就是在頁面中看不到，與<style>或注釋類似)

下面的代碼達不到目的：

1 div.innerHTML = "<script defer>alert('hi')<\/script>";

要想達到目的就要在前面添加一個"有作用域的元素"，可以使一個文本節(jié)點，也可以是一個沒有結(jié)束標(biāo)簽的元素例如<input>，下面的代碼都能執(zhí)行；

1         div.innerHTML = "_<script defer>alert('hi')<\/script>";2         div.innerHTML = "<div>&nbsp;</div><script defer>alert('hi')<\/script>";3         div.innerHTML = "<input111<script defer>alert('hi')<\/script>";

2、outerHTML屬性

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

DOM擴展-HTML5、專有擴展

1         <div>2             <p>This is a <strong>paragraph</strong>with a list following it.</p>3             <ul>4                 <li>Item 1</li>5                 <li>Item 2</li>6                 <li>Item 3</li>7             </ul>8         </div>

DOM擴展-HTML5、專有擴展

如果在div上調(diào)用outerHTML，會返回上述所有代碼，包括div；不過，由于瀏覽器解析和解釋HTML標(biāo)記的不同，結(jié)果也可能有所不同；(這里的不同于使用innerHTML屬性時存在的差異是一樣的)

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

這行代碼完成的操作與下列代碼是一樣的

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

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

3、insertAdjacentHTML()方法

它接受兩個參數(shù)：插入位置和要插入的HTML文本；第一個參數(shù)必須是下列值之一：

beforebegin:在當(dāng)前元素前插入一個同輩元素；
afterbegin:在當(dāng)前元素之下插入一個新的子元素或在第一個子元素之前再插入新的子元素
beforeend:在當(dāng)前元素之下插入一個新的子元素或在最后一個子元素之前再插入新的子元素
afterend:在當(dāng)前元素之后插入一個同輩元素；

1         //作為第一個子元素插入2         element.insertAdjacentHTML("afterbegin","<p>Hello world!</p>");

scrollIntoView()方法

scrollIntoView()方法可以再所有HTML元素上調(diào)用，通過滾動瀏覽器窗口或某個容器元素，調(diào)用元素就可以出現(xiàn)在視口中。如果給這個方法傳入true或者不傳入任何參數(shù)，那么窗口滾動之后會讓調(diào)用元素的頂部和視口頂部盡可能齊平。如果傳入false作為參數(shù)，調(diào)用元素會盡可能全部出現(xiàn)在視口中

1         //讓元素可見2         document.forms[0].scrollIntoView();

專有擴展

children屬性

children屬性是HTMLCollection的實例，只包含元素中同樣還是元素的子節(jié)點。除此之外children屬性與childNodes沒有什么區(qū)別。

contains()方法

這個方法接受一個參數(shù)，即要檢測的后代節(jié)點。如果被檢測的節(jié)點是后代節(jié)點，該方法返回true；否則返回false。調(diào)用contains()方法的應(yīng)該是祖先節(jié)點。

1         console.log(document.documentElement.contains(document.body)); //true

使用DOM Level 3 compareDocumentPosition()也能夠確定節(jié)點間的關(guān)系，它會返回一個表示該關(guān)系的位掩碼

1：無關(guān)
2：居前
4：居后
8：包含
16：被包含

插入文本

1、innerText屬性

innerText讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。在通過innerText寫入值時，結(jié)果會刪除元素的所有子節(jié)點，插入包含相應(yīng)文本值的文本節(jié)點，如下：

DOM擴展-HTML5、專有擴展

1         <div>2             <p>This is a <strong>paragraph</strong>with a list following it.</p>3             <ul>4                 <li>Item 1</li>5                 <li>Item 2</li>6                 <li>Item 3</li>7             </ul>8         </div>

DOM擴展-HTML5、專有擴展

對于div而言，它的innerText屬性會返回下列字符串

This is a paragraph
Item 1
Item 2
Item 3

不同的瀏覽器處理空白符的方式不同，可能輸出的文本可能不會包含原始HTML代碼中的縮進

1         div.innerText = "Hello world";

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

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

注意：Firefox雖然不支持innerText，但支持作用類似的textContent屬性

2、outerText屬性

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

新聞名稱：DOM擴展-HTML5、專有擴展
瀏覽路徑：http://jinyejixie.com/article30/jojhpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、營銷型網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

DOM擴展-HTML5、專有擴展

HTML5

專有擴展