南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

这个问题我之前已经遇到过一次了，但是这次又忘记了，依然又犯错了，所以我必须要记录一下。

看一下这个例子：

<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

继续阅读 »

由于昨天遇到的一个问题，才有了这种想法。目前的YAHOO.util.Dom.getElementsByClassName仅支持一个class的寻找，如果我想寻找多个class的话就要多操作几次了，而且如果要给这些节点添加相同的事件的话，又要首先把它们放到一个数组，然后给新的数组添加事件，或者分别给各个数组添加事件，挺麻烦的，所以给YAHOO.util.Dom.getElementsByClassName做一点小改进，让它可以找到包含任何一个所给class的所有节点。

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')。

继续阅读 »

今晚谈一下Dom结构的修改和坐标的获取等，一共是17个方法。其中Dom结构的操作只有两个，另外15个都是有关宽度、高度、坐标的获取。

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 )：设置纵向坐标。

继续阅读 »

名字倒不知道怎么写了，就记成布尔值吧，主要介绍YUI的Dom方法里返回Boolean值的几个方法，一共三个，比较简单：

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

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

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

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

继续阅读 »

其实网页上很多炫的交互动作都是通过JavaScript操作样式表来实现的，这里谈一下我学习YUI的这部分经验。YUI中操作样式表以及元素属性的方法一共有7个，很少，也比较好理解。

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的~

继续阅读 »

YUI的Dom方法一共有45个，在这里谈一下我学习过程遇到的问题和经验，先介绍17个寻找节点类型的Dom方法。

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的神奇，下次再说哈，真的很神奇。。。

继续阅读 »