JavaScript DOM 编程艺术

1.javaScript 简史

2.javaScript 语法

2.1准备工作

<head>标间中

<head>
    <script type="text/javascript">
        javascript goes here
    </script>
</head>

引入外部文件

<head>
    <script type="text/javascript" src="file.js"></script>
</head>

放在HTML标签最后

<body>
    <script type="text/javascript" src="file.js"></script>
</body>

程序设计语言分为解释型和编译型两大类。Java或C＋＋等语言需要一个编译器（compiler）。编译器是一种程序，能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。
解释型程序设计语言仅需要解释器。web浏览器负责完成Javacript语言解释执行工作。

2.2语法

变量区分大小写，JavaScript变量允许包含数字、字母、美元符号和下滑线。不允许变量名中包含空格或标点符号。

数据类型

字符串
数值
布尔值
数组

声明数组

var beatles = Array(4);
var beatles = Array();//可以不给元素个数

填充数组

beatles[index] = element;

声明数组同时进行填充

var beatles = Array("John","Paul","Ringo");
var lennon = ["John",1940,false];//使用方括号，不明确表明创建数组。不同类型的数据可以混合存入一个数组。

数组可以包含其他数组

var lennon = ["John",1940,false];
var beatles = lennon;
beayles[0][0] = "John";

关联数组

 var lennon = Array();
lennon["name"] = "John";
lennon[''year"] = 1940;

对象

创建对象, 使用Object关键字

var lennon = Object();
lennon.name = "John";
lennon.year = 1940;

花括号创建对象

var lennon = {name = "John",year:1940};

2.3 操作

算数操作

拼接

var message = "I am feeling " + "happy";

2.4 条件语句

比较操作符(< = > ==)

(===)全等操作符。不仅比较值，还比较类型。
相等操作符（＝＝）false 和空字符串相等

逻辑操作符（&& || !）

2.5 循环语句

while循环
for 循环

2.6函数

function name(arguments) {
  statements;
}

变量的作用域

如果某个函数中使用了 var,那个变量就将视为一个局部变量。
没有使用var,那个变量就将视为一个全局变量，如果脚本里已经存在一个与之同名的全局变量，这个函数会改变这个全局变量的值。

2.7对象

属性和方法访问对象里面的数据

用new 关键字，创建对象实例

var Jhno = new person

内建对象

Array
Math
Date
...

宿主对象（浏览器提供的对象）

Form
Image
Element

用户自定义对象

3. DOM

D（document，文档） O （object，对象） M （model，模型）

节点

元素节点（<body> <p> <ul>）
文本节点 (<p>text</p>)
属性节点 (title="this is a title")

获取元素

getElementById
返回一个对象object

document.getElementById("sale");

getElementsByTagName
返回一个数组

var item = document.getElementsByTagName("li");
for (i=0;i<item.length;i++) {
    alert(typeof item[i]);
}

获取文档元素个数总数

var  item= document.getElementsByTagName("*").length;

getElementsByClassName
返回一个数组

指定多个类名，用空格隔开。

document.getElementsByClassName("important sale");

自己实现getElementsByClassName(适用于新老浏览器)

function getElementsByClassName(node,className) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(className);
  } else {
    var results = new Array();
    var elems = node.getElementsByTagName("*");
    for (i=0;i<elems.length;i++) {
       if (elems[i].className.indexof(className) != -1) {
          results[results.length] = elems[i];
        }
    }
    return results;
  }
}

var shopping = document.getElementsById("purchases");
var sales = getElementsByClassName(shopping,"sale");

获取和设置属性

getAtrribute


object.getAttribute(attribute);

var paras = document.getElementsByTagName("p");
for (i=0;i<para.length;i++) {
  var title_text = paras.getAttribute("title");
      if(title_text) {
        alert(title_text);
      } 
}

setAttribute

var shopping = document.getElementById("purchase");
shopping.setAttribute("title","brand new title text");

4. javaScript图片库

gallery.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="styles/layout.css">
</head>
<body>
    <h1>Snashot</h1>
    <ul id="imagegallery">
        <li>
            <a href="Images/fireworks.png" title="A fireworks dispaly" onclick="showPic(this)" ></a>
        </li>
        <li>
            <a href="Images/coffee.png" title="A cup of coffee" onclick="showPic(this); return false;" ></a>
        </li>
        <li>
            <a href="Images/rose.png" title="A red,red rose"  onclick="showPic(this); return false;"></a>
        </li>
        <li>
            <a href="Images/bigben.png" title="The famous clock" onclick="showPic(this); return false;"></a>
        </li>
        
    </ul>
    <img id="placeholder" src="Images/placeholder.png" alt="my images gallery"> 
    <p id="description">chose an images</p> 

    <script type="text/javascript" src="scripts/showPic.js"></script>

</body>
</html>

showPic.js

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;
}

childNodes属性

在一颗节点数上，childNodes属性可以获取任何一个元素所有的子元素，它是一个包含这个元素全部子元素的数组。
＊由chileNodes属性返回的数组包含所有类型的节点。

function countBodyChildren(){
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.childNodes.length);
}
//页面加载时调用countBodyChildren函数
window.onload = countBodyChildren;

nodeType属性

元素节点的nodeType 属性值是1。
属性节点的nodeType属性值是2。
文本节点的nodeType属性值是3。

nodeValue属性

用来得到一个节点的值

var description = document.getElementById("description");
alert(deacription.childNode[0].nodeValue);

fristChild 和 lastChild 属性

childNodes数组第一个和最后一个元素

5. 最佳实践

window.open(url,name,features);

url:新窗口网页URL地址
name：新窗口名字
features: 新窗口各种属性，用逗号隔开

function popUp(winURL) {
  window.open(winURL,"popUp","width = 320, height = 430");

“javascript：”伪协议

<a href="javascript:popUp('http://www.baidu.com/');">Example</a>

window.onload

当window对象触发onload事件时，document对象已经存在

window.onload = function() {
    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;
            }
        }

    }
}

性能优化

尽量少访问DOM和尽量减少标记
合并和放置脚本
压缩脚本

6.图片库改进

javascript和html分离

添加事件处理函数

function prepareGallery(){
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var link = gallery.getElementsByTagName("a");
    for ( var i =0; i < link.length ; i++) {
        link[i].onclick = function() {
            return !showPic(this);
            }
        }
}

共享onload事件

只有最后那个会被执行
window.onload = firstFunction;
window.onload = secondFunction;

创建匿名函数
window.onload = function() {
firstFunction();
secondFunction();
}

解决方案

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

最终优化代码

gallery.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="styles/layout.css">
</head>
<body>
    <h1>Snashot</h1>
    <ul id="imagegallery">
        <li>
            <a href="Images/fireworks.png" title="A fireworks dispaly" >
            <img src="Images/fireworks.png" alt="Fireworks">
            </a>
        </li>
        <li>
            <a href="Images/coffee.png" title="A cup of coffee" >
            <img src="Images/coffee.png" alt="Coffee">
            </a>
        </li>
        <li>
            <a href="Images/rose.png" title="A red,red rose" >
                <img src="Images/rose.png" alt="Rose">
            </a>
        </li>
        <li>
            <a href="Images/bigben.png" title="The famous clock" >
                <img src="Images/bigben.png" alt="Big Ben">
            </a>
        </li>
        
    </ul>
    <img id="placeholder" src="Images/placeholder.png" alt="my images gallery"> 
    <p id="description">chose an images</p>

    <script type="text/javascript" src="scripts/showPic.js"></script>

</body>
</html>

showPic.js

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) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var link = gallery.getElementsByTagName("a");
    for ( var i =0; i < link.length ; i++) {
        link[i].onclick = function() {
            return !showPic(this);
            }
        }
}

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

addLoadEvent(prepareGallery);

layout.css

body{
    font-family: "Helvetica","Arital",serif;
    color: #333;
    background-color: #ccc;
    margin: lem 10%;
}
h1{
    color: #333;
    background-color: transparent;
}
a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul{
    padding: 0;
}
li{
    float: left;
    padding: 1em;
    list-style: none;
}
img{
    display: block;
    clear: both;

}
#imagegallery{
    list-style: none;
}
#imagegallery li {
    display: inline;
}
#imagegallery li a img {
    border: 0;
}

DOM Core 和 HTML-DOM

document.getElementsByTagName("from"); //DOM Core
document.forms; //HTML-DOM

var source = whichpic.getAttribute("href");//DOM Core
var = whichpic.href;//HTML-DOM

7.动态创建标签

传统的方法

document.write
使用处需要插入<script>标签

<body>
  <script>
      document.write("<p> This is inserted </p>");
  </script>
</body>

innerHTML属性

<div id="testdiv"></div>

window.onload = function() {
    var testdiv = document.getElementById("testdiv");
    testdiv.innerHTML = "<p> I inserted <em>this</em> content</p>"
}

DOM 方法

createElement 方法
创建一个新元素document.createElement(nodeName);

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

appendChild方法
插入子节点parent.appendChild(child);

var para = document.createElement("p");
testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);

createTextNode 方法
创建一个文本节点document.createTextNode(text);

window.onload = function () {
    var para = document.createElement("p");
    var text = document.createTextNode("Hello world!");
    para.appendChild(text);
    var testdiv = document.getElementById("testdiv");
    testdiv.appendChild(para);
}

＊图片库动态添加元素

在已有元素前面插入一个元素
DOM提供的insertBefore
parentElement.inserBefore(newElement,targetElement);
(1)新元素：你想插入的元素（newElement）
(2)目标元素：你想把这个新元素插入到哪个元素（targetElement）之前
(3)父元素：目标元素的父元素（parentElement）
targetElement元素的parentNode属性就是父元素parentElement
在现有元素后插入一个新元素

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

nextSibling下一个兄弟元素
如果目标元素是最后一个元素，则把新元素直接添加到目标元素后面。如果目标元素不是最后一个元素，则把新元素插入到目标元素下一个兄弟元素的前面。

图片库第二次改进代码

gallery.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="styles/layout.css">
</head>
<body>
    <h1>Snashot</h1>
    <ul id="imagegallery">
        <li>
            <a href="Images/fireworks.png" title="A fireworks dispaly" >
            <img src="Images/fireworks.png" alt="Fireworks">
            </a>
        </li>
        <li>
            <a href="Images/coffee.png" title="A cup of coffee" >
            <img src="Images/coffee.png" alt="Coffee">
            </a>
        </li>
        <li>
            <a href="Images/rose.png" title="A red,red rose" >
                <img src="Images/rose.png" alt="Rose">
            </a>
        </li>
        <li>
            <a href="Images/bigben.png" title="The famous clock" >
                <img src="Images/bigben.png" alt="Big Ben">
            </a>
        </li>
        
    </ul>
    <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

showPic.js

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

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/placeholder.png");
    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 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) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var link = gallery.getElementsByTagName("a");
    for ( var i =0; i < link.length ; i++) {
        link[i].onclick = function() {
            return !showPic(this);
            }
        }
}

addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);

Ajax

Ajax对页面的请求以异步的方式发送到服务器，服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。

XMLHttpRequest 对象
这个对象充当着浏览器中脚本（客户端）与服务器之间的中间人角色。javascript通过这个对象可以自己发送请求，同时也自己处理。

ajax.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax</title>
</head>
<body>
    <div id="new"></div>
    
    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>
    <script type="text/javascript" src="scripts/getHttpObject.js"></script>
    <script type="text/javascript" src="scripts/getNewContent.js"></script>
</body>
</html>

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();
}

getNewContent.js
当页面加载完成后，发起一个GET请求，请求与ajax.html同一目录下的example.txt文件。


function getNewContent() {
    var request = getHttpObject();
    if (request) {
        request.open("GET","example.txt",true);
        request.onreadystatechange = function(){
            if (request.readyState == 4){
                //alter("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{
        alter('sorry,your brower does\'t suppot XMLHttpRequest');
    }
}
addLoadEvent(getNewContent);

onreadystatechange事件处理函数，会在服务器给XMLHttpRequest对象发送回响应的时候被触发执行。

readyState属性的值
＊0表示未初始化
＊1表示正在加载
＊2表示加载完成
＊3表示正在交互
＊4表示完成

8.充实文档的内容

网页内容

explanation.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Explaining the Document Object Model</title>
   <link rel="stylesheet" type="text/css" href="styles/typography.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.w3.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 document.
       </p>
   </blockquote>
   <p>
       It is an <abbr title="Application programming interface">API</abbr>that can be used to navigate <abbr title="HyperText MarKup Language">HTML</abbr> and <abbr title="eXtensible MarKup Language">XML</abbr> document.
   </p>
   <ul id="navigation">
       <li><a href="index.html" accesskey="1">Home</a></li>
       <li><a href="search.html" accesskey="4">search</a></li>
       <li><a href="contact.html" accesskey="9">Contact</a></li>       
   </ul>
   <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
   <script type="text/javascript" src="scripts/displayCitations.js"></script>
   <script type="text/javascript" src="scripts/displayAccessKeys.js"></script>
</body>
</html>

显示“缩略语”列表

displayAbbreviations.js

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

function displayAbbreviations() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    //取得所有缩略词
    var abbreviations = document.getElementsByTagName('abbr');
    if (abbreviations.length < 1) return false;
    var defs = new Array();
    //遍历缩略词
    for (i=0;i<abbreviations.length;i++){
        if(abbreviations[i].childNodes.length < 1) continue;//abbr 元素
        var definition = abbreviations[i].getAttribute("title");
        var key = abbreviations[i].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; //浏览器地雷 abbr元素
    //创建标题
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbrevitaions");
    header.appendChild(header_text);
    //把标题添加到页面主体
    document.body.appendChild(header);
    //把定义列表添加到页面主体
    document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

显示文献来源链接表

displayCitations.js

function displayCitations () {
    if (!document.getElementsByTagName || !document.createElement ||!document.createTextNode) return false;
    //取得所有引用
    var quotes = document.getElementsByTagName("blockquote");
    //遍历引用
    for (i=0;i<quotes.length;i++) {
        //如果没有cite属性，继续循环
        if(!quotes[i].getAttribute("cite")) continue;
        //保存cite属性
        var url = quotes[i].getAttribute("cite");
        //取得引用中所有元素节点
        var quotesChildern = quotes[i].getElementsByTagName("*");
        if (quotesChildern.length < 1) continue;//如果没有元素节点，继续循环
        //取得引用中最后一个元素节点
        var elem = quotesChildern[quotesChildern.length-1];
        //创建标记
        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        link.setAttribute("href",url);
        var superscript = document.createElement("sup");
        superscript.appendChild(link);
        //把标记添加到引用中的最后一个元素节点
        elem.appendChild(superscript);
    }
}
addLoadEvent(displayCitations);

显示快捷键清单

displayAccesskeys.js

function displayAccessKeys (){
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    //取得文档中所有链接
    var link = document.getElementsByTagName("a");
    //创建一个数组，保存访问键
    var akeys = new Array();
    //遍历链接
    for (var i=0;i<link.length;i++){
        var current_link = link[i];
        if (!current_link.getAttribute("accesskey")) continue;
        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);

9.CSS-DOM

三位一体的网页
＊结构层（html）
＊表示层（CSS）
＊行为层（DOM）

Style属性

Style属性返回一个对象object，用 . 访问Style属性具体的内容。
Style属性只能返回内嵌样式。

获取样式 element.style.property

var para = document.getElementById("example");
alert(para.style.color);

设置样式element.style.property ＝ value

var para = document.getElementById("example");
para.style.color ＝ black;

根据元素在节点树里的位置来设置样式

网页内容

给紧跟h1后的一个元素添加样式
story.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Man bites dog</title>
    <style type="text/css">
        .intro{
    font-weight: bold;
    font-size: 1.2em;
}
    </style>
</head>
<body>
    <h1>Hold the front page</h1>
    <p>this frist paragraph leads you in.</p>
    <p>Now you get the nitty-gritty of the story.</p>
    <p>The most important information is delivered frist.</p>
    <h1>Extra!Extra!</h1>
    <p>Further development are unfloding.</p>
    <p>you can read all about it here.</p>
    <script type="text/javascript" src="scripts/addLoadevent.js"></script>
    <script type="text/javascript" src="scripts/styleHeaderSiblngs.js"></script>
</body>
</html>

styleHeaderSiblings.js

function styleHeaderSiblngs(){
    if(!document.getElementsByTagName) return false;
    var header = document.getElementsByTagName("h1");
    var elem;
    for (var i=0; i < header.length; i++){
        elem = getNextElement(header[i].nextSibling);
        addClass(elem,"intro");
        
    }
}
function getNextElement(node){
    if(node.nodeType == 1) {
        return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);
    }
    return null;
}
function addClass(element,value){
    if(!element.className){
        element.className = value;
    }else{
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}
addLoadEvent(styleHeaderSiblngs);

* className属性`element.className = value`

elem.setAttribute("class","intro");
elem.className = "intro";

class属性追加样式，而不是直接替换

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

根据某种条件反复设置某种样式

网页内容

itinerary.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cities</title>
    <link rel="stylesheet" type="text/css" href="styles/format.css">
</head>
<body>
    <table>
        <caption>Itinerary</caption>
        <thead>
            <tr>
                <th>When</th>
                <th>Where</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>June 9th</td>
                <td>Portland,<abbr title="Oregon">OR</abbr></td>
            </tr>
            <tr>
                <td>June 10tf</td>
                <td>Seattle,<abbr title="Washington">WA</abbr></td>
            </tr>
            <tr>
                <td>June 12th</td>
                <td>Saccramento,<abbr title="California">CA</abbr></td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>
    <script type="text/javascript" src="scripts/stripeTables.js"></script>
    <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
    <script type="text/javascript" src="scripts/highlightRows.js"></script>
</body>
</html>

format.css

body{
    font-family: "Helvetica","Arial",sans-serif;
    background-color: #fff;
    color: #000;
}
table{
    margin: auto;
    border:1px solid #699;
}
caption{
    margin: auto;
    padding: .2em;
    font-size: 1.2em;
    font-weight: bold;
}
th{
    font-weight: normal;
    font-style: italic;
    text-align: left;
    border:1px dotted #699;
    background-color: #9cc;
    color: #000;
}
th,td{
    width: 10em;
    padding: .5em;
}

/*css3* 表格行的背景颜色*/
/*
tr:nth-child(odd) { background-color: #ffc; }
tr:nth-child(even) {background-color: #fff;}
*/
/*tr:hover{ font-weight: bold; }*/

*CSS3 设置奇数行和偶数行样式

tr:nth-child(odd) { background-color: #ffc; }
tr:nth-child(even) {background-color: #fff;}

＊javascript为表格添加斑马线效果
stripeTable.js

function stripeTables(){
    if(!document.getElementsByTagName) return false;
    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;
            }
        }
    }
}
addLoadEvent(stripeTables);

*鼠标指针悬停在某表格上方时，把该文本加黑加粗。

function highlightRows(){
    if (!document.getElementsByTagName) return false;
    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";
        }
    }
}
addLoadEvent(highlightRows);

10. javaScript实现动画效果

1.时间

setTimeout
让某个函数在经过一段预定的时间之后才开始执行。
variable = setTimeout("function",interval)
第一个参数是一个字符串，其内容是需要执行的那个函数的名字。
第二个参数是一个数值，以毫秒为单位设置间隔时间。
clearTimeout
取消正在排队等待执行的函数
clearTimeout(variable)

2.时间递增量

pareInt
把字符串里面的数值信息提取出来
pareInt(string)

pareInt("39 steps");//39 steps => 39
pareInt(elem.style.left);//50px => 50

moveElement.js

function moveElement(elementID,final_x,final_y,interval){
    if (!document.getElementById) 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){
        xpos--;
    }
    if (ypos < final_y){
        ypos++;
    }
    if (ypos > final_y){
        ypos--;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);

}

＊变量作用域问题

    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement = setTimeout(repeat,interval);

每当用户把鼠标悬停在某个链接上，不管上一次调用是否已经把图片移动到位，moveElement函数都会被再次调用并试图把这个图片移动到另一个地方。
如果用户移动鼠标速度较快，积累在setTimeout队列里面的时间就会导致动画效果产生滞后。为消除滞后的现象，可以用clearTimeout函数

clearTimeout(elem.movement);

如果没有设置movement变量之前就执行这条语句，会出现错误。
不能使用局部变量，clearTimeout无法工作。

var  movement = setTimeout(repeat,interval);

*解决方案

只与某个特定元素相关的变量
Javascript允许为元素创建属性
element.prpperty = value

elem.movement = setTimeout(repeat,interval);

3.改进动画效果

动画移动速度，随着距离目标长度而改变。

   if (xpos < final_x){
        dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }

    elem.style.left = xpos + "px";

Math.ceil(number)
把浮点数number向“大于”方向舍入为与之最接近的整数。
Math.floor(number)
把浮点数number向“小于”方向舍入为与之最接近的整数。
Math.round(number)
把浮点数number舍入为与之最接近的整数。

4.生成HTML标记

prepareSlideshow.js

function prepareSlideshow(){
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById('linklist')) return false;
    var slideshow = document.createElement("div");
    slideshow.setAttribute("id","slideshow");
    var preview = document.createElement("img");
    preview.setAttribute("src","images/topics.png");
    preview.setAttribute("alt","buiding blocks of web design");
    preview.setAttribute("id","preview");
    slideshow.appendChild(preview);
    var list = document.getElementById('linklist');
    insertAfter(slideshow,list);
    var links = list.getElementsByTagName("a");
    links[0].onmouseover = function(){
        moveElement("preview",0,0,10);
    }
    links[1].onmouseover = function(){
        moveElement("preview",-100,0,10);
    }
    links[2].onmouseover = function(){
        moveElement("preview",-200,0,10);
    }
    links[3].onmouseover = function(){
        moveElement("preview",-300,0,10);
    }
}
addLoadEvent(prepareSlideshow);

10.综合示例

示例地址：http://dom.bigwinger.com/

最后编辑于：2018.08.03 22:55:40

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,907评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,987评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,298评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,586评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,633评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,488评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,275评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,176评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,619评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,819评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,932评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,655评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,265评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,871评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,994评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,095评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,884评论 2赞 354

JavaScript DOM 编程艺术

1.javaScript 简史

2.javaScript 语法

2.1准备工作

2.2语法

数据类型

声明数组

填充数组

声明数组同时进行填充

数组可以包含其他数组

关联数组

2.3 操作

拼接

2.4 条件语句

2.5 循环语句

2.6函数

变量的作用域

2.7对象

3. DOM

指定多个类名，用空格隔开。

自己实现getElementsByClassName(适用于新老浏览器)

4. javaScript图片库

childNodes属性

nodeType属性

nodeValue属性

fristChild 和 lastChild 属性

5. 最佳实践

window.open(url,name,features);

“javascript：”伪协议

window.onload

性能优化

6.图片库改进

javascript和html分离

共享onload事件

最终优化代码

DOM Core 和 HTML-DOM

7.动态创建标签

＊图片库动态添加元素

图片库第二次改进代码

Ajax

8.充实文档的内容

显示“缩略语”列表

显示文献来源链接表

显示快捷键清单

9.CSS-DOM

Style属性

* className属性element.className = value

class属性追加样式，而不是直接替换

10. javaScript实现动画效果

1.时间

2.时间递增量

＊变量作用域问题

*解决方案

3.改进动画效果

4.生成HTML标记

10.综合示例

推荐阅读更多精彩内容

* className属性`element.className = value`