javascript脚本化文档

/**
 * 获取指定id的的元素数组
 */
function getElements(/*ids...*/) {
    var elements = {};                           
    for(var i = 0; i < arguments.length; i++) {  
        var id = arguments[i];                   
        var elt = document.getElementById(id);   
        if (elt == null)                         
            throw new Error("No element with id: " + id); 
        elements[id] = elt;                    
    }
    return elements;                            
}

for(var i=0;i<document.images.length;i++){//循环所有img对象
    document.images[i].style.display = ‘none‘;//隐藏他们
}

/*
    返回元素e第n层父元素
    如果不存在此类祖先或者祖先元素不是element类型，返回null
    如果n为0 返回自己
    如果n为1或者省略返回父元素
*/
function parent(e,n){
    if(n == undefined) n = 1;
    while(n-- && e) e = e.parentNode;
    if(!e || e.nodeType != 1) return null;
    return e;
}
/**
 * Return the nth sibling element of Element e.
 * If n is postive return the nth next sibling element.
 * If n is negative, return the -nth previous sibling element.
 * If n is zero, return e itself.
 */
function sibling(e,n) {
    while(e && n !== 0) {  // If e is not defined we just return it
        if (n > 0) {  // Find next element sibling
            if (e.nextElementSibling) e = e.nextElementSibling;
            else {
                for(e=e.nextSibling; e && e.nodeType !== 1; e=e.nextSibling)
                    /* empty loop */ ;
            }
            n--;
        }
        else {        // Find the previous element sibling
            if (e.previousElementSibing) e = e.previousElementSibling;
            else {
                for(e=e.previousSibling; e&&e.nodeType!==1; e=e.previousSibling)
                    /* empty loop */ ;
            }
            n++;
        }
    }
    return e;
}
/**
 * Return the nth element child of e, or null if it doesn‘t have one.
 * Negative values of n count from the end. 0 means the first child, but
 * -1 means the last child, -2 means the second to last, and so on.
 */
function child(e, n) {
    if (e.children) {                      // If children array exists
        if (n < 0) n += e.children.length; // Convert negative n to array index
        if (n < 0) return null;            // If still negative, no child
        return e.children[n];              // Return specified child
    }

    // If e does not have a children array, find the first child and count
    // forward or find the last child and count backwards from there.
    if (n >= 0) { // n is non-negative: count forward from the first child
        // Find the first child element of e
        if (e.firstElementChild) e = e.firstElementChild;
        else {
            for(e = e.firstChild; e && e.nodeType !== 1; e = e.nextSibling)
                /* empty */;
        }
        return sibling(e, n); // Return the nth sibling of the first child
    }
    else { // n is negative, so count backwards from the end
        if (e.lastElementChild) e = e.lastElementChild;
        else {
            for(e = e.lastChild; e && e.nodeType !== 1; e=e.previousSibling)
                /* empty */;
        }
        return sibling(e, n+1); // +1 to convert child -1 to sib 0 of last
    }
}

// Return the plain-text content of element e, recursing into child elements.
// This method works like the textContent property
function textContent(e) {
    var child, type, s = "";  // s holds the text of all children
    for(child = e.firstChild; child != null; child = child.nextSibling) {
        type = child.nodeType;
        if (type === 3 || type === 4)  // Text and CDATASection nodes
            s += child.nodeValue;
        else if (type === 1)           // Recurse for Element nodes
            s += textContent(child);
    }
    return s;
}

/*将节点插入到父节点指定的位置中*/
function insertAt(parent,child,n){
    if(n<0 || n > parent.childNodes.length) throw new Error(‘invalid index‘);
    else if(n == parent.childNodes.length) parent.appendChild(child);
    else{
        parent.insertBefore(child,parent.childNodes[n]);
    }
}

// 根据指定表格每行指定的第n个单元格的内容对表格内容进行排序
// 如果存在比较函数则使用它如果没有则按照字母表进行排序
function sortrows(table, n, comparator) {
    var tbody = table.tBodies[0]; // 第一个<tbody> 可能是隐式创建的
    var rows = tbody.getElementsByTagName("tr"); // 查找tbody下所有行
    rows = Array.prototype.slice.call(rows,0);   // 真实数组中的快照

    // 基于第n个单元格的内容进行排序
    //sort() 方法用于对数组的元素进行排序。
    rows.sort(function(row1,row2) {
        var cell1 = row1.getElementsByTagName("td")[n];  
        var cell2 = row2.getElementsByTagName("td")[n];  
        var val1 = cell1.textContent || cell1.innerText; 
        var val2 = cell2.textContent || cell2.innerText;
        if (comparator) return comparator(val1, val2); 
        if (val1 < val2) return -1;
        else if (val1 > val2) return 1;
        else return 0;
    });

    // 添加排序好的行添加到tobody的最后
    for(var i = 0; i < rows.length; i++) tbody.appendChild(rows[i]);
}

// 查找表格中的th元素(假设只有一行)
// 并且使他们可以点击
//以便点击该标题进行排序
function makeSortable(table) {
    var headers = table.getElementsByTagName("th");
    for(var i = 0; i < headers.length; i++) {
        (function(n) {  
            headers[i].onclick = function() { sortrows(table, n); };
        }(i));          
    }
}

//用一个<b>元素替换元素n,并让n成为b的子元素
function embe(n){
    if(typeOf n == ‘string‘){//如果n为字符串则当做传入元素的ID使用
        n = document.getElememtById(n);
    }
    var b = document.createElement(‘b‘);
    n.parentNode.replaceChild(b,n);
    b.appendChild(n);
}

// Implement the outerHTML property for browsers that don‘t support it.
// Assumes that the browser does support innerHTML, has an extensible 
// Element.prototype, and allows getters and setters to be defined.
(function() {
    // If we already have outerHTML return without doing anything
    if (document.createElement("div").outerHTML) return;
    
    // Return the outer HTML of the element referred to by this
    function outerHTMLGetter() {
        var container = document.createElement("div"); // Dummy element
        container.appendChild(this.cloneNode(true));   // Copy this to dummy
        return container.innerHTML;                    // Return dummy content
    }
    
    // Set the outer HTML of the this element to the specified value
    function outerHTMLSetter(value) {
        // Create a dummy element and set its content to the specified value
        var container = document.createElement("div");
        container.innerHTML = value;
        // Move each of the nodes from the dummy into the document
        while(container.firstChild)  // Loop until container has no more kids
            this.parentNode.insertBefore(container.firstChild, this);
        // And remove the node that has been replaced
        this.parentNode.removeChild(this);
    }

    // Now use these two functions as getters and setters for the 
    // outerHTML property of all Element objects. Use ES5 Object.defineProperty
    // if it exists and otherwise fall back on __defineGetter__ and Setter__.
    if (Object.defineProperty) {
        Object.defineProperty(Element.prototype, "outerHTML", {
                                  get: outerHTMLGetter,
                                  set: outerHTMLSetter,
                                  enumerable: false, configurable: true
                              });
    }
    else {
        Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter);
        Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter);
    }
}());

//查询窗口滚动条的位置
function getScrollOffset(w){
    w = w || window;
    //除了IE8及更早的版本以外
    if(w.pageXOffset != null){
        return {x:w.pageXOffset,y:w.pageYOffset};
    }
    //对标准模式下IE（或任何浏览器）
    var d = w.document;
    if(document.compatMode == ‘CSS1Compat‘){
        return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
    }
    //如果是怪异模式下
    return {x:document.body.scrollLeft,y:document.body.scrollTop};
}

//获取浏览器视口的大小
function getViewPortSize(w){
    w = w || window;
    if(w.innerWidth != null ){
        return {w:w.innerWidth,h:w.innerHeight};
    }
    //对标准模式下IE（或任何浏览器）
    var d = w.document;
    if(document.compatMode == ‘CSS1Compat‘){
        return {x:d.documentElement.clientWidth,y:d.documentElement.clientHeight};
    }
    //如果是怪异模式下
    return {x:document.clientWidth.scrollLeft,y:document.body.clientHeight};
}

var box = e.getBoundingClientRect();//获取元素在视口中的位置
var offset = getScrollOffset();//获取滚动条滚动的位置
var x = box.left + offset.x;//计算出元素在文档中的x的位置
var y = box.top + offset.y;//计算出元素在文档中的y的位置
//很多浏览中getBoundingClientRect();返回的方法还包含width和height属性，但在原始的IE中没有实现
//下面计算元素的宽度和高度
var box = e.getBoundingClientRect();
var w = box.width || (box.right-box.left);
var h = box.height || (box.top - box.bottom);
//getBoundingClientRect();返回的数据包含元素的内边距和边框，但不包含外边距。
//getBoundingClientRect();它指定返回的是块级元素的数据，如果要返回的是内联元素的数据时候使用getClientRect();
//注意：getBoundingClientRect()和getClientRect()返回的数据不是实时的，它只是最初的一个快照而已。

//获取元素的位置（计算元素的文档位置）
function getElementPos(e){
    var x = 0; var y = 0;
    while(e != null){
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {x:x,y:y};
}
//获取元素的视口的位置
function getElementViewPos(elt){
    var x = 0; var y = 0;
    for(var e = elt;e!=null;e = offsetParent){
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    for(var e=elt.parentNode;e!=null && e.nodeType == 1;e = e.parentNode){
        x -= e.scrollLeft;
        y -= e.scrollTop;
    }
    return {x:x,y:y};
}

<form name="shopping">
    <label><input type="radio" name="method"/>first</label>
    <label><input type="radio" name="method"/>sec</label>
    <label><input type="radio" name="method"/>thr</label>
</form>

var methods = document.forms.shopping.elements.method;

var shopmet;
for(var i=0;i < methods.length;i++){
    if(methods[i].checked){
        shopmet = methods[i].value;
    }
}

<div contenteditable>
    click it edit
</div>