DOM

最新推荐文章于 2024-12-11 05:17:55 发布

九九九角银

最新推荐文章于 2024-12-11 05:17:55 发布

阅读量778

点赞数

分类专栏： JSDOM

本文链接：https://blog.csdn.net/weixin_39918105/article/details/100107580

版权

JSDOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了DOM的基本操作，包括通过getElementById、getElementsByTagName和getElementsByClassName获取元素，以及如何获取和设置属性。接着，讲解了JS图片库的实现，涉及到事件处理函数、childNodes属性、nodeType、nodeValue等。此外，文章还讨论了DOM性能、动态创建元素、图片库的改进版、Ajax异步加载以及CSS-DOM中的样式设置和分离原则。最后，提到了HTML5和实例应用。

摘要由CSDN通过智能技术生成

DOM

第三章获取的元素有3种方法：

1.getElementById

document.getElementById(id)

eg:

document.getElementByld(“purchases”)

2.getElementByTagName

getElementByTagName 方法返回一个对象的数组，每个对象分别对于的文档里有着给定标签的一个元素。

【注意】getElementByTagName 与上述的getElementById 相似，但是的TagName 返回的是一个对象数组

例如：document.getElementByTagName（“li”）这个调用的则是对于的document对象的每一个列表。

与任何数组的一样，可以利用 length熟悉进行的查询该数组里的元素个数。

3.getElementByClassName

可以让我们的通过的class属性种的类名来访问的元素。

document.getElementByClassName(class)

eg:

document.getElementByClassName(“sale”)

使用这个办法还可以查找同时有多的类名的元素。

例如：有一个的类 sale 又叫 important 。则想要获取的该的元素可以在名字中间空格分隔类名即可。

document.getElementByClassName(“sale important”) 【类名的顺序不受影响】

4.获取和设置属性

查询 getAttribute

object.getAttribute(“title”) 【getAttribute方法不属于document对象，所以不能直接通过的document对象直接调用，它只能通过元素节点对象调用】

var paras = document.getElementByTagName(“p”);

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

var title _text = paras[i].getAttribute(“title”);

if(title_text) alert(title_text);

// if(title_text) 相当于if(title_text !=null)

}

上述代码的是查询的p元素，并且它有title 的属性值

设置 setAttribute

object. setAttribute(attribute, value) // 对象. setAttribute(对象的属性，属性值 )

eg:

var paras = document.getElementByTagName("p");

for (var i = 0; i<paras.length;i++){
 var  title _text= paras[i].getAttribute("title");
 if(title_text){
	paras[i].setAttribute("title","brand new title text");
	alert(paras[i].getAttribute("title"));
}}

上述代码是获取全部带有的title属性的

元素，然后把他们的是title值修改为 brand new title text

【对于setAttribute 来说，做出的修改后不会反应在文档本身的源代码中，这是由于的DOM的工作模式，先加载文档的静态内容，再动态的刷新，动态刷新不影响文档的静态内容。】

第四章 JS图片库

4.1 标记

为了完成JS库图库，我们需要准备一些图片，并为这些图片创建一个链接。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js图片库</title>
	</head>
	<body>
		<h1>Snapshots</h1>
		<ul>
			<li>
				<a href="images/01.jpeg"  title="people" >people</a>
			</li>
			<li>
				<a href="images/02.jpeg" title="haimian" >haimian</a>
			</li>
			<li>
				<a href="images/03.jpeg"   title="erji" >erji</a>
			</li>
			<li>
				<a href="images/04.jpeg" title="huluwa" >huluwa</a>
			</li>
		</ul>
		<img id="placeholder" src="images/05.jpg"  alt="my image gallery"/>
	</body>
</html>

4.3事件处理函数

添加事件处理函数的语法：

event=“JavaScript statement(s)”

js代码包含在一对引号之间，可以把任意数量的js语句放在这对引号之间，只要把各条语句用分号隔开就可以。

οnclick=“showPic(this);”//this表示这个对象，本例中即这个元素标签

事件处理函数的工作机制：在给某个元素添加了世间处理函数后，一旦事件发生，相应的js代码就会执行。被调动的js会返回一个值，这个值将会被传递给那个时间处理函数。本例中当链接被点击时，如果执行的js代码返回true，事件处理函数就认为这个链接被点击了，反之如果返回的值是false，onclick事件处理函数就认为这个链接没有被点击。return false;就会将false返回给事件处理函数，所以这个链接的默认行为没有被触发（打开图片查看器。）

4.4.1 childNodes 属性

在一颗节点树上，childNodes 属性可以用来获取任何一个元素的所有的子元素，它是一个包含这个元素全部子元素的数组。

语法： element.childNodes

eg:

var body_element = document.getElementsByTagName("body")[0];
//因为是获取的body 元素，而每份文档只有一个body元素，所有它将是getElementsByTagName("body")方法所返回的数组的第一个也是仅有的一个。
body_element.childNodes  //获取body元素的所有子元素。

element.childNodes用途：

求其长度

element.childNodes获取是该元素的子元素数组，所有就可以求其该元素的子元素个数。

即：element.childNodes.length;

function countBodyChildren(){
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.childNodes.length);
}

该函数的将弹出的一个对话框，显示body的子元素总数。

如果想要这个函数在页面加载的时候弹出，则需要使用onload事件处理函数，下面代码添加在代码末端。

window.onload = countBodyChildren;

4.4.2 nodeType属性

语法：node.nodeType

实例：

获取body元素的节点类型：

document.body.nodeType;

结果：

nodeType属性的值是一个是数字，其属性值有12种，但其实有三种最实用

a.元素节点的nodeType属性值为1。

b.属性节点的nodeType属性值为2。

c.文本节点的nodeType属性值为3。

4.4.5 nodeValue属性

nodeValue 属性设置或返回指定节点的节点值。

注释：如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值（element.childNodes[0].nodeValue）。

	<p id="description">Choose an image.</p>

    var text = whichpic.getAttribute("title");
    var description=document.getElementById("description");
    aleat(description.nodeValue);

如果想要获取

元素的文本内容，如果我们直接获取 aleat(description.nodeValue); 结果返回的是一个空值，因为的

元素本身的nodeValue 的值是一个NULL，如果想获取的p标签的文本内容，其文本内容其实是p标签的第一个子节点，只需要把

    aleat(description.childNodes[0].nodeValue);

这样就获取到了p标签的本文元素。

4.4.6 firstChild 和 lastChild属性

node.firstChild = node.childNodes[0]

node.lastChild 代表childNodes 数组的最后一个元素。

node.lastChild = node.childNodes[ node.childNodes.length-1]

alert(description.firstChild.nodeValue)

nodeValue属性的用途并非仅限于此，它不仅可以用来检索节点的值，还可以用来设置节点的值。

   var text = whichpic.getAttribute("title");
       var description=document.getElementById("description");
      description.firstChild.nodeValue=text;

text的值传给 p标签第一个的子节点，设置为点击的title 的文本内容。

最终的代码清单为：

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

代码解析：

1.当图片库的某个图片链接被点击道，这个是链接的title属性值就会传给text并被保存在text变量中。

2.得到p标签的id description 并它保存在变量description中。

3.把description对象的第一个子节点的nodeValue属性值设置为变量text的值。

第五章

1.平稳退化

2.分类JS

3.向后兼容

4.性能考虑

a.尽量减少访问DOM和尽量减少标记

如果要用搜索同一个变量，我们可以把第一次搜索到的结果保存在一个变量中。

b.合并和放置脚本。

尽量减少的外部文件，合并起来。减少加载页面时激发送的请求数量。而减少请求数量通常都是性能优化时候所首先考虑的。

在放置脚本的时候，把所有的

c.压缩脚本

用代码压缩工具。

第六章图片库改进版

6.32 共享onload事件

假如有两个函数： firstFunction 和 secondFunction 。如果他们都想要的在页面加载时得到执行，我们不能直接。

window.onload = firstFunction ;
window.onload =  secondFunction ;

这样直接的解决的话，只有secondFunction会被执行。

解决方法1：

可以创建一个匿名函数来容纳这两个函数，然后把那匿名函数绑定子啊onload事件上即可。如：

window.onload =function(){
    firstFunction();
    secondFunction();
}

解决方法2：

addLoadEvent 函数

下面是该函数的完成的操作：

1.把现有的window.onload事件处理函数的值存入变量 oldonload

2.如果在这个处理函数的上还没有绑定任何函数，就像平时那样把新函数添加给他。

3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有的指令的末尾。形成一个队列

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

如果想把firstFunction 和 secondFunction 两个函数的添加进来。只需要

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

三元操作符

variable = condition? if true : if false ;

eg:

var text =whichpic.getAttribute("title") ? whichpic.getAttribute("title") : " ";

变量text 获取的getAttribute(“title”) ，如果title属性存在，变量text将被赋值为whichpic.getAttribute(“title”)。

如果不存在，变量text将被赋值为一个空字符串 " " 。

第七章动态创建标记

本章内容：

1.学习传统技术：document.write 和 innerHTML

2.深入剖析DOM方法： createElement、createTextNode、appendChild 和 insertBefore。

7.1.1 document.write

document对象的write()方法可以方便快捷地把字符串插入文档里。

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

结果页面显示：

This is inserted.

7.1.2 innerHTML属性

定义和用法

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

下面代码用来获取的html 的表格的行的tri的内容。

<html>
<head>
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("tr1").innerHTML);
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" 
value="Alert innerHTML of table row" />

</body>
</html>

输出结果：获取的id为 tr1 的里的内容

<th>Firstname</th>
<th>Lastname</th>

innerHTML属性可以用来读、写某给定元素里的HTML内容。

例如：想要直接在网页插入一段文本。

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

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

7.2 DOM方法

7.2.1 createElement 方法

定义和用法

createElement() 方法通过指定名称创建一个元素。

语法

document.createElement(nodename);

练习：

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

用DOM的方法，添加一个p元素节点，并把这个节点作为div 的第一个的子节点，

（div 元素节点已经有一个的子节点了，那是一个id属性节点，值是testdiv）

步骤：

1.创建一个新的元素。

document.createElement（nodeName）

document.createElement("p");

上述的方法的是并不能达到改变的页面的内容，只是创建了一个的新的元素p，如果的想要的插入的节点树中，你需要的一个东西来引用这个新创建出来的新节点。

【所有，当我们使用的createElement，就应该把新创建出来的新节点元素赋值给一个变量】

2.把这个新元素的插入节点树。

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

7.2.2 appendChild 方法

语法：

parent.appendChild(child)

用于上述的createElement 创建了一个的新节点，而它的就是帮它插入某个文档的节点的节点数的。

利用appendChild 把上述的p元素节点插入 testdiv元素

var para = document.createElement("p");  //创建一个的新节点 P 
var testdiv = document.getElementById("testdiv");  //获取的要插入的节点名称
testdiv.appendChild(para);  //插入新节点

在使用appendChild 方法时候，可以不用一些变量来引用父节点和子节点。把上述代码缩减成：

 document.getElementById("testdiv").appendChild( document.createElement("p"));

7.2.3 createTextNode 方法

定义： createElement 它只能创建元素节点。如果你想要（输入文本）创建一个文本节点，你就需要 createTextNode 方法。

createTextNode 语法与createElement 相似：

document.createTextNode(text);

例如下面语句将创建一个 Hello world 的文本节点

var txt = document.createTextNode("Hello world");

上面的代码也只是的创建一个的文本的节点，在DOM的世界中，仍属于的一个的孤儿。我们的需要通过的上面的appendChild 方法把这个文本节点插入的 p元素节点中。

window.onload  = function(){
    var para = document.createElement("p"); //创建一个P元素节点
    var testdiv = document.getElementById("testdiv"); //把这个P元素节点追加到test.html 文档中的一个元素节点上
    testdiv.appendChild(para); 
    var txt = document.createTextNode("Hello world!");  // 创建的一个文本节点
    para.appendChild(txt);  //把这个文本节点的追加到的刚才创建的p元素节点上
}

【appendChild方法还可以用来连接哪些尚未成为文档树一部分的节点。下面的代码跟上面的是一样的，虽然的代码的顺序不一样】

window.onload  = function(){
    var para = document.createElement("p"); //创建一个P元素节点
    var txt = document.createTextNode("Hello world!");  // 创建的一个文本节点
    para.appendChild(txt);  //把这个文本节点的追加到的刚才创建的p元素节点上
    var testdiv = document.getElementById("testdiv"); //把这个P元素节点追加到test.html 文档中的一个元素节点上
    testdiv.appendChild(para); 
}

7.2.4 一个更复杂的组合

用DOM的方法创建下面这段的代码。

<p>This is <em>my</em> content.</p>

window.onload  = function(){
    var para = document.createElement("p");
    var txt1 = document.createTextNode("This is ");  
  para.appendChild(txt1);
    var emphasis = document.createElement("em");
    var txt2  = document.createTextNode("my");
   emphasis.appendChild(txt2);
   para.appendChild(emphasis);
    var txt3 =document.createTextNode("content.");
    para.appendChild(txt3);
    var textdiv = document.getElementById("textdiv");
    textdiv.appendChild(para);
}

我们也可以先把所有的节点的都创建出来后，再把它们加到想要的位置。

window.onload  = function(){
    var para = document.createElement("p");
    var txt1 = document.createTextNode("This is ");  
    var emphasis = document.createElement("em");
    var txt2  = document.createTextNode("my");
    var txt3 =document.createTextNode("content.");
  para.appendChild(txt1);
   emphasis.appendChild(txt2);
   para.appendChild(emphasis);
    para.appendChild(txt3);
    var textdiv = document.getElementById("textdiv");
    textdiv.appendChild(para);
}

7.3 重回图片库

通过JS动态的创建出来

我们先编写一个函数 preparePlaceholder 放进showPic.js 文件中。

var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
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);

因为我们需要把 placeholder 和description 元素插入到文娱文档末尾的标签前，我们可以通过的标签名 “body”引用body标签

document.getElementsByTagName("body")[0].appendChild("placeholder");
document.getElementsByTagName("body")[0].appendChild("description");

也可以用HTML-DOM 提供的属性body

document.body.appendChild("placeholder");
document.body.appendChild("description");

7.3.1 在已有元素前插入一个新元素

insertBefore() 方法，把一个新元素插入到一个现有元素的前方。在调用该方法的时候，你必须告诉该方法三件事情。

1.新元素：

2.目标元素：插入哪个目表前

3.父元素：目标元素的父元素

语法：

parentElement.insertBefore(newElement,targetElement);

如果想要把的placeholder 和description 元素插入到图片清单前面，我们可以直接用：

var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder,gallery);
gallery.parentNode.insertBefore(description,gallery);

此时，变量gallery的parentNode 属性值是 body元素，所有placeholder 元素将被插入为body元素的新子元素，它被踏入到它的兄弟元素 gallery的前面。

7.3.2 在现有元素后插入一个新元素

1.编写insertAfter 函数

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;  //把目标元素的parentNode属性值 保存到变量里
    if(parent.lastChild ==targetElement){  // 检测目标元素是不是parent 的最后一个子元素
        parent.appendChild(newElement);  //如果parent的lastChild 属性值与目标元素 存在等于关系
                                         //是，等调用appendChild方法把新元素 加入到的parent 元素上
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
        //不是，就是新元素 插入到目标元素 与 目标元素的的下一个兄弟元素之间。目标元素下一个兄弟元素
        //即 目标元素的 nextSibling 属性。 
    }
}

2.nextSibling 属性。

定义：用insertBefore 方法把新元素插入到目标元素的下一个兄弟元素之前。

语法：

 parent.insertBefore(newElement,targetElement.nextSibling);

3.使用 insertAfter 函数

 var gallery = document.getElementById("imagegallery");
 insertAfter(placeholder,gallery);
 insertAfter(description,placeholder);

4.测试浏览器是否支持自己新增加的新的DOM方法：

	if(!document.createElement)  return false;
	if(!document.createTextNode) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("imagegallery")) return false;

7.3.3 图片库二次改进

此时 js 里有五个函数

addLoadEvent 函数
insertAfter 函数
preparePlaceholder 函数
prepareGallery 函数
showPic 函数

其中，

addLoadEvent 函数和 insertAfter 函数属于通用型函数，可以在很多的场合用上。

preparePlaceholder 函数负责创建一个 img 元素和一个p 元素。这个函数把这些新创建的元素插入到节点树里图片清单的后面。

prepareGallery 函数负责处理事件，这个函数将遍历处理图片库清单里的每一个链接。当用户点击的这些链接的其中一个的时候，就会的调用 showPic 函数。

showPic 函数负责把”占位符“图片的切换为目标图片。

prepareGallery 函数

7.4 Ajax 异步加载页面

第八章充实文档内容

8.4 显示“缩略语列表”

8.5 显示“文献来源链接表”

8.6 显示“快捷键列表”

第九章 CSS-DOM

9.1 三位一体

我们所看到的网页其实是由三层信息构成的一个共同体

结构层
表示层
行为层

9.1.1 结构层

结构层由HTML或者 XHTML 这类的标记语言负责创建。 <> 标签

9.1.2 表示层

表示层 是由 CSS 负责完成。

9.1.3 行为层

行为层负责内容应该如何响应事件这一问题。这是JS 和 DOM主宰的领域。

9.1.4 分离

我们可以

通过 (X）HTML 去搭建文档的结构

使用CSS 去设置文档的呈现效果

使用DOM脚本去实现文档的行为。

不过在这三个技术之间也存在着一些潜在的重叠的区域。例如：我们可以通过DOM来动态的 createElement 和appendChild 之类的改变的网页的结构。 CSS也可以的铜带的改变的元素的呈现效果。

9.2 style 属性

在文档里的每一个元素都是对象，每一个元素都有一个style 属性，该属性也是一个对象。

<p id="example" style="color:grey; font-family:'Arial',sans-serif;">
An example of a paragraph.
</P>

window.onload = function(){
    var para = document.getElementById("example");
}

9.2.1 获取样式

你能够通过的 para 变量所代表的

标签的样式，你可以查出某个元素在浏览器的所显示的颜色，

则我们需要调用 style对象的color 属性：

element.style.color

下面的为获取 p 标签的在网页显示的颜色：

alert("The color is" + para.style.color);

刚刚是p 标签还设置了另外一个的CSS的属性------- font-family:‘Arial’。这个属性的获取的方式与 color 属性获取右边不同，在JS中， font-family 中的 - 这个符号是减法操作符，JS会把它当作的减号的！！！！！

所有，在DOM 里，当你遇到需要用到中间带有减号的CSS属性， DOM要求要用驼峰命名法。

把 font-family 改为 fontFamily 即可。。

语法：

element.style.fontFamily

获取的 font-family 属性

window.onload = function(){
    var para = document.getElementById("example");
    alert("The font family is" + para.style.fontFamily);
}

不管CSS样式属性中有多少个连字符，在DOM里，我们都需要用到驼峰命名法。

例如： CSS ： background-color DOM : backgroundColor

font-weight fontWeight

在CSS中有速记属性，你可以把多个样式组合在一起写成一行，

<p id="example" style="color:grey; font:12px 'Arial',sans-serif;">

DOM能够解析想 font 这样的速记属性。如果查询 fontSize 属性时候，就可以获取到 12px 的值。

内嵌样式

内嵌样式不是一个好的行为，因为它把表现信息和结构混合在一起了。我们最好要把它变成一个的外部样式去设置样式。

p#example {
color :grey；
font:12px 'Arial',sans-serif;
}

把设置样式的代码存放在style.css 内作为一个外部样式，在html页面加入链接外部的代码：

<link rel="stylesheet" media="screen" href= "styles/styles.css" />

这样样式还是可以的像内嵌一样显示在页面上，不过是这时候已经不能通过是DOM style 属性所检索出来了。

如果是把样式添加到 example.html 文件部分，如

<head>
<style>
p#example {
color :grey；
font:12px 'Arial',sans-serif;
}
</style>
</head>

这样 DOM style 属性也是不能检索出来的！！！

总结： style属性只包含在HTML代码里用style属性声明的样式。

9.2.2 设置样式

许多的DOM属性只能读，但是在style 属性上，我们可以通过某个元素的style 属性去读取，还可以通过它去更新样式。语法：

element.style.property = value

例如：把上面的p标签的文字颜色修改为 black 。

<head>
	<script>
window.onload = function(){
    var para = document.getElementById("example");
    para.style.color = "black";
}
	</script>
</head>
<body>
<p id="example" style="color:grey; font-family:'Arial',sans-serif;">
An example of a paragraph.
</P>
</body>

style 对象的属性值一定要放在 “ ” 或 ‘ ’ 都有可以。

用赋值操作的符你可以设置任何一种样式属性，甚至如 font 之类的速记属性也可以：

para.style.font = "2em 'Times',serif";

9.3 什么时候该用DOM脚本设置样式

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

在CSS声明样式中，我们常见有三种做法：

1.通过标签元素设置

p{
    font-size:1em;
}

2.通过 class 属性的所有属性元素统一设置

.class名{
font-size：1em；
}

3.通过 id 来设置

#id名字{
font-size ： 1em；
}

还有可以为由类似属性的多个元素声明样式：

input[type*="text"]{
    font-size =1.2em;
}

到后来可以根据元素的位置进行声明：

p:first-of-type{
font-size:2em;
}

function getNextElement(node)//声明getNextElement函数，参数为node节点
{
    if(node.nodeType ==1)
    {
        return node;//如果node节点类型值与1相等为真，即node节点为元素节点，则退出此函数，并此函数取值为node。
    }//如果node节点类型值与1相等为假，则继续执行下面语句。
    if(node.nextSibling)//如果node节点的下一个兄弟节点存在即条件为真，则退出此函数，并递归，参数变为node节点的下一个兄弟节点。
    {
        return getNextElement(node.nextSibling);//从一个函数的内部调用这个函数本身叫作递归调用。
    }//如果node节点的下一个兄弟节点不存在即条件为假，则继续执行下面语句。
    return null;//退出此函数，并此函数取值为null。
}

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

可以编写一个函数来为表格添加斑马线的效果：

function stripeTables(){
	if(!document.getElementsByTagName) return false;
	var tables = document.getElementsByTagName("table");  //把文档中的所有table 元素找出来
	var odd,rows;  
	for (var i=0;i<tables.length;i++) {
		odd = false;    //对每个table元素，创建odd变量，并把它初始化为false
		rows = tables[i].getElementsByTagName("tr");  //遍历这个表格的 数据行 
		for(var j=0;j<rows.length;j++){
			if(odd == true){     //如果遍历为 true ，则设置样式 然后再odd变量修改为 false
				rows[j].style.backgroundColor= "#ffc";
				odd = false;
			}else
			{
				odd =true;
			}
		}
	}
}
addLoadEvent(stripeTables);

9.3.3 响应事件

下面 highlightRows 函数将在鼠标指针悬停在某个表格行的上方时，把该行的文本加粗加黑：

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

总结：在使用CSS或 DOM的时候：要考虑好两个条件：

哪个更加简单。
哪个可以适应更多的浏览器。

9.4 className 属性

前面都是使用 DOM 直接设置或者修改样式，都是让“行为层” 干 “表示层” 的活，并不是理想的工作方式。

我们可以直接更新的某个元素个 class属性。

例如：

function styleHeaderSiblings(){
	if(!document.getElementsByTagName) return false;
	var headers = document.getElementsByTagName("h1");
	var elem;
	for (var i=0;i<headers.length;i++) {
		elem = getNextElement(headers[i].nextSibling);
		elem.style.fontWeight = "blod";
		elem.style.fontSize = "1.5em";
	}
}

假设是决定把紧跟 h1 之后的那个元素修改它的字体大小，可以直接引用一个外部的 CSS样式表，并其中有一条针对

.intro 类的样式说明：

.intro{
    font-weight = "blod";
	font-size = "1.5em";
}

现在，我们只需要通过JS 把紧跟 h1 之后的那个元素添加 intro 类就可以达到目的。

我们可以通过 setAttribute 方法来做

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

还有一个更简单的方法，就是更新 className属性。 className属性是一个可读/可写的属性。凡是元素节点都有这个属性，下面是通过className 属性编写的代码

function styleHeaderSiblings(){
	if(!document.getElementsByTagName) return false;
	var headers = document.getElementsByTagName("h1");
	var elem;
	for (var i=0;i<headers.length;i++) {
		elem = getNextElement(headers[i].nextSibling);
		elem.className ="intro";
	}
}

这样的话，原来那个文本元素的class 属性就会替换成， intro 类。会改变原来的class属性。而，我们实际需要的是实现追加的效果，而非是替换。

解决方式：利用字符串拼接操作。

elem.className += " intro";  //引号有注意有一个是空格

还有一种情况，如果原本就没有class类的话，就可以直接对追加一个新的class

代码：

function addClass(element,value)
{
    if(!elment.className)  //如果为空
    {
        element.className= value;  //直接加入一个新的Class
    }
    else {
        newClassName = element.className;  //className表示 属性设置或返回元素的 class 属性。
        newClassName += " ";
        newClassName +=value;
        element.className = newClassName;
    }
}
function styleHeaderSiblings(){
	if(!document.getElementsByTagName) return false;
	var headers = document.getElementsByTagName("h1");
	var elem;
	for (var i=0;i<headers.length;i++) {
		elem = getNextElement(headers[i].nextSibling);
		addClass(elem,"intro");
	}
}

第十章用JS实现动画效果

动画就是让元素的位置随着时间而不断第发生变化。

10.1.1 位置

网页元素在浏览器窗口里的位置是一种表示性的信息。位置信息通常是由 CSS负责设置的。

CSS：

element{
position:absolute;
top:50px;
left:100px;
}

DOM:

elememt.style.position="absolute";
elememt.style.top="50px";
elememt.style.left="100px";

一样可以达到相同效果。

position 属性的合法值有 static（默认值）、fixed、relative和 absolute 四种。

10.1.2 时间

JS中的 setTimeout 函数，能够让某个函数经历了一段时间后才开始执行。 这个函数有两个参数，

第一个参数----------要执行的函数

第二个参数----------需要经过多长时间后执行，单位是毫秒

setTimeout("function",interval)

在通常的，把这个函数调用赋值给一个变量来使用。

variable = setTimeout("function",interval)

如果想要取消掉该函数的执行：

 clearTimeout(variable);  //variable 是保存某一个setTimeout 函数调用返回值的变量。

例如：

function moveMessage(){
    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
    elem.style.left = "200px";
}

function positionMessage(){
    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
	elem.style.position="absolute";
	elem.style.top="100px";
	elem.style.left="50px";
	movement = setTimeout("moveMessage()",5000);
}
addLoadEvent(positionMessage);

在这5s 的等待时间里，我们都可以通过的下面的语句进行取消这个 “跳跃” 的动作。

 clearTimeout(movement);

【注意】：

这里movement 声明时候并没有使用 var ，所有 movement就是一个全局的变量，可以在 positionMessage 函数以外的地方被取消。

10.1.3 时间递增量

上述的代码，只是让元素 实现跳跃， 没有一个渐变的过程。 所有我们需要更新下 moveMessage 函数。

新 moveMessage 函数的逻辑：

（1）获取元素初始的位置。

（2）如果元素已经到达它的目的地，则退出这个函数

（3）如果元素还没到达它的目的地，则把它向目的地移近一点

（4）进过一段时间间隔之后，再重复步骤1 开始重复上述步骤。

我们可以通过的 style.left和style.top 等属性获取的位置，分别赋值给变量 xpos ypos。

var xpos = elem.style.left;
var ypos = elem.style.top;

【注意】：

在上述的函数，我们需要算术的比较，而上面代码的赋值的是字符串，字符串无法进行算术的比较。

解决：在JS 函数parseInt 把字符串里的数值信息提取出来。如果是带小数的，则使用 parseFloat(string) 。

var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);

function moveMessage(){
    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos ==200 && ypos==100)
    {
        return true;
    }
    if(xpos < 200)
    {
        xpos++;
    }
     if(xpos > 200)
    {
        xpos--;
    }
        if(ypos < 100)
    {
        ypos++;
    }
        if(ypos < 100)
    {
        ypos--;
    }
    elem.style.left = xpos +"px";
    elem.style.top = ypos +"px";
    movement = setTimeout("moveMessage()",10);
}

上述代码是使得message 元素每次1像素的在浏览器移动。一旦元素top和left达到要求，这个函数就会停止的执行。

10.1.4 抽象

上述代码，我们都是用的参数都是常量，我们可以把常量变成变量，使得这个函数的灵活性和使用范围增大。

例如，我们创建一个新函数， moveElement函数，它有四个参数，

打算移动的元素的ID 。 elementID
该元素的目的左坐标 final_x
该元素的目的上坐标 final_y
两次移动的之间的停顿间隔时间。 interval

function  moveElement(elementID,final_x,final_y,interval){
     if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
	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 ="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement = setTimeout(repeat,interval);
}

10.2 使用的动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>Web Design</h1>
		<p>These are the things you should know.</p>
		<ol id="linklist">
			<li>
				<a href="structure.html">Structure</a>
			</li>
			<li>
				<a href="presentation.html">Presentation</a>
			</li>
			<li>
				<a href="behavior.html">Behavior</a>
			</li>
		</ol>
		<img src="10.1/images/1.png" alt="building blocks of web design " id="preview"/>
	</body>
</html>