使用DOM動態建立標籤

時間 2019-11-19

標籤使用 dom 動態建立標籤欄目 HTML 简体版

原文原文鏈接

本文是參考《javascript Dom 編程藝術》第八章的內容所寫，用到的知識點，就是關於建立平穩的web頁面。javascript

使用DOM方法：css

　　getElementById()html

　　getElementsByTagName()java

　　getAttribute() setAttribute()node

　　createElement()web

　　createTextNode()編程

　　appendChild()瀏覽器

　　首先網頁只是一段簡單的html,含有部分複雜的標籤。安全

　　<abbr>用於縮寫，<blockquote>引用。app

　　代碼以下：

<h1>What is the Document Object Model?</h1>
        <p> The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr> as: </p>
        <blockquote cite="http://www.w3.org/DOM/">
            <p> A platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. </p>    
        </blockquote>
        <p> It is an <abbr title="Application Programming Interface">API</abbr> that can be used to navigator <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Extensible Markup Language">XML</abbr> documents. </p>

　　使用的css以下：

 body { font-family: "Helvtica","Arial",sans-serif; font-size: 10pt; } abbr { text-decoration: none; border: 0; font-style: normal; color: blue; }

　　書中給出了三個例子，一個是縮寫動態建立列表；一個是引用；還有一個是快捷鍵，快捷鍵就暫時沒有練習，感受不太經常使用。

　　動態建立列表的代碼以下，答題思想就是經過getElementsByTagName掃描DOM樹，查找對應的節點，而後根據節點的內容動態的建立列表。其中包括變量的命名，安全檢查，平穩退化都是值得學習的。

function displayAbbreviations(){ if(!document.getElementsByTagName) return false; if(!document.createElement) return false; if(!document.createTextNode) return false; //提取信息
                var abbreviations = document.getElementsByTagName("abbr"); if(abbreviations.length < 1) return false; var defs = new Array(); for(var i=0; i<abbreviations.length; i++){ var current_abbr = abbreviations[i]; var definition = current_abbr.getAttribute("title"); var key = current_abbr.lastChild.nodeValue; defs[key] = definition; } //建立節點
                var dlist = document.createElement("dl"); for(key in defs){ var definition = defs[key]; var dtitle = document.createElement("dt"); var dtitile_text = document.createTextNode(key); dtitle.appendChild(dtitile_text); var ddesc = document.createElement("dd"); var ddesc_text = document.createTextNode(definition); ddesc.appendChild(ddesc_text); dlist.appendChild(dtitle); dlist.appendChild(ddesc); } //防止瀏覽器不認識abbr標籤
                if(dlist.childNodes.length < 1) return false; //建立標題
                var header = document.createElement("h2"); var header_text = document.createTextNode("Abbreviations"); header.appendChild(header_text); document.body.appendChild(header); document.body.appendChild(dlist); }

　　下面是引用的代碼，思路跟上面差很少。只是添加動態節點的時候，要插入到元素標籤的最後一個元素節點，可是有時候代碼是這個樣子的：

<div id="test">
<p>
</p>
</div>

　　這樣經過調用getElementById("test").lastChild有可能拿不到p標籤節點，由於</p>與</div>之間有一個回車，有的瀏覽器可能認爲這是一個文本節點。

　　所以能夠經過getElementById("test").getElementsByTagName("*")的方式，獲取全部的元素節點，而後指定最後一個節點確定是咱們須要的元素節點。

　　代碼參考以下：

function displayCitations(){ if(!document.getElementsByTagName) return false; if(!document.createElement) return false; if(!document.createTextNode) return false; var quotes = document.getElementsByTagName("blockquote"); //遍歷節點建立元素標籤
                for(var i=0; i<quotes.length; i++){ if(!quotes[i].getAttribute("cite")) continue; var url = quotes[i].getAttribute("cite"); var quoteChildren = quotes[i].getElementsByTagName('*'); //引用最後一個元素節點
                    if(quoteChildren.length < 1) continue; var elem = quoteChildren[quoteChildren.length - 1]; var link = document.createElement("a"); var link_text = document.createTextNode("source"); link.appendChild(link_text); link.setAttribute("href",url); var superscript = document.createElement("sup"); superscript.appendChild(link); //把標記添加到最後一個元素節點
 elem.appendChild(superscript); } }

　　固然這兩個方法都須要在onload的時候執行，所以不可缺乏的一個方法addLoadEvent：

function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } addLoadEvent(displayAbbreviations); addLoadEvent(displayCitations);

　　代碼示例：

　　所有代碼：

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>Explaining the Document Object Model</title>
         <style type="text/css"> body { font-family: "Helvtica","Arial",sans-serif; font-size: 10pt; } abbr { text-decoration: none; border: 0; font-style: normal; color: blue; } </style>
    </head>
    <body>
        <h1>What is the Document Object Model?</h1>
        <p> The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr> as: </p>
        <blockquote cite="http://www.w3.org/DOM/">
            <p> A platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. </p>    
        </blockquote>
        <p> It is an <abbr title="Application Programming Interface">API</abbr> that can be used to navigator <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Extensible Markup Language">XML</abbr> documents.
        </p>


        <script type="text/javascript">
            function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } function displayAbbreviations(){ if(!document.getElementsByTagName) return false; if(!document.createElement) return false; if(!document.createTextNode) return false; //提取信息
                var abbreviations = document.getElementsByTagName("abbr"); if(abbreviations.length < 1) return false; var defs = new Array(); for(var i=0; i<abbreviations.length; i++){ var current_abbr = abbreviations[i]; var definition = current_abbr.getAttribute("title"); var key = current_abbr.lastChild.nodeValue; defs[key] = definition; } //建立節點
                var dlist = document.createElement("dl"); for(key in defs){ var definition = defs[key]; var dtitle = document.createElement("dt"); var dtitile_text = document.createTextNode(key); dtitle.appendChild(dtitile_text); var ddesc = document.createElement("dd"); var ddesc_text = document.createTextNode(definition); ddesc.appendChild(ddesc_text); dlist.appendChild(dtitle); dlist.appendChild(ddesc); } //防止瀏覽器不認識abbr標籤
                if(dlist.childNodes.length < 1) return false; //建立標題
                var header = document.createElement("h2"); var header_text = document.createTextNode("Abbreviations"); header.appendChild(header_text); document.body.appendChild(header); document.body.appendChild(dlist); } function displayCitations(){ if(!document.getElementsByTagName) return false; if(!document.createElement) return false; if(!document.createTextNode) return false; var quotes = document.getElementsByTagName("blockquote"); //遍歷節點建立元素標籤
                for(var i=0; i<quotes.length; i++){ if(!quotes[i].getAttribute("cite")) continue; var url = quotes[i].getAttribute("cite"); var quoteChildren = quotes[i].getElementsByTagName('*'); //引用最後一個元素節點
                    if(quoteChildren.length < 1) continue; var elem = quoteChildren[quoteChildren.length - 1]; var link = document.createElement("a"); var link_text = document.createTextNode("source"); link.appendChild(link_text); link.setAttribute("href",url); var superscript = document.createElement("sup"); superscript.appendChild(link); //把標記添加到最後一個元素節點
 elem.appendChild(superscript); } } addLoadEvent(displayAbbreviations); addLoadEvent(displayCitations); </script>
    </body>
</html>