DOM动态创建标记实例

野性酷女 2022-06-07 02:16 210阅读 0赞

本文实例来源于《JavaScript DOM编程艺术（第二版）》第8章  
知识点可参考上一篇博客《DOM动态创建标记》，地址：[http://blog.csdn.net/ruirui\_1996/article/details/78158925][http_blog.csdn.net_ruirui_1996_article_details_78158925]

--------------------

1.实例描述  
2.创建“缩略语列表”函数  
3.创建“文献来源链接”函数  
4.创建“快捷键清单”函数

![这里写图片描述][SouthEast]  
有这样一个网页，HTML代码如下：

<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 plantform- 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 navigate <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr> documents.
    </p>

我们可以看到这段文本包含大量的缩略语，用`<abbr>`标签把他们识别出来了

<table> 
 <tbody> 
  <tr> 
   <td><b>2.创建“缩略语列表”函数</b></td> 
  </tr> 
 </tbody> 
</table>

在页面中，如果能把`<abbr>`标签和其中的title属性值单独提取出来，并放到一个列表里显示在页面上可能会更好，就比如下面这个效果：  
![这里写图片描述][SouthEast 1]  
那么如果要运用dom来实现上面的效果，首先可以先把预想效果的代码“准备”出来：  
![这里写图片描述][SouthEast 2]  
最上面还有一个h1标签。  
接下来分析一下实现的步骤：  
上一篇文章说过，用DOM来插入一个元素分为两个步骤，一是创建一个新的元素，如使用createElement，二是把这个新元素插入节点树，如使用appendChild。那么在这个实例中，情况可能稍微会复杂一点。  
首先我们可以先创建一个h1标签，再用createTextNode方法为其添加文字，接着传入到页面（也可以和后面的dl标签一起传入）。  
接下来创建dl标签，用getElementsByTagName方法找到代码中所有的abbr标签并用for循环来遍历，在循环中，获取abbr标签的title值（用getAttribute方法），获取到中间的文字（节点的方法），可以将这两个值保存在一个数组中，数组的下标是中间的文字，对应的值是title值。  
遍历数组，每循环一个创建一个dt标签，并传入数组的下标；创建一个dd标签，传入下标对应的值，在将这些加到dl标签中。  
此时整体dl标签虽然内容已经全部导入完成，但仍处于游离状态，最后将dl传入到body末尾即可（document.body表示整个body部分）。  
所以综上，还是那两个步骤：创建新元素、插入到节点树。只不过在反复的运用。  
创建一个函数displayAbbreviations，将上述过程实现，代码如下：

在书中，对这个函数进行了一些兼容性的改进：

1.  首先检查函数中运用的DOM方法浏览器是否支持
2.  创建一个window.onoad事件来执行函数
3.  由于低版本的IE不能识别abbr标签，所以需保证displayAbbreviations函数能够平稳退化

实现第一点：在函数中加：

if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;

window.onoad事件：

实现第三点：

*  在获取title和文本值前面加：`if(oAbbr[i].Childnode<1) continue;`
 *  此时将不会生成任何一个dt和dl标签，所以在函数最后加：`if (oDl.childNodes.length < 1) return false;`

<table> 
 <tbody> 
  <tr> 
   <td><b>3.创建“文献来源链接”函数</b></td> 
  </tr> 
 </tbody> 
</table>

在HTML代码中，我们可以看到这样几句：

<blockquote cite="http://www.w3.org/DOM/">
        <p>
            A plantf......ents.
        </p>
    </blockquote>

blockquote标签中的cite属性后面的网址告诉了我们该段文字的出处，但是在页面中浏览器无法显示出来，所以我们可以运用DOM来将其显示在页面上。  
最终效果如图：  
![这里写图片描述][SouthEast 3]  
代码如下：

function displayCitations() {
        var oBlock = document.getElementsByTagName("blockquote");
        for (var i = 0; i < oBlock.length; i++) {
            var newBlock = oBlock[i];
            var url = newBlock.getAttribute("cite");
            var oP = newBlock.getElementsByTagName("*");
            var _oP = oP[oP.length - 1];
        }
        var oA = document.createElement("a");
        var a_text = document.createTextNode("sourse");
        oA.appendChild(a_text);
        oA.setAttribute("href", url);
        _oP.appendChild(oA);
    }

改进同上

<table> 
 <tbody> 
  <tr> 
   <td><b>4.创建“快捷键清单”函数</b></td> 
  </tr> 
 </tbody> 
</table>

accesskey属性可以把一个元素（如链接）与键盘上的某个特定按键关联在一起，一些基本的快捷键都有约定俗成的设置办法，如：

> accesskey=”1”对应着一个“返回到本网站主页”的链接  
> accesskey=”2”对应着一个“后退到前一页面”的链接  
> accesskey=”4”对应着一个“打开本网站的搜索表单/页面”的链接  
> accesskey=”9”对应着一个“本网站联系办法”的链接  
> accesskey=”0”对应着一个“查看本网站的快捷清单”的链接

如把网站导航加入到页面，可在HTML中加入以下代码：

<ul>
        <li><a href="index.html" accesskey="1">Home</a></li>
        <li><a href="search.html" accesskey="4">Search</a></li>
        <li><a href="contact.html" accesskey="9">Content</a></li>
    </ul>

[http_blog.csdn.net_ruirui_1996_article_details_78158925]: http://blog.csdn.net/ruirui_1996/article/details/78158925
[SouthEast]: /images/20220607/72d6c12b638f416ca6a30f2296145b22.png
[SouthEast 1]: /images/20220607/a9524d9d91aa4ad3b570c6ce35606298.png
[SouthEast 2]: /images/20220607/35dd03be02614e54ba7368a12d16e1f2.png
[SouthEast 3]: /images/20220607/5a03993baf3a41f5a9832c1ef835be24.png