动态创建标记~内容包括：

1. 传统技术：document.write 和innerHTML

2. 深入剖析DOM方法：createElemen、createTextNode、appendChild和innerBefore

核心在于JavaScript也可以用来改变网页的结构和内容。

传统方法：document.write。违背了行为应该与表现分离。

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Test</title>

 </head>

 <body>

 <script>document.write("hello world")</script>

 </body>

 </html>

以插入的字符串为参数，将一个<p>，字符串和</p>标签拼接到一起。

function insertParagraph(text){

    var str="<p>";

    str+=text;

    str+="</p>";

    document.write(str);

}

在HTML文档中插入：

<script src="example.js"></script>

 <script>insertParagraph("hello world")</script>

想这样把JS与HTML混杂起来很不好。只要有可能，就应该用外部CSS文件代替<font>标签去设定和管理页面的样式，最好用外部JavaScript文件去控制网页行为。应该避免在<body>部分乱用<script>标签，避免使用document.write方法。

innerHTML

先如今的浏览器几乎都支持innerHTML，这个属性并不是W3C DOM标准的组成部分，但现在已经包含到HTML5规范中。

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

<div>

 <p>this is <em>my</em> content</p>

 </div>
window.onload=function(){

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

    alert(testdiv.innerHTML);//输出<p>this is <em>my</em> content</p>
}

innerHTML属性毫无细节可言。一旦使用innerHTML，它的全部内容都会被替换。

window.onload=function(){

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

    testdiv.innerHTML="<p>this is <em>my</em> content</p>";

}

要想获得细节，就必须使用DOM方法和属性。在任何时候，标准的DOM都可以用来代替innerHTML。

DOM方法

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

 <div id="testdiv">

 </div>

createElement：

var para=document.createElment<"p">;

appendChild:

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

testdiv.appendChild=para;

createTextNode

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);

}

一个更复杂的组合。现在想显示如下内容：

<p>this is <em>my</em> content</p>

JS代码如下：

window.onload=function(){

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

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

    testdiv.appendChild(para);

    var txt=document.createTextNode("this is");

    para.appendChild(txt);

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

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

    emph.appendChild(txt2);

    para.appendChild(emph);

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

    para.appendChild(txt3);
}

重回图片库

图片库中的placeholder和描述是只为了图片显示而存在的，所以此处我们将用DOM来创建它们。

var placeholder=document.createElement("img");//创建图像节点

placeholder.setAttribute("src",image/1.jpg);

placeholder.setAttribute("id",placehold);

placeholder.setAttribute("alt",my image gallery);

var describe=document.createElement("p");//创建描述节点

describe.setAttribute("id",description);

var txt=document.createTextNode("this is a description");

describe.appendChild(txt);

document.getElementsByTagName("body")[0].appendChild(placeholder);//插入至BODY元素

document.getElementsByTagName("body")[0].appendChild(describe);

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

parentElement.insertBefore(newElement,targetElement);

var gallery=document.getElementById("imagegallery");//等同于上面JS代码的后两行

gallery.parentNode.insertBefore(placeholder,gallery);

gallery.parentNode.insertBefore(describe,gallery);

在已有元素后插入一个新元素：

DOM本身没有提供insertAfter的方法，但可以自己写一个。

function insertAfter(newElement,targetElement){

    var parent=targetElement.parentNode;

    if (parent.lastChild==targetElement)

    {

        parent.appendChild(newElement);

    }else {        parent.insertBefore(newElement,targetElement.nextSibling);

    }

}

 Ajax：异步加载网页的技术。对页面的请求以异步方式发送到服务器。服务器不会用整个页面来响应请求，他会在后台处理请求，与此同时用户还能继续浏览网页并与页面交互。JS脚本按需加载和创建网页内容，而不会打断用户的浏览体验。Ajax依赖于JavaScript。

技术的核心是XMLHttpRequest对象。（充当浏览器中的脚本【即客户端】与服务器之间的中间人角色）。

例子：

HTML文档

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Ajax</title>

</head>

<body>

<div id="new"></div>

<script src="addLoadEvent.js"></script>

<script src="getHTTPObject.js"></script>

<script src="getNewContent.js"></script>

</body>

</html>

三个JS文件：

function addLoadEvent(func){

    var oldload=window.onload;

    //alert(typeof oldload)

    if (typeof oldload !='function')

    {

        window.onload=func;//为什么此处window.onload不能换为oldload

    }else{

        window.onload=function(){

            oldload();

            func();

        }

    }

}
function getHTTPObject(){

    if (typeof XMLHttpRequest=="undefined")

    {

        XMLHttpRequest=function(){

            try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0");}

            catch(e){}

            try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0");}

            catch(e){}

            try{ return new ActiveXObject("Msxml2.XMLHTTP");}

            catch(e){}

            return false;

        }

    }

    return new XMLHttpRequest();

}
function getNewContent(){

    var request=getHTTPObject();

    if (request)

    {

        request.open("GET","example.txt",true);

        request.onreadystatechange=function(){

            if (request.readyState==4)

            {

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

                var txt=document.createTextNode(request.responseText);

                para.appendChild(txt);

                document.getElementById("new").appendChild(para);

            }

        };

        request.send(null);

    }else{

        alert("sorry~~~")

    }

}

addLoadEvent(getNewContent)

使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求。有些浏览器会限制Ajax的协议。比如在chrome中，如果使用file://协议从之间的硬盘中加载example.txt文件，就会看到Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 的错误消息。

异步请求容易被忽略的问题是异步性。脚本发送XMLHttpRequest请求之后，仍然会继续执行，不会等待响应返回。

渐进增强与Ajax.

一开始基于老式的页面刷新机制构建的，可以再既有框架的基础上，用Ajax拦住发送到服务器的请求，并将请求交给XMLHttpRequest对象处理。

构建Ajax网站最好的方法，先构建一个常规的网站，然后Hijax（渐进增强的使用Ajax）它。

小结：

createElement

createTextNode

appendChild

insertBefore.

 

《JavaScript Dom 编程艺术》读书笔记-第7章的更多相关文章

  1. JavaScript DOM编程艺术读书笔记(三)

    第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...

  2. JavaScript DOM编程艺术读书笔记(二)

    第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...

  3. JavaScript DOM编程艺术读书笔记(一)

    第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...

  4. JavaScript DOM编程艺术 - 读书笔记1-3章

    1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...

  5. JavaScript DOM编程艺术 读书笔记

    2. JavaScript语法 2.1 注释      HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...

  6. JavaScript DOM编程艺术读书笔记(四)

    第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...

  7. JavaScript DOM编程艺术-学习笔记（第二章）

    1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...

  8. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  9. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  10. JavaScript DOM编程艺术-学习笔记

    发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...

随机推荐

  1. Lua论分析需求（学好英文）的重要性

    题目是这样的: Observe that its base and height are both equal to , and the image is drawn using # symbols ...

  2. tomcat是怎么找到项目lib目录下的jar包的，求大神解答

    是通过java代码动态的修改classpath吗,和classloader有关系吗

  3. vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题

    vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题 今天下载了一个开源项目一直运行不了,折腾了半天才找到问题所在,config ...

  4. hdu4916 Count on the path

    调了好久.... •把树视为以1为根的有向树,然后将1删除 •原树变为一个森林,并且任一棵树的根节点均为原树中1的子节点 •只需要考虑最小编号前3小的三棵树 •记f[x][y]为去掉x和y两棵树后的最 ...

  5. Python工资高还是Java？

    说起来,随着人工智能和大数据逐渐进入人们的眼中,越来越多的人看到互联网未来大好发展趋势,而想要学习一门技术来进入其中,以期分一杯羹.但是,作为人工智能和大数据的重要编程语言,Python和Java,该 ...

  6. LR访问Https接口

    实操篇 第一步:需要跟开发或者运维要到要访问的https接口的证书(有关证书的问题我们在原理中有解释). 第二步:确定要来的证书的格式是否为pem格式的.首先,LR只能够识别pem格式的证书而且是DE ...

  7. lmbench用于arm测试

    一.下载 http://www.bitmover.com/lmbench/lmbench.html网站有lmbench的介绍 下载地址如下(lmbench3): http://www.bitmover ...

  8. JS中几种常见的高阶函数

    高阶函数:英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数 ...

  9. Bugku-CTF之看看源代码吧

    Day13 看看源代码吧 http://123.206.87.240:8002/web4/   本题要点:url解码   首先看到文本框,我们还是要习惯性输入一下

  10. Learning-Python【6】：Python数据类型（2）—— 列表、元组

    一.列表类型 1.用途:记录多值,比如人的多个爱好 2.定义方式:在[ ]内用逗号分隔开多个任意类型的值 li = [1, 2, 3] 3.常用操作+内置方法 优先掌握的操作: 1)按索引存取值:可以 ...