JavaScript DOM编程艺术 读书笔记
2. JavaScript语法
2.1 注释
HTML允许使用"<!--"注释跨越多个行，但JavaScript要求这种注释的每行都必须在开头加上"<!--"来作为标志。JavaScript解释器对"<!--"的处理与对"//"的处理是一样的。
2.2 变量
在JavaScript语言中，变量和其他语法元素的名字都是区分字母大小写的。
JavaScript语法不允许变量中包含空格或标点符号（美元符号"$"例外）。JavaScript变量名允许包含字母、数字、美元符号和下划线（但第一个字符不允许是数字）。
2.3 数据类型
JavaScript不需要进行类型声明，它是一种弱类型（weakly typed）语言。程序员可以在任何阶段改变变量的数据类型。
字符串：如果想用双引号来包住一个本身就包含双引号的字符串，就必须使用反斜线对字符串中的双引号进行转义，例：var height = "about 5'10\" tall";
数组：var beatles = Array("John","Paul","George","Ringo");或var beatles = ["John","Paul","George","Ringo"];
在JavaScript中，所有的变量实际上都是某种类型的对象。比如，一个布尔值就是一个Boolean类型的对象，一个数组就是一个Array类型的对象。
对象：var lennon={name:"John",year:1940,living:false};
3. DOM(document、object、model )
5个常用DOM方法：getElementById、getElementsByTagName、getElementsByClassName、getAttribute和setAttribute
JavaScript语言里的对象可以分为三种类型：(1)用户定义对象；(2)内建对象；(3)宿主对象；
3.4 结点
DOM中包含的节点主要分为三种：元素节点、文本节点和属性节点。DOM的原子是元素节点，标签的名字就是元素的名字，元素可以包含其他的元素。没有被包含在其他元素里的唯一元素是<html>元素，它是树节点的根元素；
在XHTML文档里，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点；
属性节点用来对元素做出更具体地描述。属性总是被放在起始标签里，所以属性节点总是被包含在元素结点里。并非所有的元素都包含属性，但所有的属性都被元素包含。
有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名字和通过类名字来获取。
1) getElementById(id)
2) getElementByTagName(tag)：返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
3) getElementByClassName(class)：HTML5 DOM，某些DOM实现里可能还没有；返回一个具有相同类名的元素的数组。
获取属性和方法：object.getAttribute(attribute)，object.setAttribute(attribute, value)。getAttribute方法与setAttribute方法不属于document对象，所以不能通过document对象调用，它只能通过元素节点对象调用。
function getElementsByClassName(node, classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
} else {
var result = new array();
var elements = getElementsByTagName("*");
for(var i=0; i<elements.length; i++){
if(elements[i].clsssName.indexOf(classname) != -1){
result[result.length] = elements[i];
}
}
return false;
}
}
4. 案例研究：JavaScript图片库
childNodes属性获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：element.childNodes。通过element.childNodes.length获取element元素包含的元素的个数。由childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点。事实上，文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释为节点，而它们也全都包含在childNodes属性所返回的数组当中。
nodeType属性可以查看到节点类型，但其返回值是一个数字而不是“element”或“attribute”那样的英文字符串。nodeType属性共有12种可取值，但其中仅有3种具有实用价值：
1)元素节点的nodeType属性值是1；
2)属性节点的nodeType属性值是2；
3)文本节点的nodeType属性值是3；
如果想改变一个文本节点的值，可以使用DOM提供的node.nodeValue属性，它用来得到（和设置）一个节点的值。
访问数组的第一个元素childNodes[0]，也可以使用更直观的node.firstChild，与之对应的node.lastChild表示数组的最后一个元素，它其实是node.childNodes[node.childNodes.length-1]。
body {font-family:"Helvetica","Arial",serif; color:#333; background-color:#ccc; margin:1em 10%;}
h1 {color:#333; background-color:transparent;}
a {color:#c60; background-color:transparent; font-weight:bold; text-decoration:none;}
ul {padding:;}
li {float:left; padding:1em; list-style:none;}
img {display:block; clear:both;}
layout.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href="../css/layout.css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="../images/1.jpg" onclick="showPic(this);return false;" title="A firework display">Fireworks</a></li>
<li><a href="../images/2.jpg" onclick="showPic(this);return false;" title="A cup of black coffee">Coffee</a></li>
<li><a href="../images/3.jpg" onclick="showPic(this);return false;" title="A red,red rose">Rose</a></li>
<li><a href="../images/4.jpg" onclick="showPic(this);return false;" title="The famous clock">Big Ben</a></li>
</ul>
<img id="placeholder" src="../images/5.jpg" alt="my image gallery" />
<p id="description">Choose an image.</p>
<script type="text/javascript" src="../js/showPic.js"></script>
</body>
</html>
gallery.html
function showPic(whichpic){
//图片切换
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
//文本切换
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
//alert(body_element.childNodes.length); //子节点个数
//alert(body_element.nodeType); //节点类型
}
window.onload = countBodyChildren();
showPic.js
5. 最佳实践
5.1平稳退化
如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站。这就是所谓的平稳退化（graceful degradation）。就是说，虽然某些功能无法使用，但最基本的操作仍能顺利完成。
“javascript:”伪协议让我们通过一个链接来调用JavaScript函数。例如：<a href="javascript:pop();">Example</a>
如果用一个“挂钩”，就像CSS机制里的class或id属性那样，把JavaScript代码调用行为与HTML文档的结构和内容分离开，网页就会健壮很多。
window.onload = prepareLinks;
function prepareLinks(){
if(!document.getElementsByTagName) return false; //向后兼容性
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;
}
}
}
}
function popUp(winURL){
window.open(winURL,'popup','width=320,height=480');
}
show.js
几个代表性的压缩工具：
（1）Douglas Crockford的JSMin（http://www.crockford.com/javascript/jsmin.html）
（2）雅虎的YUI Compressor（http://yui.github.io/yuicompressor/）
（3）谷歌的Closure Compiler（http://closure-compiler.appspot.com/home）
6. 案例研究：图片库改进版
尽量让JavaScript代码不再依赖于那些没有保证的假设，为此引入了许多项测试和检查，使代码能够平稳退化。最重要的是事件处理函数从标记文档分离到一个外部的JavaScript文件，使JavaScript代码不再依赖于HTML文档的内容和结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href="../css/layout.css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="../images/1.jpg" title="A firework display">
<img src="../images/1.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="../images/2.jpg" title="A cup of black coffee">
<img src="../images/2.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="../images/3.jpg" title="A red,red rose">
<img src="../images/3.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="../images/4.jpg" title="The famous clock">
<img src="../images/4.jpg" alt="Big Ben" />
</a>
</li>
</ul>
<img id="placeholder" src="../images/5.jpg" alt="my image gallery" />
<p id="description">Choose an image.</p>
<script type="text/javascript" src="../js/showPic.js"></script>
</body>
</html>
gallery.html
body {font-family:"Helvetica","Arial",serif; color:#333; background-color:#ccc; margin:1em 10%;}
h1 {color:#333; background-color:transparent;}
a {color:#c60; background-color:transparent; font-weight:bold; text-decoration:none;}
ul {padding:;}
li {float:left; padding:1em; list-style:none;}
#imagegallery {list-style:none;}
#imagegallery li {display:inline;}
#imagegallery li a img {border:; width:80px; height:80px;}
img {display:block; clear:both;}
#imagegallery {list-style:none;}
layout.css
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
//图片切换
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src",source);
//文本切换
if(document.getElementById("description")){
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
function prepareGallery(){
if(!document.getElementsByTagName || !document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick = function(){
return showPic(this) ? false : true;
}
}
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
showPic.js
7 动态创建标记
7.1 一些传统的方法
（1）document.write
document对象的write()方法可以方便快捷的把字符串插入到文档里。例如：
function insertParamgraph(text){
var str="<p>";
str += text;
str += "</p>";
document.write(str);
}
demo
（2）appendChild方法
把刚创建的元素添加到ID为testdiv的DOM节点树中，成为它的子节点：
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(param);//把这个p元素节点追加到文档中的一个元素节点
demo
（3）createTextNode方法
创建一个文本节点：
var txt = document.createTextNode("Hello World"); //创建一个文本节点
para.appendChild(txt); //把这个文本节点追加到刚创建的那个p元素节点上
demo
（4）insertBefore方法
insertBefore()方法把一个新元素插入到一个现有元素的前面。在调用此方法时，必须知道三件事：
a：新目标，你想插入的元素（newElement）；
b：目标元素，你想把这个新元素插入到哪个元素（targetElement）之前；
c：父元素，目标元素的父元素（parentElement）；
该方法的调用语法为：parentElement.insertBefore(newElement, targetElement)。我们不必搞清楚父元素到底是哪个，因为targetElement元素的parentNode属性值就是它。在DOM里，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）。如下所示：
var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder, gallery);
demo
注意：DOM并没有提供insertAfter函数。但可以利用已有的DOM方法和属性编写的insertAfter函数，详见下文。
7.3 图片改进效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href="../css/layout.css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="../images/1.jpg" title="A firework display">
<img src="../images/1.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="../images/2.jpg" title="A cup of black coffee">
<img src="../images/2.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="../images/3.jpg" title="A red,red rose">
<img src="../images/3.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="../images/4.jpg" title="The famous clock">
<img src="../images/4.jpg" alt="Big Ben" />
</a>
</li>
</ul>
<script type="text/javascript" src="../js/showPic.js"></script>
</body>
</html>
gallery.html
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
//图片切换
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src",source);
//文本切换
if(document.getElementById("description")){
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
function prepareGallery(){
if(!document.getElementsByTagName || !document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick = function(){
return showPic(this) ? false : true;
}
}
}
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","../images/5.jpg");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description,placeholder);
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
viewPic.js
7.4 Ajax技术
DEOM之html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ajax</title>
<link rel="stylesheet" href="../css/layout.css" media="screen" />
</head>
<body>
<div id="new"></div>
<script type="text/javascript" src="../js/addLoadEvent.js"></script>
<script type="text/javascript" src="../js/getHTTPObject.js"></script>
<script type="text/javascript" src="../js/getNewContent.js"></script>
</body>
</html>
ajax.html
DEMO之getHTTPObject.js代码：
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();
}
XMLHttpRequest对象有许多的方法。其中最有用的是open方法，它用来指定服务器上要访问的文件，指定请求类型：GET、POST或SEND。这个方法的第三个参数用于指定请求是否以异步方式发送和处理。getNewContent.js代码如附件所示。
代码中的onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。在这个处理函数中，可以根据服务器的具体响应做相应的处理。
服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值。它有5个可能的值：
a：0表示未初始化；
b：1表示正在加载；
c：2表示加载完毕；
d：3表示正在交互；
e：4表示完成；
只要readyState属性值变成了4，就可以访问服务器发送回来的数据了。
DEMO之getNewContent.js代码：
function getNewContent() {
var request = getHTTPObject();
if(request) {
request.open("GET", "../views/example.txt", true); //发起一个GET请求，请求的是example.txt的内容
request.onreadystatechange = function() { //响应处理函数
if(request.readyState == 4) {
alert("Response Received");
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById("new").appendChild(para);
}
};
request.send(null); //发送请求
} else { //若浏览器不支持XMLHttpRequest对象
alert("Sorry, your browser doesn\'t support XMLHttpRequest");
}
alert("Function Done");
}
addLoadEvent(getNewContent);
getNewContent.js
访问服务器送回来的数据要通过两个属性完成。一个是responseText属性，这个属性保存文本字符串形式的数据。另一个属性是responseXML属性，用于保存Content-Type头部中指定为“text-xml”的数据，其实是一个DocumentFragment对象，可以使用各种DOM方法来处理这个对象。
异步请求有一个容易被忽略的问题是异步性，就是脚本在发送XMLHttpRequest请求后，仍然会继续执行，不会等待相应返回。
8 充实文档内容
8.4 为文档创建缩略语列表的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax</title>
<link rel="stylesheet" media="screen" href="../css/typegraphy.css" />
</head>
<body>
<h1>What is the document object model?</h1>
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> defines the
<abbr title="Document Object Model">DOM</abbr> as:
</p>
<blockquote cite="http://www.w3c.org/DOM/">
<p>
A platform- and language-neutral interface that will allow programs and scripts to
dynamically access and update the content, structure and style of documents.
</p>
</blockquote>
<p>
It is an <abbr title="Application Programing Interface">API</abbr> that can be used to
navigate <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Extensible
Markup Language">XML</abbr> documents.
</p>
<script src="../js/addLoadEvent.js"></script>
<script src="../js/displayAbbreviations.js"></script>
</body>
</html>
explanation.html
function displayAbbreviations(){
//兼容性检测
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false;
//取得所有缩略词
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];
if(current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
//创建定义列表
var dlist = document.createElement("dl");
for(key in defs){
var definition = defs[key];
//创建定义标题
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(definition);
ddesc.appendChild(ddesc_text);
//把他们添加到定义列表
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if(dlist.childNodes.length < 1) return false;
//创建标题
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
//把标题添加到页面主题
document.body.appendChild(header);
//把定义列表添加到页面主题
document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);
displayAbbreviations.js
8.5 显示文献来源链接表
function displayCitations(){
var quotes = document.getElementsByTagName("blockquote");
for(var i=0;i<quotes.length;i++){
if(!quotes[i].getAttribute("cite")) {
continue;
}
var url = quotes[i].getAttribute("cite");
var quoteChildren = quotes[i].getElementsByTagName("*");
if(quoteChildren.length < 1) continue;
var elem = quoteChildren[quoteChildren.length-1];
var link = document.createElement("a");
var link_text = document.createTextNode("source");
links.appendChild(link_text);
links.setAttribute("href",url);
var superscript = document.createElement("sup");
superscript.appendChild(links);
elem.appendChild(superscript);
}
}
displayCitations.js
8.6 显示“快捷键清单”
function displayAccessKeys(){
if(!document.getElementsByTagName || !document.createElement || !document.createTextNode)
return false;
//取得文档中的所有链接
var links = document.getElementsByTagName("a");
//创建一个数组，保存访问键
var akeys = new Array();
for(var i=0;i<links.length;i++){
var current_link = links[i];
//如果没有accesskey属性，继续循环
if(!current_link.getAttribute("accesskey")) continue;
//获取accesskey的值
var key = current_link.getAttribute("accesskey");
//获取文本链接
var text = current_link.lastChild.nodeValue;
akeys[key] = text;
}
//创建列表
var list = document.createElement("ul");
//遍历访问键
for(key in akeys) {
var text = akeys[key];
//创建放到列表项中的字符串
var str = key + ":" + text;
//创建列表项
var item = document.createElement("li");
var item_text = document.createTextNode(str);
item.appendChild(item_text);
//把列表项添加到列表
list.appendChild(item);
}
//创建标题
var header = document.createElement("h3");
var header_text = document.createTextNode("Accesskeys");
header.appendChild(header_text);
//把标题添加到页面主体
document.body.appendChild(header);
//把列表添加到页面主体
document.body.appendChild(list);
}
addLoadEvent(displayAccessKeys);
displayAccessKeys.js
9 CSS-DOM
文档的每个元素节点都有一个属性style。style属性包含着元素的样式，查询这个属性将返回一个对象而不是一个简单的字符串。样式都存放在这个style对象的属性里：element.style.property。不仅文档里的每个元素都是一个对象，每个元素都有一个style属性，它们也是一个对象。
当需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。例如CSS属性font-family变为DOM属性fontFamily。且不管CSS样式属性的名字里有多少个连字符，DOM一律采用驼峰命名法表示它们。
style对象只包含在HTML代码里用style属性声明的样式。在外部样式表和文档的<head>部分里声明的样式不会进入style对象。然而，style对象的各个属性都是可读写的，不仅可以通过某个元素的style属性去获取样式，还可以通过它去更新样式。虽然不应该利用DOM去创建重要的内容，但可以利用DOM对文档的样式做一些小增强。
还可以用element.className = value来设置样式。
10 用javascript实现动画效果
JavaScript函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行。该函数带有两个参数：第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间后才开始执行第一个参数所给出的参数：setTimeout("function", interval); 在绝大多数时候，把这个函数调用赋值给一个变量将是个好主意：variable = setTimeout("function", interval);
如果想取消某个正在排队等待执行的函数，就必须事先像上面这样把setTimeout函数的返回值赋值给一个变量。可以使用clearTimeout函数来取消”等待执行“队列里的某个函数。这个函数需要一个参数---保存着某个setTimeout函数调用返回值的变量。
JavaScript允许我们为元素创建属性：element.property = value; 这很像是在创建一个变量，但区别是这个变量专属于某个特定的元素。
HTML代码：
<p id="message">Hello World!</p>
JS代码：
function moveElement(elementID, final_x, final_y, interval) {
if(!document.getElementsByTagName || !document.createElement || !document.createTextNode)
return false;
if(!document.getElementById(elementID))
return false;
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);
var dist = 0;
if(xpos == final_x && ypos == final_y) {
return true;
}
if(xpos < final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x) {
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y){
dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat, interval);
}
12 一些整理
12.1 form对象
文档中的每个表单元素都是一个form对象，每个form对象都有一个element.length属性。这个属性返回表番中的包含的表单元素的个数：form.elements.length。这个返回值与childNodes.length不一样，后者返回的是元素中包含的所有节点的个数。而form对象的elements.length属性只关心那些表单的元素，如input、textarea等等。
相应的，表单中的所有字段都保存在form对象的elements属性中。也就是说，form.elements是一个包含所有表单元素的数组。同样，这个属性与childNodes属性也不一样，后者也是一个数组。childNodes数组返回的是所有节点，而elements数组则只返回input、select、textarea以及其他表单字段。
elements数组中的每个表单元素都有自己的一组属性。比如：value属性中保存的就是表单元素的当前值：element.value，等价于element.getAttribute("value");
JavaScript DOM编程艺术 读书笔记的更多相关文章
- 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编程艺术读书笔记(四)
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
- 《JavaScript DOM编程艺术》笔记一
1.CSS: 继承是CSS技术中的一项强大功能,节点树上的各个元素将继承其父元素的样式属性. 2.3种获取DOM元素方法:getElementById返回一个对象,getElementsByTagNa ...
随机推荐
- 手把手教你写css3通用动画
之前接了几个微信里的项目,类似电子邀请函,什么分析报告这样的项目, 对css3动画要求十分高,每个页面客户几乎都有天马行空的想法,或者说设计师有这样的想法.众所周知css3里的keyframe写好了就 ...
- C#异步了解一下
如何让你的代码在“同一时间”干着两件件事呢?比如说,在初始化加载配置的同时,UI界面能够响应用户的各种点击事件.而不置于卡死,特别是出现如下面这种情况的时候,对于用户来说是很崩溃的.
- Python｜花了一天，为大家整理的一套来自外国大佬的密码速查表
简单的HTTPS服务器 检查证书信息 输出 生成自签名证书 输出 准备一个签名注册请求 输出 生成无密码的RSA秘钥文件 用一个私钥给文件签名 输出 从签名验证一个文件 输出 通过pem文件做RSA加 ...
- spring boot接口 支持https
1.拥有证书,可自己生成测试用javatool生成 keytool -keystore [keyname].jks -genkey -alias tomcat -keyalg RSA 接下来输入相关信 ...
- ADVICE FOR SHORT-TERM MACHINE LEARNING RESEARCH PROJECTS（短期机器学习研究的建议）
– Tim Rocktäschel, Jakob Foerster and Greg Farquhar, 29/08/2018 Every year we get contacted by stude ...
- 从源码安装opencv
操作系统为Debian9,由于使用apt-get安装在/usr/lib目录下的opencv可能会造成一些项目上的头文件错误问题,所以选择了从源码安装. 选择opencv3.4.1, 进入https:/ ...
- Python 3 学习笔记之——基础语法
1. a, b = a, a + b 先计算右边表达式,然后再同时赋值给左边. 2. 条件控制和循环语句 条件控制 if condition_1: statement_block_1 elif con ...
- POJ 2182 / HDU 2711 Lost Cows（平衡树）
Description N (2 <= N <= 8,000) cows have unique brands in the range 1..N. In a spectacular di ...
- ng2模板语法/内置指令速查表
https://www.angular.cn/docs/ts/latest/guide/cheatsheet.html
- html框架集 target