首页 > 代码库 > JavaScript DOM 编程艺术(第2版)读书笔记 (7)

JavaScript DOM 编程艺术(第2版)读书笔记 (7)

动态创建标记

一些传统方法

document.write

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

请把以下标记代码保存为一个文件,文件名就用test.html 好了。

<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8" />  <title>Test</title></head><body>  <script>    document.write("<p>This is ainserted.</p>");  </script></body></html>

如果把test.html 文件加载到Web浏览器里,你将看到内容为“This is ainserted.”的文本段落。

document.write的最大缺点是它违背了“行为应该与表现分离”的原则。即使把document.write语句挪到外部函数里,也还是需要在标记的<body>部分使用<script>标签才能调用那个函数。

把JavaScript和HTML代码混杂在一起是一种很不好的做法。这样的标记既不容易阅读和编辑,也无法享受到把行为和结构分离开来的好处。

MINE类型application/xhtml+xml与document.write不兼容,浏览器在呈现这种XHTML文档时根本不会执行document.write方法。

从某种意义上讲,使用document.write方法有点像使用<font>标签去设定字体和颜色。虽然这两种技术在HTML文档里都工作得不错,但它们都不够优雅。

把结构、行为和样式分开永远都是一个好主意。只要有可能,就应该用外部CSS文件代替<font>标签去设定和管理网页的样式信息,用外部JavaScript文件去控制网页的行为。应该避免在<body>部分乱用<script>标签,避免使用document.write方法。

innerHTML属性

现如今的浏览器都支持innerHTML属性,这个属性并不是W3C DOM标准的组成部分,但现在已经包含到HTML5规范中。它始见于微软公司的IE 4浏览器,并从那时起逐渐被其他的浏览器接受。

innerHTML属性可以用来读、写某给定元素里的HTML内容。你不仅可以用它来读出元素的HTML内容,还可以用它把HTML内容写入元素。

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

在需要把一大段HTML内容插入一份文档时,innerHTML属性可以让你又快又简单地完成这一任务。不过,innerHTML属性不会返回任何对刚插入的内容的引用。如果想对刚插入的内容进行处理,则需要使用DOM提供的那些精确的方法和属性。

类似于document.write方法,innerHTML属性也是HTML专有属性,不能用于任何其他标记语言文档。浏览器在呈现正宗的XHTML文档(即MINE类型使application/xhtml+xml得XHTML文档)时会直接忽略掉innerHTML属性。

在任何时候,标准的DOM都可以用来替代innerHTML。虽说这往往需要多编写一些代码才能获得同样的效果,但DOM同时也提供了更高的精确性和更强大的功能。

DOM方法

createElement方法

编辑test.html文件:

<div id="testdiv">

</div>

我想把一段文本插入testdiv元素。用DOM的语言来说,就是想添加一个p元素节点,并把这个节点作为div元素节点的一个子节点。(div元素已经有了一个子节点,那是一个id属性节点,值是teatdiv)。

这项任务需要分两个步骤完成:

(1)创建一个新的元素;

(2)把这个新元素插入节点树。

第一个步骤要用DOM方法createElement来完成:

document.createElement("p");

这个方法本身并不能影响页面表现,还需要把这个新创建出来的元素插入到文档中去。为此你需要有个东西来引用这个新创建出来的节点。虽然这个新创建出来的p已经存在了,但它还不是任何一棵DOM节点树的组成部分,它只是游荡在JavaScript世界里的一个孤儿。不过,它已经像任何其他的节点那样有了自己的DOM属性。

这个无家可归的p元素现在已经有一个取值为1的nodeType和一个取值为P的nodeName属性。

appendChild方法

把新创建的节点插入某个文档的节点树。

createTextNode方法

你现在已经创建出了一个元素节点并把它插入了文档的节点树,这个节点是一个空白的p元素。你想把一些文本放入这个p元素,但createElement方法帮不上忙,它只能创建元素节点。你需要创建一个文本节点,你可以用createTextNode方法来实现它。createTextNode的语法和createElement很相似,请看例程:

window.onload = function(){  var para = document.createElement("p");  var testdiv = document.getElementById("testdiv");  testdiv.appendChild(para);  var txt = document.createElement("Hello World");  para.appendChild(txt);}

 在已有元素前插入一个新元素

DOM提供了名为insertBefore()方法,这个方法把一个新元素插入到一个现有元素前面。下面是这个方法的调用语法:

parentElement.insertBefore(newElement,targetElement)

我们不必搞清楚父元素到底是哪个,因为targetElement的parentNode属性值就是它。在DOM里,元素节点的父元素必须是另一个元素节点(属性节点和文本节点的子元素不允许是元素节点)。

在现有元素后插入一个新元素

DOM并没有提供insertAfter()方法。

编写insertAfter函数

function insertAfter(newElement, targetElement){  var parent = targetElement.parentNode;  if(parent.lastChild == targetElement){    parent.appendChild(newElement);  }else{    parent.insertBefore(newElement, targetElement.nextSibling);  }}

这个函数的步骤解析:

首先,这个函数有两个参数:一个是即将被插入的新元素newElement,一个是目标元素targetElement;

然后,把目标元素的parentNode属性值保存到变量parent里;

接下来,检查目标元素是不是parent的最后一个子元素,即比较parent元素的lastChild属性值与目标元素之间是否存在“==”关系;

如果是,就用appendChild方法把新元素追加到parent元素上,这样新元素就恰好被插入目标元素之后;

如果不是,就用insertBefore方法把新元素插入到目标元素的下一个兄弟元素之前。

类似于第6章出现的addLoadEvent函数,insertAfter函数也非常实用,应该把它们都收录到你的脚本里。

Ajax

 2005年,Adaptive Path公司的Jesse James Garrett发明了Ajax这个词,用于概括异步加载页面内容的技术。

 使用Ajax可以做到只更新页面中的一小部分。其他内容——标志、导航、头部、脚部,都不用重新加载。

Ajax的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求,它会在后台处理请求,与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容,而不会打断用户的浏览体验。

和任何新技术一样,Ajax有它自己的适用范围。它依赖JavaScript,所以可能会有浏览器不支持它,而搜索引擎的蜘蛛程序也不会抓取到有关内容。

XMLHttpRequest对象

Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。以往的请求都由浏览器发出,而JavaScript通过这个对象可以自己发送请求,同时也自己处理响应。【不具体介绍了,因为还没有具体接触过Ajax,等学到Ajax的时候再写读书笔记吧。。。】

 

<!--

作者:纤锐
出处:http://www.cnblogs.com/beginner2014/p/4175489.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

-->

JavaScript DOM 编程艺术(第2版)读书笔记 (7)