首页/變量

使用DOM动态创建标签

 2023-09-16 阅读 18 评论 0

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

本文是参考《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;}
复制代码

word自定义标签怎么设置？　　书中给出了三个例子，一个是缩写动态创建列表；一个是引用；还有一个是快捷键，快捷键就暂时没有练习，感觉不太常用。

　　动态创建列表的代码如下，答题思想就是通过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("*")的方式，获取所有的元素节点，然后指定最后一个节点肯定是我们需要的元素节点。

html多行文本框标签。　　代码参考如下：

复制代码
            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>
复制代码

　　

本文转自博客园xingoo的博客，原文链接：使用DOM动态创建标签，如需转载请自行联系原博主。

版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://hbdhgg.com/2/68969.html

上一篇：html5--5-4 绘制矩形
下一篇：数据库的四大特性以及事务的隔离级别
标签：word自定义标签怎么设置html多行文本框标签js定义数组并添加数据js创建标签jquery对象转换为dom对象方法如何设置标签定义表单所用的标签是什么标签用于创建表单
word自定义标签怎么设置

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息