javascriptDOM编程艺术_学习笔记_知识点动态创建标记

传统技术：document.write 和 innerHTML

深入剖析DOM方法：createElement、createTextNode、appendChild 和 insertBefore

7.1.1 document.write

document对象的write()方法可以方便快捷地把字符串插入到文档里。

document.write的最大缺点是它违背了“行为应该与表现分离”的原则。

 document.write("<p>This is inserted.</p>");

7.1.2 innerHTML属性

innerHTML 属性可以用来读、写某给定元素里的HTML内容。

 window.onload = function(){

  var testdiv = document.getElementById("testdiv");

  alert(testdiv.innerHTML);

 }

利用这个技术无法区分“插入一段HTML内容”和“替换一段HTML内容”。testdiv元素里有没有HTML内容无关紧要：一旦你使用了innerHTML属性，它的全部内容都将被替换。

 window.onload = function(){

  var testdiv = document.getElementById("testdiv");

  testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";

 }

innerHTML属性要比document.writer()方法更值得推荐。使用innerHTML属性，你就可以把JavaScript代码从标记中分离出来。用不着再在标记的<body>部分插入<script>标签。

7.2 DOM方法

DOM是文档的表示。DOM所包含的信息与文档里的信息一一对应。你只要学会问正确的问题（使用正确的方法），就可以获取DOM节点树上任何一个节点的细节。

DOM是一条双车道。不仅可以获取文档的内容。还可以更新文档的内容。如果你改编了DOM节点树，文档在浏览器里呈现效果就会发生变化。你已经见识过setAttribute方法的神奇之处了。用这个方法可以改变DOM节点树上的某个属性节点，相关文档在浏览器里的呈现就会发生相应的变化。不过，setAttribute方法并未改变文档的物理内容，如果用文本编辑器而不是浏览器去打开这个文档，我们将看不到任何变化。只有在用浏览器打开那份文档时才能看到文档呈现效果的变化。这是因为浏览器实际显示的是那颗DOM节点树。在浏览器看来，DOM节点树才是文档。

一旦明白了这个道理，以动态方式实现创建标记就不那么难以理解了。你并不是在创建标记，而是在改变DOM节点树。做到这一点的关键是一定要从DOM的角度思考问题。

在DOM看来，一个文档就是一颗节点树。如果你想在节点树上添加内容，就必须插入新的节点。如果你想添加一些标记到文档，就必须插入元素节点。

7.2.1 createElement 方法

创建一个新的元素，要用DOM方法createElement来完成。

 document.createElement(nodename);

下面这条语句将创建一个p元素：

 document.createElement("p");

这个方法本身并不能影响页面表现，还需要把这个新创建出来的元素插入到文档中去。为此，你需要有个东西来引用这个新创建出来的节点。

 var para = document.creatElement("p");

变量para现在包含了一个指向刚创建的那个p元素的引用。现在，虽然这个新创建出来的p元素已经存在了，但它还不是任何一颗DOM节点树的组成部分，它只是游荡在JavaScript世界里的一个孤儿。它这种情况称为文档碎片(document fragment)，还无法显示在浏览器的窗口画面里。不过，它已经像任何其他的节点那样有了自己的DOM属性。

7.2.2 appendChild 方法

把新创建的节点插入某个文档的节点树的最简单的方法是，让它称为这个文档某个现有节点的子节点。

 parent.appendChild(child)

 var para = document.createElement("p");

 var testdiv = document.getElementById("testdiv");

 testdiv.appendChild(para);

7.2.3 createTextNode 方法

创建文本节点，可以使用createTextNode方法来实现它，createElement方法创建元素节点。

 document.createTextNode(text)

 document.createTextNode("Hello world");

 var txt = document.createTextNode("Hello world");

变量txt现在包含指向新创建的那些文本节点的引用。可以用appendChild方法把这个文本节点插入为某个现有元素的子节点。我将把这个文本节点插入到我在上一小节创建的p元素。

 window.onload = function(){

     var para = document.createElement("p");

     var testdiv = document.getElementById("testdiv");

     testdiv.appendChild(para);

     var txt = document.createTextNode("Hello world");

     para.appendChild(txt);

 }

这个例子是按照以下顺序来创建和插入节点的：

(1)创建一个p元素节点。

(2)把这个p元素节点追加到test.html文档中的一个元素节点上。

(3)创建一个文本节点。

(4)把这个文本节点追加到刚才创建的那个p元素节点上。

appendChild方法还可以用来连接那些尚未成为文档树一部分的节点。也就是说，以下步骤顺序同样可以达到目的。

(1)创建一个p元素节点。

(2)创建一个文本节点。

(3)把这个文本节点追加到第1步创建的p元素节点上。

(4)把这个p元素节点追加到test.html文档中的一个元素节点上。

下面是按照新步骤编写出来的函数：

 window.onload = function(){

     var para = document.createElement("p");

     var txt = document.createTextNode("Hello world");

     para.appendChild(txt);

     var testdiv = document.getElementById("testdiv");

     testdiv.appendChild(para);

 }

7.2.4一个更复杂的组合

<p>This is <em>my</em> content.</p>

这些HTML内容对应着一个p元素节点，它本身又包含着以下子节点。

一个文本节点，其内容是“This is”

一个元素节点“em”，这个元素节点本身还包含着一个文本节点，其内容是“my”

一个文本节点，其内容是“content.”

把需要创建哪些节点的问题弄清楚后，需要做的步骤。

创建一个p元素节点并把它赋给变量para。
创建一个文本节点并把它赋给变量txt1。
把txt1追加到para上。
创建一个em元素节点并把它赋给变量emphasis。
创建一个文本节点并把它赋值给变量txt2。
把txt2追加到emphasis上。
把emphasis追加到para上。
创建一个文本节点并把它赋值给变量txt3。
把txt3追加到para上。
把para追加到test.html文档中的testdiv元素上。

 window.onload = function(){

     var para = document.createElement("p");

     var txt1 = document.createTextNode("This is ");

     para.appendChild(txt1);

     var emphasis = document.createElement("em");

     var txt2 = document.createTextNode("my");

     emphasis.appendChild(txt2);

     para.appendChild(emphasis);

     var txt3 = document.createTextNode(" content.");

     para.appendChild(txt3);

     var testdiv = document.getElementById("testdiv");

     testdiv.appendChild(para);

 }

另一种思路：可以先把所有节点都创建出来，然后再把它们连接在一起。

创建一个p元素节点并把它赋值给变量para。
创建一个文本节点并把它赋值给变量txt1。
创建一个em元素节点并把它赋值给变量emphasis。
创建一个文本节点并把它赋值给变量txt2。
创建一个文本节点并把它赋值给变量txt3。
把txt1追加到para上。
把txt2追加到emphasis上。
把emphasis追加到para上。
把txt3追加到para上。
把para追加到test.html文档中的testdiv元素上。

 window.onload = function (){

     var para = document.createElement("p");

     var txt1 = document.createTextNode("This is ");

     var emphasis = document.createElement("em");

     var txt2 = document.createTextNode("my");

     var txt3 = document.createTextNode(" content. ");

     para.appendChild(txt1);

     emphasis.appendChild(txt2);

     para.appendChild(emphasis);

     para.appendChild(txt3);

     var testdiv = document.getElementById("testdiv");

     testdiv.appendChild(para);

 }

javascriptDOM编程艺术_学习笔记_知识点动态创建标记的更多相关文章

《JavaScript DOM 编程艺术》学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记第一章 js简史第二章 js语法准备工作语法第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
javascriptDOM编程艺术_学习笔记_知识点 DOM
第三章 getElementById 返回一个与那个有着给定id属性值的元素节点对应的对象. document.getElementById(id) 下面一个例子: document.get ...
《Java编程思想》学习笔记_多态
多态多态指一个行为产生多种状态,针对父类类型可接收其子类类型,最终执行的状态由具体子类确定,其不同子类可呈现出不同状态.例如人[父类]都会跑步[行为],但小孩[子类]跑步.成年人[子类]跑步.运动员 ...
python编程：从入门到实践--项目1-外星人入侵_学习笔记_源码
这里有九个.py文件,在工作的间隙,和老板斗智斗勇,终于完成了,实现了游戏的功能,恰逢博客园开通,虽然是对着书上的代码敲了一遍,但是对pygam这个库的了解增加了一些,作为一个python初学者,也作 ...
《JavaScript DOM编程艺术》学习笔记（一）
这本书是我听说学习前端基础入门书籍,于是就开始看了,大概是从5月10号开始看的吧,一直看到现在,差不多要看完了,书是挺厚的...286页,不过比起JAVASCRIPT权威指南来说还是差多了,权威指南才 ...
Net基础篇_学习笔记_第十天_方法（函数）
方法(函数): 函数就是将一堆代码进行重用的一种机制.//解决冗余代码问题------方法出现了. 面向对象的三大特征:封装.继承.多态函数的语法:[public] stati ...
Net基础篇_学习笔记_第九天_数组_冒泡排序（面试常见题目）
冒泡排序: 将一个数组中的元素按照从大到小或从小到大的顺序进行排列. for循环的嵌套---专项课题 int[] nums={9,8,7,6,5,4,3,2,1,0}; 0 1 2 3 4 5 6 7 ...
Net基础篇_学习笔记_第九天_数组_三个练习
练习一: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...
Net基础篇_学习笔记_第九天_数组
结构:一次性存储不同类型的变量: 数组:一次性存储相同类型的变量: 数组的语法: 数组类型[ ] 数组名=new 数组类型[数组长度]: int[ ] nums=new int[10]; 数组初值都是 ...

随机推荐

umount.nfs device busy day virsh extend diskSpace, attachDisk
KVM中linux虚拟机的硬盘添加方法最近虚拟机中运行的东西比较多,很多.而刚启动的时候虚拟机分配的磁盘比较少,随着日志还有平时的上传文件的积累,磁盘空间报警了.网上查了下资料,自己也做了下实验.总 ...
JEECMS用法总结
1.循环打印栏目: [@cms_channel_list] [#list tag_list as c] <li id="${c.path}"><a href=&q ...
find the mincost route（最小环，最短路，floyd）
find the mincost route Time Limit: 1000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...
New Relic——手机应用app开发达人的福利立即就到啦！
HiWork集成的第三方服务(机器人)将有新的添加啦,添加了BitBucket和New Relic.分别做下介绍啦! 1.BitBucket BitBucket 是一家源码托管站点.採用Mercuri ...
Unity3d 游戏汉化之IL注入文本替换--木石世纪
近期下了个游戏叫木石世纪(Timber and Stone),沙盒游戏类,看着还不错. 搜了下游戏资料,有人求汉化可是因为是小众游戏,没人出汉化.看了眼是Unity3d的,既然是.Net的,仅仅要资源 ...
【每日一摩斯】-Troubleshooting: High CPU Utilization (164768.1) - 系列6
如果问题是一个正运行的缓慢的查询SQL,那么就应该对该查询进行调优,避免它耗费过高的CPU资源.如果它做了许多的hash连接和全表扫描,那么就应该添加索引以提高效率. 下面的文章可以帮助判断查询的问题 ...
Bower前端包管理器
bower 前端包管理器为什么要用它一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery.随着项目的进展,我们可能又需要Bootstrap3,其中每个框架之间的依 ...
红豆带你从零学C#系列之：使用集合组织相关数据
ArrayList(数组列表) Why:如果一个公司有5名员工,一般我们会用长度为5的对象数组来存储信息,但要是有新员工来了,5个长度的数组就不够用了,因此我们需要一种能够根据需要自动分配容量的动态数 ...
表单元素的submit()方法和onsubmit事件(转)
1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题表单元素拥有subm ...
POSIX扩展正则表达式函数
1.ereg()函数和eregi()函数函数语法: bool ereg/eregi ( string pattern, string string [, array regs] ) 函数功能: 在字 ...

javascriptDOM编程艺术_学习笔记_知识点 动态创建标记

javascriptDOM编程艺术_学习笔记_知识点 动态创建标记的更多相关文章

随机推荐

热门专题

javascriptDOM编程艺术_学习笔记_知识点动态创建标记

javascriptDOM编程艺术_学习笔记_知识点动态创建标记的更多相关文章