HTML5廢除的元素

除的元素

1、能用css代替的元素

basefont、big、center、font、s、strike、tt、u。這些元素純粹是為畫面展示服務(wù)的，HTML5中提倡把畫面展示性功能放在css中統(tǒng)一編輯。

2、不再使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個頁面組成的符合頁面的形式，

刪除以上這三個標(biāo)簽。

3、只有部分瀏覽器支持的元素

applet、bgsound、blink、marquee等標(biāo)簽。

4、其他被廢除的元素

廢除rb, 使用ruby替代。

廢除acronym使用abbr替代。

廢除dir使用ul替代。

廢除isindex使用form與input相結(jié)合的方式替代

廢除listing使用pre替代

廢除xmp使用code替代

廢除nextid使用guids

廢除plaintex使用“text/plian”（無格式正文）MIME類型替代。

法1：

使用CSS removeProperty：該CSSStyleDeclaration.removeProperty（）方法被用來從一個元件的樣式刪除一個屬性。

通過遍歷styleSheets數(shù)組并選擇cssRule，可以選擇元素的樣式。然后可以使用要刪除的屬性指定removeProperty方法。

句法：

element.removeProperty('property')

實例1：

<!DOCTYPE html> <html>   <head>     <title>       How to remove CSS property using JavaScript?   </title>     <style>         .elem {             color: green;             font-size: 3rem;             text-decoration: underline;         } </style> </head>   <body>     <h1 style="color: green">       GeeksForGeeks   </h1>     <b>       How to remove CSS property using JavaScript?   </b>     <div class="elem">Hello World!</div>     <p>       Click on the button below to remove       the text decoration of the element   </p>     <button onclick="removeProperty()">       Remove text-decoration property   </button>     <script>         function removeProperty() {             element =                document.styleSheets[0].cssRules[0].style;             element.removeProperty('text-decoration');         } </script> </body>   </html>

輸出：

在單擊按鈕之前：

單擊按鈕后：

方法2：使用setProperty方法：該CSSStyleDeclaration.setProperty（）方法可用于設(shè)置的樣式的所需的屬性。選擇必須刪除其屬性的元素，并將此屬性應(yīng)用于其style屬性。將此屬性設(shè)置為“ initial”可將屬性重置為其初始值，從而消除該屬性的任何影響。

句法：

element.style.setProperty（'color'，'initial'）

例如：

<!DOCTYPE html> <html>   <head>     <title>       How to remove CSS property using JavaScript?   </title>     <style>         .elem {             color: green;             font-size: 3rem;             text-decoration: underline;         } </style> </head>   <body>     <h1 style="color: green">       GeeksForGeeks   </h1>     <b>       How to remove CSS property using JavaScript?   </b>     <div class="elem">Hello World!</div>     <p>       Click on the button below to remove the text       color of the element   </p>     <button onclick="removeProperty()">       Remove color property   </button>     <script>         function removeProperty() {             element = document.querySelector('.elem');             element.style.setProperty('color', 'initial');         } </script> </body>   </html>

輸出：

在單擊按鈕之前：

單擊按鈕后：

本文完~

每日更新一個開發(fā)小技巧，希望對你有幫助哦，覺得有用的麻煩點點贊支持一下哦，謝謝~~

內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學(xué)習(xí)。

Element.innerHTML屬性：

操作元素內(nèi)HTML內(nèi)容，即可設(shè)置或獲取使用HTML代碼表示的元素的后代；

在讀取時，該屬性返回與調(diào)用元素的所有子節(jié)點（包括元素、注釋和文本節(jié)點）對應(yīng)的HTML代碼字會串，如：

<div id="mydiv">
    <h2>零點程序員</h2>
    <ul id="myList">
        <li>HTML</li>
        <li class="current">CSS</li>
        <li>JavaScript</li>
    </ul>
</div>
<script>
var mydiv = document.getElementById("mydiv");
console.log(mydiv.innerHTML);
</script>

注：不同瀏覽器返回的文本格式有可能不同，比如，部分低版本會把所有標(biāo)簽轉(zhuǎn)換為大寫；另外，瀏覽器會按照原先文檔的格式返回，包括空格和縮進(jìn)；

在寫入時，會將給定的字符串解析為DOM子樹，將用這個DOM子樹替換調(diào)用元素原先的所有子節(jié)點；如果設(shè)置的值是文本沒有HTML標(biāo)簽，其結(jié)果就是純文本，也就是文本節(jié)點，此時，如果該文本節(jié)點包含字符&、<或>， innerHTML將這些字符分別返回為&、<和>；

mydiv.innerHTML = "零點程序員 & zeronetwork 主講><b>\"王唯\"</b>";
console.log(mydiv.innerHTML);
mydiv.innerHTML = "零點程序員";

設(shè)置元素的innerHTML屬性將會刪除該元素的所有后代，因此，如果要保留原來的內(nèi)容，可以在innerHTML屬性的基礎(chǔ)上，可以使用+=進(jìn)行賦值，也就達(dá)到了追加內(nèi)容的效果；

mydiv.innerHTML += "<b>大師哥王唯</b>";

如果設(shè)置innerHTML屬性時，使用了不合法的HTML代碼，瀏覽器會自動修正，但要避免出現(xiàn)這種問題；

另外，不允許document對象使用該屬性，如果使用了，會靜默失敗；

設(shè)置了innerHTML屬性后，可以像訪問文檔中的其他節(jié)點一樣訪問新創(chuàng)建的節(jié)點；

console.log(mydiv.childNodes);

從本質(zhì)上來看，設(shè)置innerHTML屬性，瀏覽器會把給定的值被解析為HTML或者XML，結(jié)果就是一個DocumentFragment對象，其中保存著代表元素的DOM節(jié)點，然后再append到元素中；

innerHTML也有一些限制，在多數(shù)瀏覽器中，通過innerHTML插入的<script> 元素不會被執(zhí)行，因為有可能會產(chǎn)生潛在的安全問題；

var content = document.getElementById("content");
content.innerHTML = "<script>alert('wangwei');<\/script>";

即使如此，使用innerHTML屬性也不能消除潛在的風(fēng)險，比如，繞過<script>標(biāo)簽，把腳本綁定到相關(guān)的事件中；

mydiv.innerHTML = "<img src='nourl' onerror='alert(\"加載圖片出錯啦\")'>";

通過innerHTML寫入<style>元素就可以運行；如：

mydiv.innerHTML = "<style>body{background-color:purple;}</style>";
// 放在head中
document.head.innerHTML += "<style>body{background-color:purple;}</style>";
console.log(document.head.innerHTML);

在設(shè)置innerHTML屬性時，雖然元素的所有子元素被替換，其仍被保存在內(nèi)存中，如果事先有變量在引用這些子元素，在設(shè)置innerHTML后，這些變量仍將保持對原始子元素的引用；

var mydiv = document.getElementById("mydiv");
var h2 = mydiv.querySelector("h2");
mydiv.innerHTML = "新內(nèi)容";
console.log(h2);
mydiv.appendChild(h2);

并不是所有元素都有innerHTML屬性，不支持的有<col> <colgroup> <frameset> <head> <html> <style> <table> <tbody> <thead> <tfoot> <title> <tr>

無論什么時候插入外界的HTML內(nèi)容時，都應(yīng)該對HTML進(jìn)行無害化處理，IE8提供了window.toStaticHTML()方法，接受一個HTM字符串，返回一個經(jīng)過無害化處理后的版本；

var mydiv = document.getElementById("mydiv");
var text = "<a href='#' onclick='alert(\"hi\")'>zeronetwork</a>";
// mydiv.innerHTML = text;
var sanitized = window.toStaticHTML(text);  // [?s?n?ta?zd]
console.log(sanitized);  // 非IE會拋出異常
mydiv.innerHTML = sanitized;

小示例：

使用innerHTML創(chuàng)建一種機(jī)制用于將消息記錄到頁面中的一個元素中；

<style>
.box{width: 600px;height: 300px;
border:1px solid black; padding: 2em; overflow: hidden scroll;}
</style>
<div class="box">
    <h2>日志：</h2>
    <div class="log"></div>
</div>
<script>
function log(msg){
    var logEle = document.querySelector(".log");
    var time = new Date().toLocaleTimeString();
    logEle.innerHTML += time + ": " + msg + "<br/>"; 
}
// log("打印一些數(shù)據(jù)");
// 定義一個事件處理程序
function logEvent(event){
    var msg = "Event <strong>" + event.type + "</strong> at <em>" + 
        event.clientX + "," + event.clientY + "</em>";
    log(msg);
}
// 綁定事件處理程序
var boxEle = document.querySelector(".box");
boxEle.addEventListener("mousedown", logEvent);
boxEle.addEventListener("mouseup", logEvent);
boxEle.addEventListener("click", logEvent);
boxEle.addEventListener("mouseenter", logEvent);
boxEle.addEventListener("mouseleave", logEvent);
</script>

Element.outerHTML屬性：

與innerHTML屬性基本一致，不同點是，innerHTML是訪問和設(shè)置元素的所有子節(jié)點，而outerHTML屬性不僅包括它的所有子節(jié)點，也包括它本身；

console.log(mydiv.outerHTML);
mydiv.outerHTML = "<p><h2>零點網(wǎng)絡(luò)</h2></p>";

如果元素沒有父元素，即如果它是文檔的根元素，在設(shè)置其outerHTML屬性將拋出異常，如：

document.documentElement.outerHTML = "content"; // 異常

這個屬性應(yīng)用的機(jī)會非常少；

HTMLElement.innerText屬性：

可以操作元素中包含的所有文本，最初是由IE實現(xiàn)的，后來被納入標(biāo)準(zhǔn)中；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.innerText);
mydiv.innerText = "零點程序員";
console.log(mydiv.innerText);

輸出一個文檔樹時，無論文本位于文檔樹中的什么位置，會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來；

<div id="content">
    <p>零點網(wǎng)絡(luò)<strong>zerontwork</strong>是一家從事IT教育的公司</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</div>
<script>
var content = document.getElementById("content");
console.log(content.innerText);
// 返回
// 零點網(wǎng)絡(luò)zerontwork是一家從事IT教育的公司
//
// HTML/
// CSS
// Javascript
</script>

由于不同瀏覽器處理空白字符的方式不同，因此輸出的文本可能會也可能不會包含原始的HTML代碼中的縮進(jìn)；

使用innerText屬性設(shè)置內(nèi)容時，會移除原先所有的子節(jié)點，將永遠(yuǎn)只會生成當(dāng)前節(jié)點的一個子文本節(jié)點；如果設(shè)置的內(nèi)容包括HTML標(biāo)簽，會自動被轉(zhuǎn)碼，也就是說，會對所有出現(xiàn)在文本中的HTML語法字符進(jìn)行編碼（>、<、”、&）；

mydiv.innerText = "<h2>wangwei</h2>";  // < > 會被轉(zhuǎn)義

因為在訪問innerText屬性時，其會過濾掉html標(biāo)簽，所以可以利用它的這個特點，快速過濾掉元素的HTML標(biāo)簽，即把innerText設(shè)置為innerText；

content.innerText = content.innerText;
console.log(content.innerText);

如果在設(shè)置innerHTML屬性時，賦給的就是純文本字符串，那它就與innerText屬性作用一樣了；

var mydiv = document.getElementById("mydiv");
mydiv.innerText = "零點網(wǎng)絡(luò) zeronetwork";
mydiv.innerHTML = "零點網(wǎng)絡(luò) zeronetwork";
mydiv.innerText = "零點網(wǎng)絡(luò)\nzeronetwork";  // 有br
mydiv.innerHTML = "零點網(wǎng)絡(luò)\nzeronetwork";  // 無br，但源碼格式有換行

因為innerHTML是解析html標(biāo)簽的，而\n不是標(biāo)簽，所以當(dāng)作空格被忽略了；但在innerText中，瀏覽器遇到\n，就會執(zhí)行換行，所以把它解析為<br>；

在實際使用中，如果要過濾html標(biāo)簽，可以使用正則，如：

// 去除html標(biāo)簽可以使用正則
content.innerHTML = content.innerHTML.replace(/<.+?>/img,"");
console.log(content.innerText);  // 沒有格式<br>
console.log(content.innerHTML);  // 沒有格式<br>

HTMLElement.outerText屬性：

與innerText一樣，只不過替換的是元素(包括子節(jié)點)本身；其是一個非標(biāo)準(zhǔn)屬性；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.innerText);
console.log(mydiv.outerText); // 返回值與innerText一致

在讀取文本值時，outerText和innerText的結(jié)果完全一樣；

但在寫模式下，outerText就完全不同了，其本身都會被新的文本節(jié)點都替代，從文檔中被刪除，但其仍然被保存在內(nèi)存中，如果有變量引用，還可以再利用；

mydiv.outerText = "零點程序員";
console.log(mydiv);  // 依然保留著原有的引用

FF不支持outerText屬性，如：

mydiv.outerText = "零點程序員";  // 在FF中失效
// 在FF中返回undefined，如果有上一行，會打印出“零點程序員”，但這和內(nèi)置的outerText沒有關(guān)系
console.log(mydiv.outerText);

在實際使用中，只會用到innerHTML和innerText，其他兩個一般不用，也沒有多大的實際意義；

Node.textContent屬性：

DOM3規(guī)定了一個屬性textContent，該屬性被定義在Node接口中，它的作用類似innerText屬性，返回一個節(jié)點及其后代的所有文本內(nèi)容；

var mydiv = document.getElementById("mydiv");
console.log(mydiv.innerText);
console.log(mydiv.textContent); // 返回值與innerText基本一致，但格式不一樣

如果設(shè)置textContent屬性，會刪除該元素的所有子節(jié)點，并被替換為包含指定字符串的一個單獨的文本節(jié)點；

var mydiv = document.getElementById("mydiv");
mydiv.textContent = "大師哥王唯";
mydiv.textContent = "<h3>大師哥王唯</h3>";  // 會被轉(zhuǎn)碼
console.log(mydiv.textContent);
console.log(mydiv.childNodes);  // NodeList [text]

如果節(jié)點是文本節(jié)點，此屬性可用于取代 nodeValue 屬性，如；

var h2 = document.querySelector("h2").firstChild; // 取得文本節(jié)點
console.log(h2.textContent); // zeronetwork
console.log(h2.nodeValue);   // zeronetwork
h2.nodeValue = "零點程序員";
console.log(h2.textContent); // 零點程序員
console.log(h2.nodeValue);   // 零點程序員

可以看出，兩者是聯(lián)動的；

如果事先有變量引用著它的后代節(jié)點，即使節(jié)點使用該方法移除所有后代節(jié)點，但被引用的后代節(jié)點依然存在，可以被再次利用；

var content = document.getElementById("content");
var h2 = content.querySelector("h2");  // content中的h2
content.textContent = "王唯";
console.log(content.textContent);
console.log(h2);  // <h2>zeronetwork</h2>
console.log(h2.parentElement);  // null
var mydiv = document.getElementById("mydiv");
mydiv.appendChild(h2);

與innerText屬性的區(qū)別：

兩者的返回的內(nèi)容并不完全一樣，比如在輸出的格式上其與innerText是不同的，其會保留代碼中的空白符；同時，innerText針對表格，會試圖保留表格的格式；

var mytable = document.getElementById("mytable");
console.log(mytable.innerText);
console.log(mytable.textContent);

textContent屬性會返回元素的所有內(nèi)容，包括其中的樣式和腳本代碼，而innerText只返回能呈現(xiàn)在頁面上的元素；

// 在mydiv中添加<style>和<script>標(biāo)簽
var mydiv = document.getElementById("mydiv");
console.log(mydiv.innerText); // 不包括<style>和<script>
// 包括<style>和<script>標(biāo)簽內(nèi)的內(nèi)容，但該標(biāo)簽被過濾了
console.log(mydiv.textContent);

既然innerText只返回能呈現(xiàn)在頁面上的元素，所以它的返回值會受CSS樣式的影響，不會返回被CSS隱藏的元素的文本；

<!-- textContent返回值沒有變化，但innerText不包括"HTML"和"CSS" -->
<ul id="mylist">
    <li style="visibility: hidden;">HTML</li>
    <li style="display: none;">CSS</li>
    <li>JavaScript</li>
</ul>

textContent屬性能返回文本節(jié)點的文本內(nèi)容，而innerText會返回undefined；如果是文本節(jié)點調(diào)用textContent屬性，其返回值與nodeValue一致；

innerHTML有可能會引發(fā)安全問題，但textConent卻不會；

mydiv.innerHTML = "<img src='nourl' onerror='alert(\"加載圖片出錯啦\")'>";
mydiv.textContent = "<img src='nourl' onerror='alert(\"加載圖片出錯啦\")'>";
console.log(mydiv.childNodes);  // index.html:20 NodeList [text]

第一行的onerror會被執(zhí)行，第二行不會執(zhí)行，并且其被解析為文本節(jié)點，如此，textContent不會引發(fā)安全問題；

所有主流的瀏覽器都支持textContent屬性，但I(xiàn)E8及以下不支持，可以包裝一個兼容的函數(shù)：

function getInnerText(element){
    return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text){
    if(typeof element.textContent == "string")
        element.textContent = text;
    else
        element.innerText = text;
}
document.write(getInnerText(content));
setInnerText(content, "零點程序員");

或者直接定義在Node.prototype中：

if(Object.defineProperty 
    && Object.getOwnPropertyDescriptor
    && !Object.getOwnPropertyDescriptor(Node.prototype, "textContent")){
    (function(){
        var innerText = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerText");
        Object.defineProperty(Node.prototype, "textContent",{
            get: function(){
                return innerText.get.call(this);
            },
            set: function(s){
                return innerText.set.call(this, s);
            }
        });
    })();
}

<script>元素中的文本：

內(nèi)聯(lián)的<script>元素有一個text屬性用來獲取它們的文本；

<script>
    console.log("function");
    function func(){return true;}
</script>
<script>
var script = document.getElementsByTagName("script")[0];
console.log(script.innerText);
console.log(script.textContent);
console.log(script.text);  // 三者輸出一致
</script>

如果將<script>元素的type屬性設(shè)置為”text/x-custom-data”，就表明了腳本為不可執(zhí)行的Javascript代碼，如此，Javascript解析器將忽略該腳本，這也使得<script>元素可以被用來嵌入任意文本內(nèi)容；

<script type="text/x-custom-data">
    console.log("function");
    function func(){return true;}
</script>
<script>
var script = document.getElementsByTagName("script")[0];
console.log(script.innerText);
console.log(script.textContent);
console.log(script.text);  // 三者輸出一致
</script>

<script type="text/x-custom-data">
<div style="border:1px solid red; width:300px;">
    <h2>視頻教程</h2>
</div>
</script>
<script>
var script = document.getElementsByTagName("script")[0];
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = script.text;
</script>

Element.insertAdjacentHTML(position, text)方法：

該方法會將任意的HTML字符串text解析為Element元素，并將結(jié)果節(jié)點插入到DOM樹中的指定的元素”相鄰”的position位置；該方法最早是在IE4中出現(xiàn)的；它接收兩個參數(shù)：插入位置和要插入的HTML文本；

第一個參數(shù)position的可能值：

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

第二個參數(shù)text為HTML字符串，如果瀏覽器無法解析，會拋出錯誤，如；

var mydiv = document.getElementById("mydiv");
mydiv.insertAdjacentHTML("beforebegin","<p>前一個同輩元素</p>");
mydiv.insertAdjacentHTML("afterbegin","<p>作為第一個子元素</p>");
mydiv.insertAdjacentHTML("beforeend","<p>最后一個子元素</p>");
mydiv.insertAdjacentHTML("afterend","<p>后一個同輩元素</p>");

insertAdjacentHTML()方法同innerHTML屬性一樣，會遇到安全問題，在使用該屬性插入HTML內(nèi)容時，需要轉(zhuǎn)義之后才能使用；

另外，如果元素沒有子元素的時候，其和innerHTML就非常相像了；

var newdiv = document.createElement("div");
newdiv.insertAdjacentHTML("afterbegin", "<p>零點程序員</p>");
// 同以下
newdiv.innerHTML = "<p>零點程序員</p>";
document.body.appendChild(newdiv);

需要注意的是，如果position為beforebegin或afterend，那該元素必須具有一個parent元素；

var newdiv = document.createElement("div");
// 異常：The element has no parent，此時newdiv并沒有被添加到DOM樹中，它并沒有父節(jié)點，但是如果把下面行互換一下，就可以了；
newdiv.insertAdjacentHTML("afterend", "<p>零點程序員</p>");
document.body.appendChild(newdiv);

基于insertAdjacentHTML()方法定義一個更符合語義邏輯的一個對象，如：

// Insert.before()、Insert.after()、Insert.atStart()和Insert.atEnd()
var Insert = {
    before: function(e,h) {
        if(e.parentElement)
            e.insertAdjacentHTML("beforebegin", h);
    },
    after: function(e,h) {
        if(e.parentElement)
            e.insertAdjacentHTML("afterend", h);
    },
    atStart: function(e,h) {e.insertAdjacentHTML("afterbegin", h);},
    atEnd: function(e,h) {e.insertAdjacentHTML("beforeend", h);}
};
var mydiv = document.getElementById("mydiv");
Insert.before(mydiv, "<h2>zeronetwork</h2>");
// 或者
// 假定where值為before、after、innerfirst和innerlast
function insertHTML(el, where, html){
    if(!el) return false;
    var _where = "beforeend";
    switch(where){
        case "before":
            _where = "beforebegin";
            break;
        case "after":
            _where = "afterend";
            break;
        case "innerfirst":
            _where = "afterbegin";
            break;
        case "innerlast":
            _where = "beforeend";
            break;
        default:
            _where = "beforeend";
            break;
    }
    if(_where == "beforebegin" || _where == "afterend"){
        if(!el.parentElement)
            return false;
    }
    el.insertAdjacentHTML(_where, html);
}
var mydiv = document.getElementById("mydiv");
insertHTML(mydiv, "innerfirst", "<h2>zeronetwork</h2>");

小示例，添加商品：

<div class="container">
    <div class="formdiv">
        <label>商品：</label><input type="text" id="product" /><br/>
        <label>價格：</label><input type="text" id="price" /><br/>
        <label>數(shù)量：</label><input type="text" id="quantity" /><br/>
        <button id="btnAdd">添加</button>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>序號</th><th>商品</th><th>價格</th><th>數(shù)量</th><th>金額</th>
            </tr>
        </thead>
        <tbody id="data"></tbody>
    </table>
</div>
<script>
var id=1;
var btnAdd = document.getElementById("btnAdd");
btnAdd.addEventListener("click",function(e){
    var content = document.getElementById("data");
    
    var product = document.getElementById("product").value;
    var price = document.getElementById("price").value;
    var quantity = document.getElementById("quantity").value;
    var total = price * quantity;
    var newEntry = "<tr>" + 
        "<td>" + id + "</td>" + 
        "<td>" + product + "</td>" + 
        "<td>" + price + "</td>" + 
        "<td>" + quantity + "</td>" + 
        "<td>" + total + "</td>" + 
        "</tr>";
    content.insertAdjacentHTML('afterbegin', newEntry);
    id++;
},false);
</script>

Element.insertAdjacentText(position, text)方法：

該方法與insertAdjacentHTML()類似，只不過插入的是純文本內(nèi)容，它的作用是將一個給定的文本text插入到相對于被調(diào)用的元素的給定position位置；

position的值insertAdjacentHTML()中的position是一樣的；

var mydiv = document.getElementById("mydiv");
mydiv.insertAdjacentText("afterbegin","王唯");
mydiv.insertAdjacentText("afterend","zeronetwork");

如果text是html字符串，也會被當(dāng)作純文本進(jìn)行處理，如：

// 頁面輸出：<h2>王唯</h2>
mydiv.insertAdjacentText("afterbegin","<h2>王唯</h2>");

Element. insertAdjacentElement(position, element)方法：

將一個給定的元素節(jié)點插入到相對于被調(diào)用的元素的給定的position位置；與insertAdjacentHTML()方法類似，只不過插入的是一個節(jié)點對象；該方法會返回一個Element對象；

var mydiv = document.getElementById("mydiv");
var div = document.createElement("div");
div.innerHTML = "<h2>zeronetwork</h2>";
div.style.width = "200px";
div.style.height = "100px";
div.style.backgroundColor = "lightgray";
var newdiv = mydiv.insertAdjacentElement("beforeend", div);
console.log(div === newdiv); // true

github上有人分享了一個包裝的方法，就是利用以上原生的方法；

// 把一個節(jié)點插入到DOM樹中的一個位置
function dominsert(parent, child, position){
    var pos = position || 'beforeend';
    if(typeof child === 'string')
        dominsert.html(parent, child, pos);
    else
        dominsert.element(parent, child, pos);
}
// 使用原生的insertAdjacentHTML()方法
dominsert.html = function(parent, child, position){
    parent.insertAdjacentHTML(position, child);
};
// 使用原生的insertAdjacentElement()或insertBefore()方法
dominsert.element = function(parent, child, position){
    if(parent.insertAdjacentElement)
        parent.insertAdjacentElement(position, child);
    else{
        switch (position){
            case "beforebegin":
                parent.parentNode.insertBefore(child, parent);
                break;
            case "afterbegin":
                parent.insertBefore(child, parent.firstChild);
                break;
            case "beforeend":
                parent.appendChild(child);
                break;
            case "afterend":
                parent.parentNode.insertBefore(child, parent.nextSibling);
                break;
        }
    }
};
var mydiv = document.getElementById("mydiv");
dominsert(mydiv,"<span>web前端</span>");
dominsert(mydiv, "<b>零點程序員</b>", 'beforebegin');
console.log(mydiv);

內(nèi)存和性能問題：

使用以上的方法替換子節(jié)點可能會導(dǎo)致瀏覽器的內(nèi)存占用問題，尤其是在IE中，問題更加明顯；

如果被刪除的子樹中的元素設(shè)置了事件處理程序或者引用了一個Javascript對象作為屬性，被刪除的元素與事件處理程序或引用的JS對象之間的綁定關(guān)系在內(nèi)存中并沒有一并刪除；如果這種情況頻繁出現(xiàn)，頁面占用的內(nèi)存數(shù)量就會明顯增加；因此，在使用innerHTML、outerHTML屬性和insertAdjacentHTML()方法時，最好手工先移除要被替換的元素的所有事件處理程序和JS對象屬性；

不要反復(fù)地使用innerHTML插入HTML；

var arr = ["HTML","CSS","JavaScript"];
var ul = document.getElementById("myList");
for(var i=0,len=arr.length; i < len; i++){
    ul.innerHTML += "<li>" + arr[i] + "</li>"; 
}

，最好的做法是：單獨構(gòu)建字符串變量，再一次性的把結(jié)果賦給innerHTML；

console.time("insert");
var lisHTML = "";
for(var i=0,len=arr.length; i<len;i++){
    lisHTML += "<li>" + arr[i] + "</li>";
}
ul.innerHTML = lisHTML;
console.timeEnd("insert");

adjacent三個方法與insertBefore()、appendChild()和innerHTML的比較；

在某些時候，這些方法屬性都可以達(dá)到同樣的目的，但在實際開發(fā)中，要針對當(dāng)時的情況，選擇一個合適的方法，沒有哪個方法就一定比另外的方法更好，只有相對的合適；

同時，這三個方法的性能雖然不一樣，但相差不大，幾乎可以忽略；

insertAdjacentHTML()與innerHTML屬性的性能：

insertAdjacentHTML()方法不會重新解析它正在使用的元素，因此它不會破壞元素內(nèi)的現(xiàn)有元素，這就避免了額外的序列化步驟，但使用innerHTML時，特別是在原有的基礎(chǔ)上追加元素時，都會對原有的元素重新序列化，因此，前者比后者效率更快；

appendChild()與insertAdjacentHTML()方法的性能；

// time 10ms
console.time("append");
for(var i=0; i<1000; i++)
    mydiv.appendChild(document.createElement("div"));
console.timeEnd("append");
// tim 30ms
console.time("adjacent");
for(var i=0; i<1000; i++)
    mydiv.insertAdjacentHTML("beforeend","<div></div>");
console.timeEnd("adjacent");

可以看到appendChild()方法比insertAdjacentHTML()方法快很多，但是改進(jìn)以上代碼后，為其添加有文本內(nèi)容的元素，如；

// time 30ms多
console.time("append");
for(var i=0; i<1000; i++){
    var div = document.createElement("div");
    var h2 = document.createElement("h2");
    h2.appendChild(document.createTextNode("零點程序員"));
    div.appendChild(h2);
    var p = document.createElement("p");
    p.appendChild(document.createTextNode("由大師哥王唯主講"));
    div.appendChild(p);
    mydiv.appendChild(div);
}
console.timeEnd("append");
// time 40ms多
console.time("adjacent");
for(var i=0; i<1000; i++)
    mydiv.insertAdjacentHTML("beforeend","<div><h2>零點程序員</h2><p>由大師哥王唯主講</p></div>");
console.timeEnd("adjacent");

可以看到，兩者相差10ms，幾乎可以忽略不計；

比較appendChild()與insertAdjacentElement方法的性能；

如：把測試appendChild()方法中的mydiv.appendChild(div)改成mydiv.insertAdjacentElement("beforeend", div);即可；

發(fā)現(xiàn)兩者幾乎相同；

比較insertBefore()與以上兩者的性能；

如：把測試appendChild()方法中的mydiv.appendChild(div)，改成mydiv.insertBefore(div, mydiv.lastChild);，結(jié)束也大同小異；

小實例，排序表格；

基于表格指定列中單元格的值來進(jìn)行排序；

<table id="mytable"  border="1">
    <thead>
        <tr>
            <th>ID</th><th>Name</th><th>Sex</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td><td>wangwei</td><td>女</td>
    </tr>
    <tr>
        <td>2</td><td>jingjing</td><td>男</td>
    </tr>
    <tr>
        <td>3</td><td>juanjuan</td><td>女</td>
    </tr>
</tbody>
</table>
<script>
// 根據(jù)指定表格每行第n個單元格的值，對第一個<tbody>中的行進(jìn)行排序
// 如果存在comparator函數(shù)則使用它，否則按字母表順序比較
function sortrows(table, n, comparator){
    var tbody = table.tBodies[0];  // 第一個<tbody>，可能是隱式創(chuàng)建的
    var rows = tbody.getElementsByTagName("tr");  // tbody中所有行
    rows = Array.prototype.slice.call(rows, 0);  // 變成數(shù)組
    // 基于第n個<td>元素的值進(jìn)行排序
    rows.sort(function(row1, row2){
        var cell1 = row1.getElementsByTagName("td")[n];  // 獲得第n個單元格
        var cell2 = row2.getElementsByTagName("td")[n];  // 同上
        var val1 = cell1.textContent || cell1.innerText; // 獲得文本內(nèi)容
        var val2 = cell2.textContent || cell2.innerText;
        if(comparator) return comparator(val1,val2);  // 進(jìn)行排序
        if(val1 < val2) return -1;
        else if(val1 > val2) return 1;
        else return 0;
    });
    // rows中已經(jīng)排好序，在tbody中按它們的順序把行添加到最后
    // 這將自動把它們從當(dāng)前位置移走，并不是刪除，而是移動
    for(var i=0; i<rows.length; i++){
        tbody.appendChild(rows[i]);
    }
}
// 查找元素的<th>元素，讓它們可單擊，可以按該列排序
function makeSortable(table){
    var headers = table.getElementsByTagName("th");
    for(var i=0; i<headers.length; i++){
        (function(n){
            headers[i].onclick = function() {
                sortrows(table, n);
            };
        }(i));
    }
}
var mytable = document.getElementById("mytable");
makeSortable(mytable);
</script>

小實例，生成目錄表：

<style>
#TOC{border:solid black 1px; margin:10px; padding: 10px;}
.TOCEntry{}
.TOCEntry a{text-decoration: none;}
.TOCLevel1{font-size: 2em;}
.TOCLevel2{font-size: 1.5em; margin-left: 1em;}
.TOCSectNum::after{content: ": ";}
</style>
<script>
// 當(dāng)執(zhí)行這個函數(shù)時會去文檔中查找id為"TOC"的元素；
// 如果這個元素不存在，就創(chuàng)建一個元素
// 生成的TOC目錄應(yīng)當(dāng)具有自己的CSS樣式，整個目錄區(qū)域的樣式className設(shè)置為"TOCEntry"；
// 為不同層級的目錄標(biāo)題定義不同的樣式，<h1>標(biāo)簽生成的標(biāo)題className為"TOCLevel1"，
// <h2>標(biāo)簽生成的標(biāo)題className為”TOCLevel2“，以此類推；段編號的樣式為"TOCSectNum"
function createToc(){
    // 查找TOC容器元素，如果不存在，則在文檔開頭處創(chuàng)建一個
    var toc = document.getElementById("TOC");
    if(!toc){
        toc = document.createElement("div");
        toc.id = "TOC";
        document.body.insertBefore(toc, document.body.firstChild);
    }
    // 查找所有的標(biāo)題元素
    var headings;
    if(document.querySelectorAll)
        headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
    else
        headings = findHeadings(document.body, []);
    // 遞歸遍歷document的body，查找標(biāo)題元素
    function findHeadings(orrt, sects){
        for(var c = root.firstChild; c!=null; c=c.nextSibling){
            if(c.nodeType !== 1) continue;
            if(c.tagName.length == 2 && c.tagName.charAt(0) == "H")
                sects.push(c);
            else
                findHeadings(c, sects);
        }
        return sects;
    }
    // 初始化一個數(shù)組來保存跟蹤章節(jié)號
    var sectionNumbers = [0,0,0,0,0,0];
    // 循環(huán)找到所有標(biāo)題元素
    for(var h=0; h<headings.length; h++){
        var heading = headings[h];
        // 跳過在TOC容器中的標(biāo)題元素
        if(heading.parentNode == toc) continue;
        // 獲取標(biāo)題的級別
        var level = parseInt(heading.tagName.charAt(1));
        if(isNaN(level) || level < 1 || level > 6) continue;
        // 對于該標(biāo)題級別增加sectionNumbers對應(yīng)的數(shù)字
        // 并重置所有標(biāo)題比它級別低的數(shù)字為零
        sectionNumbers[level-1]++;
        for(var i=level; i<6; i++) sectionNumbers[i] = 0;
        // 將所有標(biāo)題級的章節(jié)號組合產(chǎn)生一個章節(jié)號，如2.3.1
        var sectionNumber = sectionNumbers.slice(0, level).join(".");
        // 為標(biāo)題級別增加章節(jié)號
        // 把數(shù)字放在<span>中，使得其可以秀樣式修飾
        var span = document.createElement("span");
        span.className = "TOCSectNum";
        span.innerHTML = sectionNumber;
        heading.insertBefore(span, heading.firstChild);
        // 用命名的錨點將標(biāo)題包起來，以便為它增加鏈接
        var anchor = document.createElement("a");
        anchor.name = "TOC" + sectionNumber;
        heading.parentNode.insertBefore(anchor, heading);
        anchor.appendChild(heading);
        // 為該節(jié)創(chuàng)建一個鏈接
        var link = document.createElement("a");
        link.href = "#TOC" + sectionNumber; // 鏈接目標(biāo)地址
        link.innerHTML = heading.innerHTML; // 鏈接文本與實際標(biāo)題一致
        // 將鏈接放在一個div中，div用基于級別名字的樣式修飾
        var entry = document.createElement("div");
        entry.className = "TOCEntry TOCLevel" + level;
        entry.appendChild(link);
        // 該div添加到TOC容器中
        toc.appendChild(entry);
    }
};
window.onload = function(){createToc();}
</script>

Web前端開發(fā)之Javascript

在線咨詢

上一篇：圖解瀏覽器的多進(jìn)程渲染機(jī)制
下一篇：多語言網(wǎng)站如何將網(wǎng)頁的本地化版本錄入 Google - html標(biāo)記

您的項目需求

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

整合營銷服務(wù)商

HTML5廢除的元素

您的項目需求