Javascript DOM编程艺术

时间：2023-03-09 09:47:29
Javascript DOM编程艺术

Chapter 0

为什么读这本书？作为js入门书，补基础,由于本书代码demo较简单，并没有贴代码，只记录一些自己要注意的知识点以及代码脚本

Chapter 1: javascript简史

DOM全称是document object model(文档对象模型),假设把文档看做一个对象,那DOM就是如何利用HTML和XML去对这个对象进行操作和控制的标准

　　1.2 AJAX(异步传输技术)引发了一次学习DOM脚本编程的热潮:　　

　　传统的Web应用交互由用户出发一个HTTP请求到服务器，服务器对其进行处理返回一个新的HTML到客户端，然后每当服务处理请求时，客户端只能等待，而使用AJAX的异步处理机制，就可以在不更新整个页面的前提下维护数据，这一特点主要基于XMLHTTP和XMLHTTPRequest

　　1.3 HTML5新特性:

　  <audio>和<video>控制媒体
　　<canvas>具备了完善的绘图能力
　　浏览器本地存储超越了cookie的限制：
　　cookie: 4kb,每次请求一个新的页面都需要发送过去，不可以跨域调用
　　localstorage: 始终有效, 存储大小为5mb

Chapter 2: Javascript语法


　　2.1 数据类型

Javascript是一种弱类型语言,程序员可以在任何阶段改变变量的数据类型
var age = 'china';
age = 26;
如果想在变量中使用单引号或双引号,必须使用\对字符串进行转义
var mood = 'don\'t ask';  // don't ask

　　2.2 数组

数组的定义:
var arrs = Array();
var arrs = Array(4);

关联数组:
var arrs = Array();
arrs['name'] = 'Carlton';
arrs['age'] = '26';
arrs['living'] = true;

　　2.3 对象

2.3.1 对象是什么:由一些属性和方法组成的的无序集合,当此特性为函数时,我们称之为对象的方法(method), 不是函数时,则称之为对象的属性(proporty)

var obj1 = Object();

obj.name = 'Carlton';

obj.age = '26';

obj.living = function(){

　　alert(true);

}

var obj2 = {
　　name: "Carlton",
　　age: "26",
　　living: function(){
　　　　alert(true);
　　}
}

　　2.3.2 对象有哪些:

　　内置对象:Array,Date,Math等　　

　　宿主对象:Form,Image(可访问img标签), Element,document

Chapter 3: DOM

　　3.1 DOM概述

DOM拆开来看就是Document(文档)、Object(对象)、Model(模型)
对于HTML来说，DOM中document就是HTML文档, Object是供JS操作DOM的一些对象, Model是对HTML文档建立的一种模型,以tree的形式呈现
HTML文档就相当于一颗树，由不同的节点构成，关于节点：
整个文档就是一个文档节点
每个HTML标签就是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点

　　3.2 获取元素

document.getElementById(id);//获取特定id的某个节点
document.getElementByTagName(tagName);//获取特定标签的节点集合
document.getElementsByClassName(classname);//获取特定类名的节点集合
获取和设置属性:
object.getAttribute(attr);//获取属性attr的值，object是一个节点
object.setAttribute(attr, value);//为属性attr设置相应值

Chapter 4: Javascript图片库

本章代码demo比较简单，在这里就不详细介绍，我只列了一些自己需要注意的点

Q:在点击某个链接时，留在这个网页而不是转到另一个窗口
A:通过增加一个“占位符”图片的方法在这个主页为图片预留一个浏览区域
Q:点击链接时，在当前网页上看到图片
A:使用return false取消网页默认行为
<a href="#" onclick="showPic(this);return false"></a>
另一个默认动作是form表单中的<input type="submit">

ChildNodes属性可以获取任何一个元素的所有子元素

document.getElementByTagName("body")[0].ChildNodes;//获取body所有的子元素

nodeType可以让我们知道自己正在与哪一种节点打交道

元素节点、属性节点、文本节点的nodeType分别为1,2,3

node.nodeValue可以改变一个文本节点的值

node.firstChild 等价于 node.ChildNodes[0]

node.lastChild 等价于 node.ChildNodes[node.ChildNodes.length - 1]

Chapter 5: 最佳实践

Chapter 6: 图片库改进版


　　6.1 结构化程序设计

其中一个原则是:函数应该只有一个出口和入口 
如果一个函数有多个出口，应该将出口集中在开头部分，就可以接受了，例:
function prepareGallery(){
　　if(!document.getElementByTagName) return false;
　　if(!document.getElementById) return false;
　　if(!document.getElementByClassName) return false;
}

　　6.2 共享onload事件

addLoadEvent函数将完成的操作：
把现有的window.onload事件处理函数的值存入变量oldload
如果在这个处理函数上没有绑定任何函数，就像平时那样把心得函数添加给它
如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有的指令的末尾
function addLoadEvent(func){
　　var oldonload = window.onload;
　　if(typedef window.onload != 'function'){
　　　　window.onload = func;
　　} else {
　　　　window.onload = function(){
　　　　　　oldonload();
　　　　　　func();
　　　　}
　　}
}

这就将那些在页面加载完毕时执行的函数创建为一个队列,如
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

　　6.3 使用三元操作符

若函数格式如下所示
if(whichpic.getAttribute("title")){
var text = whicpic.getAttribute("title");
} else {
var text = "";
}
则可以用三元操作符完成操作
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";

Chapter 7: 动态创建标记

　　7.1 document.write 和 innerHTML

document对象的write方法可以方便的将字符串插入文档中
document.write("<p>This is a test</p>")
innerHTML属性: 用来读或写指定元素内的HTML内容
<div id="testDiv">
<p>This is a test</p>
</div>
此时testDiv.innerHTML中的内容是<p>This is a test</p>

　　7.2 DOM方法

　　7.2.1 createElement方法

动态创建script引用

var head= document.getElementsByTagName('head')[0];

var script= document.createElement('script');

script.type= 'text/javascript' / script.setAttribute("type", "text/javascript");

script.src= 'call.js' / script.setAttribute("src", "call.js");

head.appendChild(script);

　　7.2.2 createTextNode方法

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

document.getElementById("testDiv").appChilid(para);

var txt = document.createTextNode("Hello World");

para.appendChild(txt);

　　7.2.3 insertBefore方法

parentElement.insertBefore(newElement, targetElement)

newElement: 你想插入的元素

targetElement: 你想将newElement插入哪个元素之前

parentElement: targetElement元素的父元素,即targetElement.parentNode

　　

　　7.2.4 自定义insertAfter方法

function inertAfter(newElement, targetElement){

　　var parent = targetElement.parentNode;

　　if(parent.lastChild == targetElement){

　　　　parent.appendChild(newElement);

　　} else {

　　　　parent.insertBefore(newElement, targetElement.nextSibling);//目标元素的下一个兄弟元素

　　}

}

　　

　　7.3 AJAX

　　以前想要看到一个页面的变化，哪怕是很小的一部分，也要重新发送请求，刷新整个页面，而使用Ajax就可以只更新页面中的一小部分，其中的内容都不需要再更新，已经加载的页面只有一小部分会更新，而不必再次加载整个页面

Ajax最的的优势是对页面的请求以异步的形式发送给服务器，这样不需要等服务器返回请求数据也可以继续浏览网页，不极大的提升了用户体验

　　7.3.1 XMLHttpRequest

var request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //ie浏览器创建对象
var request = new XMLHttpRequest();//其他浏览器创建对象
//示例代码
function getNewContent() {
　　var request = XMLHttpRequest();
　　if(request){
　　　　request.open("GET", "example.txt", true);
　　　　request.onreadystatechange = function(){
　　　　//XMLHttpRequest对象送回响应的时候执行
　　　　if(request.readstate == 4) { //4表示请求完成
　　　　　　//一些操作
　　　　}
　　};
　　request.send(null);
　　} else {
　　　　alert("fail");
　　}
}

Chapter 8: 充实文档的内容

　　8.1 DOCTYPE

在HTML5出现之前，我们一般使用XHTML文档规则,而不是用HTML,因为HTML有很多不方便的地方
HTML规则即允许使用小写(<a>)也允许使用大写字母(<A>),也可以省略结束标签(</p>,</li>)
使用XHTML规则
<!DOCTYPE html PUBLIC ".." "https://..">
使用HTML5规则
<!DOCTYPE html> 同样支持HTML和XHTML规则

相关文章