动态创建标记

一些传统方法

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代码混杂在一起是一种很不好的做法。这样的标记既不容易阅读和编辑，也无法享受到把行为和结构分离开来的好处。

MIME类型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文档（即MIME类型使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)的更多相关文章

  1. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 《JavaScript DOM编程艺术（第二版）》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  4. 【读书笔记】读《JavaScript DOM 编程艺术-第2版》

    1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“D ...

  5. Javascript DOM 编程艺术（第二版）读书笔记——DOM基础

    1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   ...

  6. JavaScript -- JavaScript DOM 编程艺术(第2版)

    /* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="styleshe ...

  7. 《JavaScript DOM 编程艺术 第 2 版》

    第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...

  8. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  9. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  10. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

随机推荐

  1. cocos2dx 3.x(点击屏幕移动精灵，拖动精灵)不需要写回调函数Lua表达式

    // // MainScene.cpp // helloworld // // Created by apple on 16/9/19. // // #include "MainScene. ...

  2. tooltip

    /* 背景色 ; 字体颜色 ; 云,显示在上面 */ .tooltip-inner{ background-color: #FF0000; ForeColor:#0f0; IsBalloon:true ...

  3. Java基础之一组有用的类——使用比较器对数组排序（TrySortingWithComparator）

    控制台程序. Arrays类中的sort()静态方法把传送为参数的数组元素按升序方式排序. 对于第一个参数类型是Object[]的sort()方法来说,可以传送任意类型的数组.如果使用sort()方法 ...

  4. SQLSERVER:大容量导入数据时保留标识值 (SQL Server)

    从MSDN上看到实现大容量导入数据时保留标识值得方法包含三种: MSDN链接地址为:https://msdn.microsoft.com/zh-cn/library/ms178129.aspx 感觉M ...

  5. html 鼠标移入标签 显示小手指

    <div style="width: 200px; height: 200px; background: red; cursor: pointer;"></div ...

  6. Topcoder SRM 597

    妈蛋第一场tc就掉分,提交了第一个题的时候就注定悲剧要发生了,妈蛋没考虑0就直接%了,真的是人傻见识又少,第二题最后有了一点思路,没时间写了,可能也不是很准确,第三题想了小会儿效果为0! 然后第一题傻 ...

  7. 2-sat（and,or,xor）poj3678

    Katu Puzzle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7949   Accepted: 2914 Descr ...

  8. C#: MessageBox

    系统学习下Form里用到最多的MessageBox MessageBox有21个重载的Show函数...都是返回DialogResult public enum DialogResult { None ...

  9. 10.Java设计模式 工厂模式,单例模式

    Java 之工厂方法和抽象工厂模式 1. 概念 工厂方法:一抽象产品类派生出多个具体产品类:一抽象工厂类派生出多个具体工厂类:每个具体工厂类只能创建一个具体产品类的实例. 即定义一个创建对象的接口(即 ...

  10. Mysql索引总结(二)

    在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytable表: ) NOT NULL ); 在查找username="admin"的记录 SELECT * ...