《JavaScript Dom 编程艺术》读书笔记-第7章
动态创建标记~内容包括：
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章的更多相关文章
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- JavaScript DOM编程艺术读书笔记(二)
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
- JavaScript DOM编程艺术读书笔记(一)
第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...
- JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...
- JavaScript DOM编程艺术 读书笔记
2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...
- JavaScript DOM编程艺术读书笔记(四)
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
- JavaScript DOM编程艺术-学习笔记（第二章）
1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
随机推荐
- tomcat是怎么找到项目lib目录下的jar包的，求大神解答
是通过java代码动态的修改classpath吗,和classloader有关系吗
- Delphi7使用一段时间后抽风提示注册
今天在单位用电脑接自己的移动硬盘,一打开资源管理器就卡死,删除硬盘总是提示用程序在使用,反复试了几次,老样子.很是窝火.干脆直接关机电脑,桌面上还有开着的Delphi编译器,重新开机!开机后一打开编译 ...
- 2017-2018-1 20155228 《数学建模》 MatlabR2017a安装教程
2017-2018-1 20155228MatlabR2017a安装教程 原版软件和破解补丁的下载 原版软件和破解补丁的下载链接 需要关注微信公众号才能获取下载密码,照办就是了,为了学习嘛哈哈哈 有三 ...
- java 写一个类，实现对象数的计算
但是在面向对象设计之前,广泛采用的是面向过程,面向过程只是针对于自己来解决问题.面向过程的操作是以程序的基本功能实现为主,实现之后就完成了,也不考虑修改的可能性,面向对象,更多的是要进行子模块化的设计 ...
- Gym - 100989H
After the data structures exam, students lined up in the cafeteria to have a drink and chat about ho ...
- P2877 [USACO07JAN]牛校Cow School（01分数规划+决策单调性分治）
P2877 [USACO07JAN]牛校Cow School 01分数规划是啥(转) 决策单调性分治,可以解决(不限于)一些你知道要用斜率优化却不会写的问题 怎么证明?可以暴力打表 我们用$ask(l ...
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- 异常：unity3d ArgumentException: The Assembly System.Configuration is referenced by System.Data.
异常:ArgumentException: The Assembly System.Configuration is referenced by System.Data. But the dll is ...
- LNMP常用命令总结
1. 重启 ngnix: /usr/local/ngnix/sbin/nginx -s reload 2. 重启 php-fpm: 先查找php-fpm进程号 ps -aux | grep php-f ...
- JAVA代码覆盖率工具JaCoCo-原理篇
JAVA代码覆盖率工具JaCoCo-原理篇 1.2 JAVA覆盖率工具介绍 1.3.3 Apache Maven方式 1.3.4 Eclipse EclDmma Plugin方式 JAVA代码覆盖率工 ...