看的第一本JavaScript书，记录一下
关于DOM
DOM是什么？
- DOM是一套对文档的内容进行抽象和概念化的方法；
- DOM是一种API，是一套关于如何解析文档的共同约定；
DOM的适用范围
- DOM脚本程序设计可以涵盖任何一种支持DOM API的程序语言处理任何一种标记文档的情况；
- DOM之前出现过DHTML，他是HTML、CSS、JavaScript相结合的产物，但是它只能处理Web文档，并且因为各个浏览器厂商实现DHTML的方式都不一样，这玩意并不好用，已经慢慢退出历史舞台了；
DOM的特点
DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面；
DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容；
（感受：这本书的重点是DOM，而不是JS）
有用的小脚本
- 能适用于新老浏览器的getElementsByClassName：
function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) {
// 使用现有方法
return node.getElementsByClassName;
} else {
var results = new Array();
var elems = node.getElementsByTagName('*');
for (var i=0; i < elems.length; i++) {
if(elems.className.indexOf(classname) != -1) {
results[results.length] = elems[i];
}
}
return results;
}
}
- 多个函数共享onload事件：
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.insetBefore(newElement, targetElement.nextSibling);
}
}
- 找到当前元素的下一个元素节点：
function getNextElement(node) {
if (node.nodeType == 1) {
return node;
}
if(node.nextSibiling) {
return getNextElement(ndoe, node.nextSibiling)
}
return null;
}
- 给元素追加class属性：
function addClass(element, value) {
if (!element.className) {
element.className = value;
} else {
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}