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