JavaScript DOM 编程艺术

作者: yinxmm | 来源:发表于2018-08-02 16:43 被阅读0次

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/

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`