溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
與類相關(guān)的擴(kuò)充
1、getElementsByClassName()方法
改方法接受一個(gè)參數(shù)，即一個(gè)包含一或多個(gè)類名的字符串，返回帶有指定類的所有元素的NodeList。傳入多個(gè)類型時(shí)，先后順序不重要。
1 //取得所有類中包含"username"和"current"的元素，類名的先后順序不重要2 var allCurrentUsername = document.getElementsByClassName('username current');3 //取得ID為'myDiv'的元素中都帶有類名"selected"的所有元素4 var selected = document.getElementById('myDiv').getElementsByClassName('selected');調(diào)用這個(gè)方法時(shí)，只有位于調(diào)用元素子樹中的元素才會(huì)返回。
2、classList屬性
在操作類名時(shí)，需要通過className屬性添加，刪除和替換類名。因?yàn)閏lassName中是一個(gè)字符串，所以即使只修改字符串的一部分，也必須每次都設(shè)置整個(gè)字符串。HTML5新增加了一種操作類名的方式，那就是為所有元素都添加classList屬性。這個(gè)classList屬性是新集合類型DOMTiokenList的實(shí)例。與其他DOM集合類似，DOMTokenList有一個(gè)表示自己包含多少元素的length屬性，而要取得每個(gè)元素可以使用item()方法，也可以使用方括號(hào)語法。此外，這個(gè)新類型還定義如下方法：
//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');
焦點(diǎn)管理
document.activeElement屬性，這個(gè)屬性始終會(huì)引用DOM中當(dāng)前獲得了焦點(diǎn)的元素。元素獲得焦點(diǎn)的方法通常有頁面加載，用戶輸入和在代碼中調(diào)用focus()方法。
1 var button = document.getElementById('myButton');2 button.focus();3 console.log(document.activeElement === button); //true默認(rèn)情況下，文檔剛剛加載完成時(shí)，document.activeElement的值為document.body，當(dāng)文檔加載時(shí)document.activeElement的值為null；
document.hasFocus()方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)；
1 var button = document.getElementById('myButton');2 button.focus();3 console.log(documet.hasFocus()); //true
HTMLDocument的變化
HTML5擴(kuò)展了HTMLDocument，增加了新的功能
1、readyState屬性
它有兩個(gè)可能的值
【1】loading,正在加載文檔。
【2】complete,已經(jīng)加載完文檔。
使用document.readyState的最恰當(dāng)方式，就是通過它來實(shí)現(xiàn)一個(gè)指示文檔已經(jīng)加載完成的指示器
2、兼容模式
在標(biāo)準(zhǔn)模式下，document.compatMode的值等于"CSS1Compat",而在混雜模式下，document.compatMode的值等于"BackCompat"。
3、head屬性
作為對(duì)document.body引用文檔的<body>元素的補(bǔ)充，HTML5新增了document.head屬性，引用文檔的<head>元素，要引用文檔的<head>元素，可以結(jié)合使用這個(gè)屬性和另一種后備方法。
1 var head = document.head || document.getElementsByTagName('head')[0];
字符集屬性
HTML5新增了幾個(gè)與文檔字符集有關(guān)的屬性，其中，charset屬性表示文檔中實(shí)際使用的字符集，也可以用來指定新字符集。默認(rèn)情況下，這個(gè)屬性的值為"UTF-16";
1 console.log(document.charset); //"UTF-16"2 document.charset = "UTF-8";
另一個(gè)屬性是defaultCharset，表示根據(jù)默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置，當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么。如果文檔沒有默認(rèn)的字符集，那charset和defaultCharset屬性的值可能會(huì)不一樣，例如：
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-前綴
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";
如果需要給元素添加一些不可見的數(shù)據(jù)以便進(jìn)行其他處理，那就要用到自定義數(shù)據(jù)屬性
插入標(biāo)記
在讀模式下，innerHTML屬性會(huì)返回與調(diào)用元素的所有子節(jié)點(diǎn)(包括元素、注釋和文本節(jié)點(diǎn))對(duì)應(yīng)的HTML標(biāo)記；在寫模式下，innerHTML會(huì)根據(jù)指定的值創(chuàng)建新的DOM樹，然后用這個(gè)DOM樹完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)；下面是一個(gè)例子
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>
對(duì)于上面的<div>來說，他的innerHTMl屬性會(huì)返回如下字符串。
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>元素并不會(huì)執(zhí)行其中的腳本。但I(xiàn)E8除外，但是也有要求：
【1】必須為<script>元素指定defer屬性
【2】<script>元素必須位于"有作用域的元素"之后(<script>元素被認(rèn)為是"無作用域的元素"，也就是在頁面中看不到，與<style>或注釋類似)
下面的代碼達(dá)不到目的：
1 div.innerHTML = "<script defer>alert('hi')<\/script>";要想達(dá)到目的就要在前面添加一個(gè)"有作用域的元素"，可以使一個(gè)文本節(jié)點(diǎn)，也可以是一個(gè)沒有結(jié)束標(biāo)簽的元素例如<input>，下面的代碼都能執(zhí)行；
1 div.innerHTML = "_<script defer>alert('hi')<\/script>";2 div.innerHTML = "<div> </div><script defer>alert('hi')<\/script>";3 div.innerHTML = "<input111<script defer>alert('hi')<\/script>";2、outerHTML屬性
在讀模式下，outerHTML返回調(diào)用它的元素及所有子節(jié)點(diǎn)的HTML標(biāo)簽。在寫模式下，outerHTML會(huì)根據(jù)指定的HTML字符串創(chuàng)建新的DOM子樹，然后用這個(gè)DOM子樹完全替換調(diào)用元素
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>
如果在div上調(diào)用outerHTML，會(huì)返回上述所有代碼，包括div；不過，由于瀏覽器解析和解釋HTML標(biāo)記的不同，結(jié)果也可能有所不同；(這里的不同于使用innerHTML屬性時(shí)存在的差異是一樣的)
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>元素會(huì)取代DOM樹中的<div>元素
3、insertAdjacentHTML()方法
它接受兩個(gè)參數(shù)：插入位置和要插入的HTML文本；第一個(gè)參數(shù)必須是下列值之一：
beforebegin:在當(dāng)前元素前插入一個(gè)同輩元素；
afterbegin:在當(dāng)前元素之下插入一個(gè)新的子元素或在第一個(gè)子元素之前再插入新的子元素
beforeend:在當(dāng)前元素之下插入一個(gè)新的子元素或在最后一個(gè)子元素之前再插入新的子元素
afterend:在當(dāng)前元素之后插入一個(gè)同輩元素；
1 //作為第一個(gè)子元素插入2 element.insertAdjacentHTML("afterbegin","<p>Hello world!</p>");scrollIntoView()方法
scrollIntoView()方法可以再所有HTML元素上調(diào)用，通過滾動(dòng)瀏覽器窗口或某個(gè)容器元素，調(diào)用元素就可以出現(xiàn)在視口中。如果給這個(gè)方法傳入true或者不傳入任何參數(shù)，那么窗口滾動(dòng)之后會(huì)讓調(diào)用元素的頂部和視口頂部盡可能齊平。如果傳入false作為參數(shù)，調(diào)用元素會(huì)盡可能全部出現(xiàn)在視口中
1 //讓元素可見2 document.forms[0].scrollIntoView();
children屬性
children屬性是HTMLCollection的實(shí)例，只包含元素中同樣還是元素的子節(jié)點(diǎn)。除此之外children屬性與childNodes沒有什么區(qū)別。
contains()方法
這個(gè)方法接受一個(gè)參數(shù)，即要檢測(cè)的后代節(jié)點(diǎn)。如果被檢測(cè)的節(jié)點(diǎn)是后代節(jié)點(diǎn)，該方法返回true；否則返回false。調(diào)用contains()方法的應(yīng)該是祖先節(jié)點(diǎn)。
1 console.log(document.documentElement.contains(document.body)); //true
使用DOM Level 3 compareDocumentPosition()也能夠確定節(jié)點(diǎn)間的關(guān)系，它會(huì)返回一個(gè)表示該關(guān)系的位掩碼
1：無關(guān)
2：居前
4：居后
8：包含
16：被包含
插入文本
1、innerText屬性
innerText讀取值時(shí)，它會(huì)按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。在通過innerText寫入值時(shí)，結(jié)果會(huì)刪除元素的所有子節(jié)點(diǎn)，插入包含相應(yīng)文本值的文本節(jié)點(diǎn)，如下：
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>
對(duì)于div而言，它的innerText屬性會(huì)返回下列字符串
This is a paragraph
Item 1
Item 2
Item 3
不同的瀏覽器處理空白符的方式不同，可能輸出的文本可能不會(huì)包含原始HTML代碼中的縮進(jìn)
1 div.innerText = "Hello world";
執(zhí)行這段代碼后，頁面就會(huì)變成如下所示：
1 <div id="content">Hello world!</div>
注意：Firefox雖然不支持innerText，但支持作用類似的textContent屬性
2、outerText屬性
除了作用范圍擴(kuò)大到了包含調(diào)用它的節(jié)點(diǎn)之外，outerText與innerText基本上沒有多大區(qū)別。在讀取文本值時(shí)，outerText與innerText的結(jié)果完全一樣。但在寫模式下，outerText就完全不同了；outerText不只是替換調(diào)用它的元素的子節(jié)點(diǎn)，而是會(huì)替換整個(gè)元素。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼