使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getElementById()   getElementsByTagName()   getAttribute() setAttribute()   createElement()   createTextNode()   appendChild()

  首先网页只是一段简单的html,含有部分复杂的标签。

  <abbr>用于缩写,<blockquote>引用。

  代码如下:

        <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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Kibana源码剖析 —— savedSearch从读取到跳转

    持久化对象 Kibana中可以查询到很多保存的对象,他们都存储在es中一个叫做.kibana的索引中。 搜索 存储在type为search中; 图表 存储在ty...

    用户1154259
  • Grunt-cli的执行过程以及Grunt加载原理

    通过本篇你可以了解到: 1 grunt-cli的执行原理 2 nodeJS中模块的加载过程 Grunt-cli原理 grunt-cli其实也是Node模块,它可...

    用户1154259
  • 一分钟教你在博客园中制作自己的动态云球形标签页

    经常看到别人的博客里面有动态的云标签页,感觉很是高大上,自己也很像弄一个。于是去找寻源码,在阿里西西页面特效中找到了云标签的源码,经过分析和解剖,弄成了符合博...

    用户1154259
  • 10个短小却超实用的JavaScript代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我...

    企鹅号小编
  • javascript:算法笔记

    入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld //线性搜索(入门HelloWorld) //A为数组,x为要...

    菩提树下的杨过
  • 使用Java 10的var类型推断的几个注意点!

    不加选择地应用var可能会让代码不容易理解,因为模糊了类型这个概念,而人类是依据类型分类进行逻辑思考的,这样就使事情变得更糟,如果使用得当,var可以帮助改进良...

    本人秃顶程序员
  • 【干货】2020史上最全自动驾驶资源大合集!

    【导读】本文为大家整理了自动驾驶方面的一些资源,主要包括视频课程学习、书籍资料、顶会论文、开源项目、常用数据集等等!下图是自动驾驶的技术栈展示:

    深度学习技术前沿公众号博主
  • 在vue中的html标签{{}}内可以调用函数方法

    今天领导提个需求,要求在金额上强制保留两位小数,本想着后台直接返回数据时,带着两位的小数,前端只是做个显示作用,后台说保留了小数但在传输过程中去掉了,可能他们做...

    honey缘木鱼
  • Nodejs基础:stream模块入门介绍与使用

    nodejs的核心模块,基本上都是stream的的实例,比如process.stdout、http.clientRequest。

    IMWeb前端团队
  • C++编码格式建议

    每个人都可能有自己的代码风格和格式,但如果一个项目中的所有人都遵循同一风格的话,这个项目就能更顺利地进行。每个人未必能同意下述的每一处格式规则,而且其中的不少规...

    Dabelv

扫码关注云+社区

领取腾讯云代金券