使用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>
使用DOM动态创建标签的更多相关文章
- Dom 获取、Dom动态创建节点
一.Dom获取 1.全称:Document Object Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript dom 动态创建标记
此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttri ...
- js入门之DOM动态创建数据
一. 知识点回顾 1. DOM结构 nodeName: '' 标签名 nodeType: '' 类型 1元素节点 2属性节点 3文本节点 nodeValue: '' 如果是元素节点 nodeValue ...
- 11-15 dom 动态创建节点
1.生成节点的方法 document.createElement(“div”) 2.插入节点的方法 父元素.appendChild(新节点) 在父节点中的子节点后面插入新的节点 3.在指定的位置 ...
- delphi dom动态创建节点方法
在一次测试demo中 需要动态的创建xml节点并添加,实现方法如下: var NewItem:IXMLDOMElement; NewItem:=ConfigDoc.createElement('ite ...
- jquery动态创建标签
$("<div />")[0] 其中 $("<div/>") 相当于 $("<div></div>& ...
- EasyUI中动态生成标签页
这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...
随机推荐
- activiti自定义流程之整合(三):整合自定义表单创建模型
本来在创建了表单之后应该是表单列表和预览功能,但是我看了看整合的代码,和之前没有用angularjs的基本没有什么变化,一些极小的变动也只是基于angularjs的语法,因此完全可以参考之前说些的表单 ...
- Android数据存储(一)----SharedPreferences详解
一.Android数据的存储方式: Android系统一共提供了四种数据存储方式.分别是:SharePreference.SQLite.Content Provider和File:此外还有一种网络存储 ...
- 为Unity项目生成文档(二)
Unity项目生成文档 接着上篇文章:为Unity项目生成文档(一) .Net项目可在VS配置XML 我们可以在VS中通过配置来生成xml文件,但是unity的project,就算同样配置了xml文档 ...
- C++基础笔记(四)C++内存管理
析构函数 * 析构函数在对象所占用内存释放时调用,通常用来释放相关的资源 * 析构函数就是一个特殊的类成员函数,它是构造函数相反 构造函数:对象在分配内存之后,立即调用 析构函数:对象在内存被释放之前 ...
- java 12-5 StringBuffer的几个案例
1. 把数组拼接成一个字符串 public class StringBufferTest2 { public static void main(String[] args) { //定义一个数组 in ...
- awk 和 sed 使用案例
1.模仿wc的行为,统计一个文本文件的文件的字符数.行数.单词数. awk '{numOfChar+=length($0);numOfWord+=NF}END{print numOfChar" ...
- 16Spring_AOP编程(AspectJ)_最终通知
- 【转】MySQL 性能优化的最佳20多条经验分享
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情. 当我们去设计数据库表结构,对操 ...
- Spring Batch实践
Spring Batch在大型企业中的最佳实践 在大型企业中,由于业务复杂.数据量大.数据格式不同.数据交互格式繁杂,并非所有的操作都能通过交互界面进行处理.而有一些操作需要定期读取大批量的数据,然后 ...
- U3D 动态创建Prefab的多个实例
情景:我们有一个mytest脚本,一个my_prefab预置体 想在在这个脚本的start()方法中复制多个my_prefab的实例.有3种方法: 1,将预置体my_prefab放于Resouce文件 ...