Simple Note

JavaScript DOM 编程艺术 阅读笔记

2015.10.03

看的第一本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;
    }
}
Comments
Write a Comment