《JavaScriptDOM编程艺术》读后感3:3个方法来改变DOM结构树

 2016-05-27 22:17

《JavaScriptDOM编程艺术》第七章开始教导我们如何“动态创建标记”。这里指的动态,是运用JavaScriptDOM技术来直接写web节点和属性并把它放置到树中。


传统的方法

传统的方法有2种:document.write和innerHTML属性。

直接write写有点不伦不类的,它不会把元素节点和文字内容区分开来,有点违背了“行为应该和表现分离”的原则。不过我在很多JavaScript里面还是看到有很多人用的;innerHTML命令有点像大锤,它可以把要输出的东西写在一起,也有它的一定作用。由于今天的重点不是这两个方法,所以简单带过。有兴奋的朋友看书吧。


DOM方法

先说说DOM改变结构树的思维逻辑:我们在改变web的时候需要先增加一些节点(<p>),并且会把一些文本放在里面(<p>hello word</p>),然后,我们再将这个节点挂在树上。当然,反过来也是可以实现的:先获取树,挂上节点,增加节点里面的文本。那么,我们就会用带这三个方法:

document.createElement(elem);//创建节点的方法
parent.appendChild(elem);//挂节点的方法
document.createTextNode('text');//增加文本的方法

用文章中的例子来说吧:

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
     <div id="box"></div>
     <script type="text/javascript">
     window.onload = function () {
         var createP = document.createElement('p');
         var box =document.getElementById('box');
         box.appendChild(createP);
         var Ptext = document.createTextNode("hello word!");
         createP.appendChild(Ptext);
     }
     </script>
 </body>
 </html>
  • 我先创建了一个<P>节点,这个节点在没有“上树”之前是游离的文章碎片(document fragment);

  • 用getID获得的我们要挂在那个树上的位置,这里我要将它放在ID为box的那个div里面;

  • 然后我做了一个挂上去的动作,将P挂在了box这个树上;

  • 挂好后,我发现P里面没内容啊,于是我写了“hello word!”这段文字;

  • 然后将文章放在了P里面;

整个JavaScript程序思维逻辑上很简单,只要明白了这三个方法应该很容易贯通。当然,先做节点还是先写text这完全是个人习惯,只要不漏项就好。后面的比较复杂的方法也是这3个方法不同重复的延伸使用。


《JavaScriptDOM编程艺术》读后感:

  1. 初次接触JavaScriptDOM的感觉
  2. 第六章,一个常规事件的逻辑
  3. 3个方法来改变DOM结构树
  4. 在元素前后插入元素
  5. 培养function的逻辑思维
  6. 细说下getNextElement函数
  7. 动画方法moveElement()
  8. 实战中的global.js
  9. 整站练习(附源文件)
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: