1. childNodes  nodeValue

<p id="p1">hello p!</p>

alert(document.getElementById("p1").childNodes[0].nodeValue);

2. firstChild lastChild

childNodes[0] 等价于 firstChild   (node.childNodes[0] == node.firstChild)

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

3. nodeValue 赋值

  var description = document.getElementById("p1");

description.firstChild.nodeValue = text;

4. nodeType

nodeType共有12中可取值,只有三种具有实用价值

·元素节点 的nodeType值为1

属性节点的 nodeType值为2

文本节点的nodeType值为3

5. window.open(url, windowName, features)

<a href="javascript:popUp('http://www.baidu.com');">hehehehe</a>//伪协议

<script>

function popUp(winURL){
    window.open(winURL, "mywindow", "width=110, height=222");
}

6. 平稳退化

<a href="http://www.baidu.com" onClick="popUp(this.href);return false;">hehehehe</a>

7. 分离javascript

var links = document.getElementsByTagName("a");

for(var i=0; i<links.length; i++){

  if(links[i].getAttribute("class")==="popup"){

  links[i].onclick = function(){

      popUp(this.getAttribute("href"));

      return false;

}  

  }

}

</script>

8. document对象是wndow对象的一个属性,当window对象触发onload事件时,document对象已经存在

9.对象检测

if(!document.getElementsByTagName)return false;

10 合并和放置脚本 浏览器同时下载文件的数量有限

11 压缩脚本 去掉注释 空格等

脚本文件应该有两个版本 一是工作副本,可以修改代码并添加注释;一是精简副本(文件名中通常加上min example.min.js),用于放在站点上

代码压缩工具 谷歌Closure compiler

12. window.onload绑定事件

改进;

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof oldonload !='function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

然后调用

addLoadEvent(firstFunction);

addLoadEvent(secondFunction);

13. nodeName 该属性总是返回一个大写字母的值

<img src="data:image/a.jpg"/ id="mypic">

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

if(mypic.nodeName!="IMG")return false;

14. onkeypress键盘事件

可以使用 links[i].onkeypress = links[i].onclick;把onclick事件的所有功能赋给onkeypress

15 innerHTML 属性无细节可言, 要想获得细节 需要用dom的方法和属性; 类似于document.write, innerHTML也是HTML专有属性

testdiv.innerHTML = "<p>i am <em>a </em>teacher</p>";

16 dom方法

17. createElement 只能创建元素节点

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

alert(para.nodeName);

alert(para.nodeType);

18 appendChild

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

testdiv.appendChild(para);

19. createTextNode 创建文本节点

var text = document.createTextNode("hello js");

para.appendChild(text);

20. DOM insertBefore()

parentElement.insertBefore(newElement, targetElement);

我们不必搞清楚父元素是哪个  targetElement元素的parentNode属性就是它

21 insertAfter

22. Ajax XMLHttpRequest

创建XMLHttpRequest对象

XMLHttpRequest open()方法

访问服务器返回的数据

注意

23 Hijax 渐进增强的使用ajax

正常的登录使用form表单触发submit事件, 只要使用onsubmit事件处理函数捕获该事件,就可以取消他的默认操作(提交整个页面)

然后通过XMLHttpRequest对象向服务器发送请求。

24. 两点原则

25. 缩略语标签abbr

26. DOCTYPE 标准模式

27. 从abbr标签读取title并按照定义列表(dl)方式展示

function displayAbbreviations(){
var abbreviations = document.getElementsByTagName("abbr");
if(abbreviations.length < 1)return false;
var defs = new Array();
for(var i=0; i<abbreviations.length; i++){
var current_abbr = abbreviations[i];
var description = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = description; }
var dlist = document.createElement("dl");
for(key in defs){
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text); var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(defs[key]);
ddesc.appendChild(ddesc_text); dlist.appendChild(dtitle);
dlist.appendChild(ddesc); }
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}

28. CSS DOM要求用驼峰命名

element.style.font-family报错 应使用 element.style.fontFamily

29.  获取下一个元素节点

function getNextElement(node){
if(node.nodeType==1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}

30. 表格奇数偶数行斑马色

function stripTables(){
var tables = document.getElementsByTagName("table");
var odd, rows;
for(var i=0; i<tables.length; i++){
odd = false;
rows = tables[i].getElementsByTagName("tr");
for(var j=0; j<rows.length; j++){
if(odd==true){
rows[j].style.backgroundColor = "#ffc";
odd = false;
}else{
odd = true;
}
}
}
}

31. css :hover伪类

如果只想鼠标悬停在链接、表格行上时改变颜色、字体等,可以使用css :hover

<head>
<style>
tr:hover{
font-weight : bold;
}
</style>
</head>

使用js同样实现

function highlightRows(){
var rows = document.getElementsByTagName("tr");
for(var i=0; i<rows.length; i++){
rows[i].onmouseover = function(){
this.style.fontWeight = "bold";
};
rows[i].onmouseout = function(){
this.style.fontWeight = "normal";
}
}
}

32. 可以通过js给标签赋予某class值 再在css中对该class定义样式 这样在更新时就可以避免修改js

element.className = "intro";

css中

.intro{

  font-weight : bold;

font-size : 1.4em;

}

这个技巧有一个不足 element标签原来有一些样式时 原样式会被覆盖 添加addClass函数处理

function addClass(element, value){
if(!element.className){
element.className = value;
}else{
element.className += " " + value;
}
}

javascript现在更新的是className属性,根本没碰style,分离更彻底

33. setTimeout函数能够让某个函数在经过一个预定时间之后运行

var variable;

variable = setTimeout('function', interval);

clearTimeout函数能够取消setTimeout中准备执行的函数

clearTimeout(variable);

34. parseInt(string) 返回一个数值

parseInt("39 step")将返回数值39  parseInt("50px")将返回50

parseFloat(string) 将返回浮点数

35. 图片在页面内定时更新位置 实现动画效果

<!DOCTYPE html>
<html en="lang">
<head>
<meta charset="utf-8"/>
</head>
<body>
<img id="mypic" src="hellonodejs.png"/>
<script src="animation.js"></script>
</body>
</html>
---------animation.js---------
function moveMessage(){ var elem = document.getElementById("mypic");
var xpos = parseInt(elem.style.left);// pos.left
var ypos = parseInt(elem.style.top);//style.top
if(xpos==300 && ypos==300)return true;
if(xpos<300) xpos++;
if(xpos>300) xpos--;
if(ypos<300) ypos++;
if(ypos>300) ypos--;
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
setTimeout(moveMessage, 10);
}
function initPos(){ var elem = document.getElementById("mypic");
//elem.className = "newstyle";
elem.style.position = "relative";
elem.style.left = "600px";
elem.style.top = "200px";
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(initPos);
addLoadEvent(moveMessage);

36. 鼠标悬停于a链接 图片切换

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>testAnimation</title>
<link href="b3.css" rel="stylesheet" type="text/css"/>
</head>
<body >
<ol id="olist">
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.alibaba.com">阿里</a></li>
<li><a href="www.qq.com">qq</a></li>
<li><a href="www.ibm.com">ibm</a></li>
</ol>
<div id="previewdiv">
<img src="111.jpg" id="scrollPic"/>
</div>
<script src="b3.js"></script>
</body>
</html> ------------b3.css-------------
#previewdiv{
position : absolute;
width : 280px;
height : 210px;
overflow : hidden;
} ----------------b3.js---------------------
function moveMessage(elementID, final_x, final_y, interval){
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos==final_x && ypos==final_y) return true;
if(xpos<final_x) xpos++;
if(xpos>final_x) xpos--;
if(ypos<final_y) ypos++;
if(ypos>final_y) ypos--;
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveMessage('"+elementID+"', '"+final_x+"', '"+final_y+"', '"+interval+"')";
movement = setTimeout(repeat, interval);
} function positionMessage(){ var elem = document.getElementById("scrollPic");
elem.style.position = "relative";
elem.style.left = "0px";
elem.style.top = "0px";
var olist = document.getElementById("olist");
var links = olist.getElementsByTagName("a");
links[1].onmouseover = function(){moveMessage("scrollPic", -280, 0, 10)};
links[2].onmouseover = function(){moveMessage("scrollPic", -560, 0, 10)};
links[3].onmouseover = function(){moveMessage("scrollPic", -840, 0, 10)}; }
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(positionMessage);

解决办法

代码

function moveMessage(elementID, final_x, final_y, interval){
var elem = document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement);
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos==final_x && ypos==final_y) return true;
if(xpos<final_x) xpos++;
if(xpos>final_x) xpos--;
if(ypos<final_y) ypos++;
if(ypos>final_y) ypos--;
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveMessage('"+elementID+"', '"+final_x+"', '"+final_y+"', '"+interval+"')";
elem.movement = setTimeout(repeat, interval);
}

优化效果

借助js函数

代码

var dist = 0;
if(xpos < final_x) {
dist = Math.ceil((final_x-xpos)/10);
xpos += dist;
};
if(xpos > final_x) {
dist = Math.ceil((xpos-final_x)/10);
xpos -= dist;
};
if(ypos < final_y) {
dist = Math.ceil((final_y - ypos)/10);
ypos += dist;
};
if(ypos > final_y) {
dist = Math.ceil((ypos - final_y)/10);
ypos -= dist;
};

37. 添加安全检查

这里elem的left样式属性和top样式属性可能不存在

if(!elem.style.left){
elem.style.left = 0px;
}
if(!elem.style.top){
elem.style.top = 0px;

}

整理后的moveElement函数

function moveMessage(elementID, final_x, final_y, interval){
var elem = document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement);
}
if(!elem.style.left){
elem.style.left = "0px";
}
if(!elem.style.top){
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos==final_x && ypos==final_y) return true;
var dist = 0;
if(xpos < final_x) {
dist = Math.ceil((final_x-xpos)/10);
xpos += dist;
};
if(xpos > final_x) {
dist = Math.ceil((xpos-final_x)/10);
xpos -= dist;
};
if(ypos < final_y) {
dist = Math.ceil((final_y - ypos)/10);
ypos += dist;
};
if(ypos > final_y) {
dist = Math.ceil((ypos - final_y)/10);
ypos -= dist;
};
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveMessage('"+elementID+"', '"+final_x+"', '"+final_y+"', '"+interval+"')";
elem.movement = setTimeout(repeat, interval);
}

如果用户禁用了javascript, 那么上面展示动画的div和img就显得无用 所以应该动态追加这两个标签

用到document.createElement  insertAfter(自己实现)

38. html5

http://modernizr.cn/

39. html5 canvas 图片灰度处理例子

----grayscale.html------
<!DOCTYPE html>
<html en="lang">
<head>
<meta charset="utf-8"/>
<script src="modernizr.js"></script>
</head>
<body>
<img src="111.png" id="pic_test" alt="ta shi ta" title="wo shi title"/><!-->
<script src="grayscale.js"></script>
</body>
</html> ----------grayscale.js-------------
function convertToGS(img){
//如果浏览器不支持<canvas>就返回
if(!Modernizr.canvas) return;
//存储原始的彩色版
img.color = img.src;
//创建灰度版
img.grayscale = createGSCanvas(img);
//在mouseover/out事件发生时切换图片
img.onmouseover = function(){
this.src = this.color;
//this.src = this.grayscale;
}
img.onmouseout = function(){
this.src = this.grayscale;
//this.src = this.color;
}
img.onmouseout();
} function createGSCanvas(img){
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height; var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
//注意 getImageData 只能操作与脚本位于同一个域中的图片
var c = ctx.getImageData(0, 0, img.width, img.height);
for(i=0; i<c.height; i++){//var
for(j=0; j<c.width; j++){//var
var x = (i*4)*c.width + (j*4);
var r = c.data[x];
var g = c.data[x+1];
var b = c.data[x+2];
c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
}
} ctx.putImageData(c, 0, 0, 0, 0, c.width, c.height);
return canvas.toDataURL();
}
window.onload = function(){
convertToGS(document.getElementById("pic_test"));
}

40. html5 视频 video标签

41. 使用video标签例子

movie.html

<!DOCTYPE html>
<html en="lang">
<head>
<meta charset="utf-8"/>
<title>My Video</title>
<link rel="stylesheet" href="styles/player.css" />
<script src="//cdn.bootcss.com/html5media/1.1.8/html5media.js"></script>
</head>
<body>
<div class="video-wrapper">
<video id="movie" controls>
<source src="movie2.mp4"/>
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
<p>Download movie as
<a href="movie2.mp4">MP4</a>,
<a href="movie.webm">WEBM</a>,
or <a href="movie.ogv">OGG.</a>
</p>
</video>
</div>
<script src="scripts/player.js"></script>
</body>
</html>

player.js

function createVideoControls(){
var vids = document.getElementsByTagName("video");
for(var i=0; i<vids.length; i++){
addControls(vids[i]);
}
} function addControls(vid){
vid.removeAttribute("controls"); vid.height = vid.videoHeight;
vid.width = vid.videoWidth;
vid.parentNode.style.height = vid.videoHeight + "px";
vid.parentNode.style.width = vid.videoWidth + "px"; var controls = document.createElement('div');
controls.setAttribute('class', 'controls'); var play = document.createElement('button');
play.setAttribute('title', 'Play');
play.innerHTML = '►'; controls.appendChild(play); vid.parentNode.insertBefore(controls, vid);
play.onclick = function(){
if(vid.ended){
vid.currentTime = 0;
}
if(vid.paused){
vid.play();
}else{
vid.pause();
}
}; vid.addEventListener('play', function(){
play.innerHTML = '▐▐';
play.setAttribute('paused', true);
}, false);
vid.addEventListener('pause', function(){
play.removeAttribute('paused');
play.innerHTML = '►';
}, false);
vid.addEventListener('ended', function(){
vid.pause();
}, false);
} window.onload = function(){
createVideoControls();
}

player.css

.video-wrapper{
overflow : hidden;
} .video-wrapper .controls{
position : absolute;
height : 30px;
width : 30px;
margin : auto;
background : rgba(0,0,0,0.5);
} .video-wrapper button{
display : block;
width : 100%;
height : 100%;
border :;
cursor : pointer;
font-size : 17px;
color : #fff;
background : transparent;
} .video-wrapper button[paused]{
font-size : 12px;
}

42. 新的输入控件类型

43. 新的属性

44. 标签的兼容问题

45. html5的其他特性

46. label 标签

47. form 对象

48. placeholder 属性处理

function resetFields(whichform){
if(Modernizr.input.placeholder) return;
for(var i=0; i<whichform.elements.length; i++){
var element = whichform.elements[i];
if(element.type == "submit") continue;
var check = element.placeholder || element.getAttribute('placeholder');
if(!check) continue;
element.onfocus = function(){
var text = this.placeholder || this.getAttribute('placeholder');
if(this.value == text){
this.className = '';
this.value = '';
}
}
element.onblur() = function(){
if(this.value == ""){
this.className = 'placeholder';
this.value = this.placeholder || this.getAttribute("placeholder");
}
}
element.onblur();
}
} function prepareForms(){
for(var i=0; i<document.forms.length; i++){
var thisform = document.forms[i];
resetFields(thisform);
}
}

49. required属性

50. javascript字符串编码

51. 正则表达式

提取article标签对中的内容

注意

解释

52. 压缩代码

工具 JavaScript Minifier

压缩后可命名为global.min.js   和原来的global.js一并放在scripts文件夹下

53. 内容分发网络 CDN

cdn不够用

54. 语法

54.1 连缀

54.2 迭代

55. 选择元素

55.1 css选择器

55.2. css2.1属性选择器

55.3 子选择器或同辈选择器

55.4 伪类和伪元素选择器

56.  库所提供的专有选择器

如jquery提供的$('tag:odd') 和$('tag:even')用于选择奇数和偶数元素

其他

表单

57.回调函数

jquery的表达式选择器 filter方法

58.操作dom

58.1 生成内容

58.2 jquery的templates模板插件

58.3操作内容

59 处理事件

59.1 加载事件

jquery加载

59.2 其他事件

60. jquery与ajax

60.1

状态值是 success  error  notmodified

例子

60.2 load方法

60.3 周期性的保存

61.  动画和效果

改写之前的moveElement()方法

animate函数

61.2 组合动画

61.3 注意可访问性

DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记的更多相关文章

  1. Eloquent JavaScript #11# The Document Object Model

    索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...

  2. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. DOM (文档对象模型(Document Object Model))

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  4. DOM 是什么,Document Object Model,文档对像模型

    #为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...

  5. DOM (文档对象模型(Document Object Model)

    DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...

  6. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  7. DOM(Document Object Model)

    DOM(Document Object Model):    结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容.    结点类型        1.元素结点 对于元素结点的n ...

  8. JAVA读取XML,JAVA读取XML文档,JAVA解析XML文档,JAVA与XML,XML文档解析(Document Object Model, DOM)

    使用Document Object Model, DOM解析XML文档 也可参考我的新浪博客:http://blog.sina.com.cn/s/blog_43ac5543010190w3.html ...

  9. javaScript高程第三版读书笔记

    看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...

随机推荐

  1. 今天Windows Azure Live to Code的分享

    今天参加了微软广州的Live to Code,晚上回公司OT写了封报告E-mail,也没让公司今天白出工资给我... 因为没有涉及到公司机密什么的,所以就拿出来跟大家分享一下. 首先要说明的是,在会议 ...

  2. 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  3. edit

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 王宝强新片P2P风波持续发酵,互金真的前途未卜?

    王宝强离婚风波还未完全结束,一波未平一波又起,新片又引来话题爆点,其自导自演的电影<大闹天竺>陷P2P平台集资的新闻占据各大媒体头条. 该P2P平台为湖北武汉一家P2P互联网金融理财平台& ...

  5. Spring学习记录(三)---bean自动装配autowire

    Spring IoC容器可以自动装配(autowire)相互协作bean之间的关联关系,少写几个ref autowire: no ---默认情况,不自动装配,通过ref手动引用 byName---根据 ...

  6. SQL Server中的高可用性(3)----复制

        在本系列文章的前两篇对高可用性的意义和单实例下的高可用性做了阐述.但是当随着数据量的增长,以及对RTO和RPO要求的严格,单实例已经无法满足HA/DR方面的要求,因此需要做多实例的高可用性.本 ...

  7. Python第一天 - 迭代

    (一)索引迭代 Python中,迭代永远是取出元素本身,而非元素的索引. 如果要取索引可以用enumerate()函数 例: L = ['Adam', 'Lisa', 'Bart', 'Paul'] ...

  8. http 错误代码表

    所有 HTTP 状态代码及其定义.  代码  指示  2xx  成功  200  正常:请求已完成.  201  正常:紧接 POST 命令.  202  正常:已接受用于处理,但处理尚未完成.  2 ...

  9. 如何做优化,UITabelView才能更加顺滑 (转载)

    这篇文章是前两周@叶孤城叶大在微信群里面的分享,一直到这两天才翻出来研究.很多实用的东西,不过由于水平有限,有些地方没能翻译好,还请大家指正. 我已经在iOS这个最好的移动平台上有几年的开发经验了.在 ...

  10. ubuntu 配置git公钥

    Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...