码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript DOM编程艺术

时间:2015-07-14 08:38:34      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

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规则



Javascript DOM编程艺术

标签:

原文地址:http://www.cnblogs.com/elexiang/p/4644462.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!