看一下这个例子：

<form name="hehe">
    <input type="checkbox" name="haha" />
</form>
<form name="hehe2">
    <input type="checkbox" name="haha" />
    <input type="checkbox" name="haha" />
</form>
<script type="text/javascript">
document.write(document.hehe.haha.length);
document.write('<br />');
document.write(document.hehe2.haha.length);
</script>

Demo地址：http://www.12sui.cn/test/dom0-0908.html

在获取表单的input时，我一般都习惯这么做，但是这样做往往就出现问题了，因为很多时候我会去对比已选的checkbox和所有的checkbox数量是否相等，但是只有一个的时候就会出错，因为它返回的就是checkbox本身，并没有length这个属性，所以我们需要先判断所取到的input是否有length属性以便进一步操作。

另外记录下location.reload()，它还有一个可选参数，true或者false，如果省略或者设置为false，它就会用HTTP头If-Modified-Since来检测服务器上的文档是否已改变。如果文档已改变，reload()会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果设置为true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。就是传说中的强制刷新。

getElementsByClassName: function(className, tag, root, apply, o, overrides) {
    className = lang.trim(className);
    tag = tag || '*';
    root = (root) ? Y.Dom.get(root) : null || document; 
    if (!root) {
        return [];
    }
    var nodes = [],
        elements = root.getElementsByTagName(tag),
        hasClass = Y.Dom.hasClass;
    if(className.indexOf('|')>0) {
        var classnames = className.split('|');
        //找到所有节点
        for (var i = 0, len = elements.length; i < len; ++i) {
            for (var j = 0; j < classnames.length; ++j) {
                if ( hasClass(elements[i], lang.trim(classnames[j])) ) {
                    nodes[nodes.length] = elements[i];
                }
            }
        }
        //剔除相同的节点
        for (var k = 0; k < nodes.length; k++) {
            for(var l = k+1; l < nodes.length; l++) {
                if(nodes[k] == nodes[l]) {
                    nodes.splice(l,1);
                }
            }
        }
    } else {
        for (var i = 0, len = elements.length; i < len; ++i) {
            if ( hasClass(elements[i], className) ) {
                nodes[nodes.length] = elements[i];
            }
        }


}
if (apply) {
    Y.Dom.batch(nodes, apply, o, overrides);
}
return nodes;


}

用法很简单，就是在class之间加上“|”，比如：YAHOO.util.Dom.getElementsByClassName(‘hehe|haha|heihei’)。

insertBefore ( newNode , referenceNode )：这个和Dom方法中的insertBefore一样，就是将一个节点插入到另一个节点的前边。

insertAfter ( newNode , referenceNode )：Dom方法中没有insertAfter 方法，YUI根据insertBefore构建了这个方法，就是将一个节点插入到另一个节点的后边。

getDocumentHeight ( )：获取页面的高度。

getDocumentWidth ( )：获取页面的宽度。

getViewportHeight ( )：获取页面的可视高度。

getViewportWidth ( )：获取页面的可视宽度。

getDocumentScrollLeft ( document )：获取滚的左宽度。。这个我也不知道咋描述。。。

getDocumentScrollTop ( document )：获取滚的上宽度。。。

getClientRegion ( )：获取浏览器的可视区域，返回top、right、bottom、left、height、width。

getRegion ( el )：获取元素的坐标以及宽高信息，返回top、right、bottom、left、height、width，这个可能用的情况还是比较多吧哈。

getXY ( el )：获取元素的坐标，返回left和top。

getX ( el )：获取元素的横向坐标，也就是离左侧的距离。

getY ( el )：获取元素的纵向总表，也就是离上部的距离。

setXY ( el , pos , noRetry )：设置节点的横向和纵向坐标。

setX ( el , x )：设置节点的横向坐标。

setY ( el , x )：设置纵向坐标。

hasClass ( el , className )：这个方法就是判断el是否拥有某一个class。

inDocument ( el , doc )：就是判断el是否在Dom结构中存在，一般我们使用removeChild方法会将元素移出到超空间，虽然是存在的，但是它不存在Dom结构中，普通的Dom方法中我是通过判断document.documentElement是否包含那个元素，YUI的方法其实一样的。

isAncestor ( haystack , needle )：判断是否是父节点，这个方法可以用来解决很困扰我们的onmouseover和onmouseout问题，要善用哈~

好久没有好好睡了，实在不行了，早点睡了哈，大家晚安~

getStyle ( el , property )：这个方法是获取元素的某个特定属性，el可以是String、HTMLElement、Array，注意property是不能为Array的，样式有内嵌的和外链的，读取内嵌的（特指style定义的）还好，如果是链入的，因为IE和Dom获取style的方式不同（IE是currentStyle，而Dom的方法是window.getComputedStyle），所以经常我们使用的时候要判断，而YUI的这个方法已经涵盖了两种情况，可以随意的使用。另外提到的一点是，float是JavaScript的保留字，所以在读取样式的时候要cssFloat（Dom）或者styleFloat（IE）来代替，我也是在读YUI代码的时候发现这一点。貌似直接读取样式的操作并不常用，至少我是。。。

setStyle ( el , property , val )：这个方法应该是比较常用滴，因为我们操作样式表的目的就是为了改变元素的样式，需要注意的东西跟上一个一样，这里就不多说啦。

addClass ( el , className )：这个方法的作用是给元素添加一个className，正常我们操作的时候，要么直接设置el.className=”，要么el.className += ”，其实YUI代码里使用的方法并没什么高级的：Y.Dom.setAttribute(el, CLASS_NAME, trim(current + SPACE + className))，这个函数其实并没有比我们正常使用的方法高级多少，但是值得注意的是这里的el可以是Array的~

replaceClass ( el , oldClassName , newClassName )：这个方法是去替换元素的某个已经存在className，在普通Dom方法里我们也就是简单的replace一下，但是YUI里的这段代码却很费劲，主要是它考虑的太多了，觉得一般不会有那么变态的className命名吧。YUI的这段代码写的很精彩：

className = (SPACE + current.replace(Y.Dom._getClassRegex(from), SPACE + to)).split(Y.Dom._getClassRegex(to));
// insert to into what would have been the first occurrence slot
className.splice(1, 0, SPACE + to);
Y.Dom.setAttribute(el, CLASS_NAME, trim(className.join(EMPTY)));

其实我开始看的时候并不理解为什么要这么做，当时想着只要className = (SPACE + current.replace(Y.Dom._getClassRegex(from), SPACE + to))就OK了，为啥要拆了再组合，刚才写的时候请教了玉伯，总算想明白了哈，其实它的目的就是为了让className完美一点，就是里边没有多余的空格，每个className之间只有一个空格。

removeClass ( el , className )：这个方法其实就是把已有的className替换成空，当然如果元素本身并没有这个className，就会do nothing。

getAttibute ( el , attr )：就是获取元素的attribute属性值，这个需要注意的就是在IE8以下版本的IE浏览器和其他现代浏览器对class和for的差别（IE8以下版本：’for’: ‘htmlFor’,'class’: ‘className’，而其他正好反过来，我是在读YUI代码的时候才了解到for的差别），当然使用YUI的时候就不用考虑这个差异了。

generateId ( el , prefix )：这个的应用应该不多，其实它的作用就是给元素加上一个id，而且这个id是唯一的，如果当前元素有id的话，那么就什么都不做，最后返回的是这个id的名字（可能是一个数组，因为el可以是数组）。

get(el)：记得初学JavaScript的时候，最先认识的两个方法就是getElementById和getElementsByTagName，这两个东东也基本上能够找到大多数你需要找的东西啦。YUI里的get方法跟getElementById类似，但是它的能力却要强很多了，el可以是String、HTMLElement或者Array。

getElementsBy ( method , tag , root , apply , o , overrides )：这个会和getElementsByTagName比较像一点点吧，但是功能差好远，基本上getElementsBy应该可以找到一切你想找的元素，method是定义一个校验目标元素的方法，返回一个boolean值，tag是目标元素的nodeName，root是指在哪个元素中进行寻找，也可以说成是一个范围吧。apply，我必须要说下它。。当初它困扰我了半天，YUI给出的解释是“A function to apply to each element when found ”，可以理解为一个回调函数吧，再看看YUI的代码，其中有这么一段：

if (apply) {
     Y.Dom.batch(nodes, apply, o, overrides);
}

我当时的理解是，因为最终返回的是一个节点的数组嘛，我就以为执行完前边的校验后得到的结果再在apply中进行一次，也就是我在apply中再对结果元素进行下一步的节点寻找，那么最后返回的应该是apply执行后得到的所有节点集合。。。可是无论我怎么试，最终返回的都是通过method方法所得到数组，并没有再次通过apply获得更多的元素，嘿嘿，不要见笑哈，当时就是这么想的。。。后来发现，实际上不是这样子，我理解错误的原因只要就在那个batch上，当时的错误在于，我把batch放进getElementsBy里了，那么在batch里边return后应该不会再继续执行return nodes了，但是实际上这里的Y.Dom.batch(nodes, apply, o, overrides)只是一个最终的结果而已，所以return nodes还是会执行的。那么这个apply的作用在何处呢？其实作用就是执行一次回调嘛哈，它是可以实现我之前的想法的，但是不是直接返回的，举个例子：

var uls = YAHOO.util.Dom.getElementsBy(function(el){
    return el.className === 'J_tab';
},'ul','content');

这是寻找id为content的容器下className为J_tab的节点，那么如果我同时还需要获取每个ul下的所有li节点该怎么做呢，总不能再来一次循环吧，当然也可以啦，不过要好好利用下YUI吧，那就是让它获取ul的同时获取li：

var lis = [];
function getli(obj) {
    lis.push(obj.getElementsByTagName('li'));
}
var uls = YAHOO.util.Dom.getElementsBy(function(el){
    return el.className === 'J_tab';
},'ul','content',getli);

OK，这样子就一举两得了哈~后边的作用域和上下文就不多说啦，关于batch的神奇，下次再说哈，真的很神奇。。。

getElementBy ( method , tag , root )：这个就是通过method校验的第一个元素。

getElementsByClassName ( className , tag , root , apply , o , overrides )：是通过className进行元素寻找，其实这个方法是getElementsBy的一个特殊方法。

getChildren ( node )：这个与Dom中的childNode类似。

getChildrenBy ( node , method )：通过method方法过滤子元素，注意参数的顺序以及node不可为id。

getFirstChild ( node )：寻找第一个子元素，跟Dom中的firstChild有些类似。

getFirstChildBy ( node , method )：寻找第一个通过method校验的子元素，注意参数的顺序以及node不可为id。其实这个等同于getChildrenBy得到的第一个元素。

getLastChild ( node )：寻找最后一个子元素，与Dom中的lastChild有些类似。

getLastChildBy ( node , method )：与getFirstChildBy相反，倒着寻找。

getAncestorBy ( node , method )：寻找父节点，可以无限的往上级寻找，直到找到为止，node不能为id，跟Dom中的parentNode类似，不过这里不用反复的parentNode啦。

getAncestorByClassName ( node , className )：通过className寻找父节点，是getAncestorBy的一个特殊方法。

getAncestorByTagName ( node , tagName )：通过tagName寻找父节点，是getAncestorBy的一个特殊方法。

getNextSibling ( node )：寻找紧挨的下一个同级非文本节点的节点，与Dom中的nextSibling类似，省去了判断文本节点麻烦。

getNextSiblingBy ( node , method )：无限的往下找直到找到通过method校验的同级非文本节点，node不能为id，有了这个方法就不用无限的nextSibling啦。

getPreviousSibling ( node )：寻找紧挨的上一个同级非文本节点的节点，与Dom中的previousSibling类似，可以省去判断文本节点的麻烦。

getPreviousSiblingBy ( node , method )：无限的往前找直到找到通过method校验的同级非文本节点，node不能为id。