第八章：驾驭网页：利用DOM分割HTML
1、访问html元素： var sceneDesc = document.getElementById("“);
var divs = document.getElementsByTagName(“div”);抓取特定类型的元素
2、innerHTML特性对所有存储在元素里的内容提供了访问管道，innerHTML取得元素的所有内容，包括HTML标签；
3、Document Object Model（DOM）提供对脚本友善的网页结构与内容的视图；网页就像形成树状的层层元素，每棵DOM树的顶端节点都是Document，其下的节点为子节点；
4、DOM的节点根据节点类型分类：DOCUMENT 顶端节点，ELEMENT对应HTML标签的元素，TEXT元素的文本内容，ATTRIBUTE元素的属性可以透过元素节点访问；
5、在DOM树的节点间往返移动时，节点特性是个便利的好工具；
- nodeValue 存储于节点的值，只限于文本与属性节点使用
- nodeType 节点类型
- childNodes 包含节点下所有子节点的数组
- firstChild 节点下的第一个子节点
- lastChild 节点下的最后一个子节点
6、使用DOM改变节点文本的三步骤：移除所有子节点、根据新内容创建新的文本节点、把新节点附加在节点下
function replaceNodeText(id, newText) {
var node = document.getElementById(id);
while (node.firstChild)
node.removeChild(node.firstChild);
node.appendChild(document.createTextNode(newText));
}7、DOM是种符合万维网标准的HTML操纵方式，它比innerHTML特性有更多操控功能；
8、CSS样式与HTML元素紧密相连，DOM则提供了透过元素访问样式的图形，借助DOM调整CSS样式，即有了动态操纵内容外观的可能性
<span id="decision1" class="decision" onclick="changeScene(1)"
onmouseover="this.className = 'decisionhover'"
onmouseout="this.className = 'decision'">Start Game</span>
<span id="decision2" class="decision" onclick="changeScene(2)"
onmouseover="this.className = 'decisionhover'"
onmouseout="this.className = 'decision'"
style="visibility:hidden"></span>document.getElementById("decision2").style.visibility = "visible";9、DOM能随意创建任何HTML元素，document.createElement(“p”);
var history = document.getElementById("history");
if (curScene != 0) {
// Add the latest decision to the history
var decisionElem = document.createElement("p");
decisionElem.appendChild(document.createTextNode("Decision " + decision + " -> Scene " + curScene + " : " + message));
history.appendChild(decisionElem);
}
else {
// Clear the decision history
while (history.firstChild)
history.removeChild(history.firstChild);
}第九章：为数据带来生命
1、对象在一个存储容器内链接变量和函数；
2、对象中的特性与方法等于对象外的变量与函数；
3、点号运算符引用来自对象的特性或方法；
4、new运算符调用构造函数，起始对象的创建；
5、内置Date对象可表达时间里的瞬间，在Date对象里，时间以毫秒数表达；
var blogDate = new Date（“08/14/2008”）；
6、数组为对象，有sort方法为数据排序，有时需要传入排序函数
function compare(x,y){
return x-y;
}
nums.sort(compare);
7、String对象
- length 字符数量
- indexOf（）寻找字符串是否包含特定字符串，找不到返回-1
- charAt（）寻找特定字符在字符串里的位置
- toLowerCase（）转成小写，toUpperCase（）转成大写
8、Math对象是个组织对象，没有常量，使用前不需要创建该对象
- PI 3.14
- round（）浮点数四舍五入
- floor（）浮点数舍为整数
- ceil（）浮点数进为整数
- random（）产生介于0和1的随机数
- min（）和max（）
- abs（）绝对值
9、最终的blog类
// Blog object constructor
function Blog(body, date) {
// Assign the properties
this.body = body;
this.date = date;
// Return a string representation of the blog entry
this.toString = function() {
return "[" + (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" +
this.date.getFullYear() + "] " + this.body;
};
// Return a formatted HTML representation of the blog entry
this.toHTML = function(highlight) {
// Use a gray background as a highlight, if specified
var blogHTML = "";
blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";
// Generate the formatted blog HTML code
blogHTML += "<strong>" + (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" +
this.date.getFullYear() + "</strong><br />" + this.body + "</p>";
return blogHTML;
};
// See if the blog body contains a string of text
this.containsText = function(text) {
return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
};
}
第十章：创建自定义对象
1、拥有一次，运行多次：类拥有的方法，方法存储在类里，让所有实例共享一份方法代码；
2、在类层中，使用prototype，即可创建类拥有的方法
Blog.prototype.toHTML = function(){
}
3、使用prototype创建类对象，叫做类特性，在类中存储一次，但能被所有实例访问
Blog.prototype.signature = “Puzzler Ruby”;
4、类特性的访问也需要关键字this，通过实例访问，与全局变量有差别，仅仅是将特性存储在类中；
5、每个对象都有prototype对象，可以用它扩展标准对象
Date.prototype.shortFormat = function(){
return (this.getMonth()+1) + “/”+this.getDate()+"/”+this.getFullYear();
}
6、类方法不能访问实例特性或方法
7、构造函数的可选自变量列在列表的最后面，如果未被传入变量，则自变量为null
8、面向对象设计后的代码
<script type="text/javascript">
// Custom Date function to display a date in MM/DD/YYYY format
Date.prototype.shortFormat = function() {
return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
}
// Blog object constructor
function Blog(body, date, image) {
// Assign the properties
this.body = body;
this.date = date;
this.image = image;
}
// Return a string representation of the blog entry
Blog.prototype.toString = function() {
return "[" + this.date.shortFormat() + "] " + this.body;
};
// Return a formatted HTML representation of the blog entry
Blog.prototype.toHTML = function(highlight) {
// Use a gray background as a highlight, if specified
var blogHTML = "";
blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";
// Generate the formatted blog HTML code
if (this.image) {
blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br /><table><tr><td><img src='" +
this.image + "'/></td><td style='vertical-align:top'>" + this.body + "</td></tr></table><em>" +
this.signature + "</em></p>";
}
else {
blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br />" + this.body +
"<br /><em>" + this.signature + "</em></p>";
}
return blogHTML;
};
// See if the blog body contains a string of text
Blog.prototype.containsText = function(text) {
return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
};
// Set the blog-wide signature
Blog.prototype.signature = "by Puzzler Ruby";
// Sort helper to sort blog entries in reverse chronological order (most recent first)
Blog.blogSorter = function(blog1, blog2) {
return blog2.date - blog1.date;
};
// Global array of blog entries
var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", new Date("08/19/2008")),
new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),
new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008")),
new Blog("Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.", new Date("08/29/2008")),
new Blog("Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.", new Date("09/01/2008")),
new Blog("Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!", new Date("09/03/2008")),
new Blog("Got the new 7x7x7 cube. Could be my last blog post for a while...", new Date("09/05/2008")),
new Blog("Wow, it took me a couple of weeks but the new cube is finally solved!", new Date("09/19/2008"), "cube777.png") ];
// Show the list of blog entries
function showBlog(numEntries) {
// First sort the blog
blog.sort(Blog.blogSorter);
// Adjust the number of entries to show the full blog, if necessary
if (!numEntries)
numEntries = blog.length;
// Show the blog entries
var i = 0, blogListHTML = "";
while (i < blog.length && i < numEntries) {
blogListHTML += blog[i].toHTML(i % 2 == 0);
i++;
}
// Set the blog HTML code on the page
document.getElementById("blog").innerHTML = blogListHTML;
}
// Search the list of blog entries for a piece of text
function searchBlog() {
var searchText = document.getElementById("searchtext").value;
for (var i = 0; i < blog.length; i++) {
// See if the blog entry contains the search text
if (blog[i].containsText(searchText)) {
alert(blog[i]);
break;
}
}
// If the search text wasn't found, display a message
if (i == blog.length)
alert("Sorry, there are no blog entries containing the search text.");
}
// Display a randomly chosen blog entry
function randomBlog() {
// Pick a random number between 0 and blog.length - 1
var i = Math.floor(Math.random() * blog.length);
alert(blog[i]);
}
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
