Element扩展

新的DOM扩展中所有方法既可以用Element.funcName(element[,args])调用,也可以直接用element.functionName([,args])调用,但是在新的版本中不推荐前者,而推荐后者,在下面的介绍中有些函数的介绍仍保留了以前的调用方式,eg:down(element[,cssRule][,index=0])

对结点操作的方法如 update(),setStyle(),replace()等都返回操作后的结点,这样可以继续调用方法,eg:$("ff").update("inerHTML After updated").setStyle({fontSize:'30px',color:'red'});//returns $("ff")

很多方法可以通过invoke('functionName'[,args])调用,而且也返回结点,eg:$H(['divId','spanId']).invoke('hide');其效果等于$("divId").hide();  $("spanId").hide();

addClassName(className)/hasClassName(className)

toggleClassName(className):折叠className

$('mutsu').classNames()
//->['apple','fruit','food']

$("mutsu").toggleClassName("food");
$('mutsu').classNames()
//->['apple','fruit']

$("mutsu").toggleClassName("food");
$('mutsu').classNames()
//->['apple','fruit','food']

...

addMethod(function):该方法可以为所有的Element添加一个方法,需要注意的是创建这个方法第一个参数是element,在函数体中若需要的到Element对象应使用$(element)方法,而且该函数必须返回$(element)对象

Element.addMethods({
    msg:function (element,str)
    {
        element=$(element);
        alert("Element "+element.id+" want to say:"+str);
        return element;
    }
});
//为所有的DOM 结点添加msg方法,调用方式如下
$("divId").msg("I am a Div");//alert "Element divId want to say I am a div"

从addMethod 方法中可以实现所有Element方法的扩展,但Prototype是使用Object.extend()实现扩展的

ancestors()返回所有父结点(包括html body)

classNames()返回所有的className

cleanWhitepace()去除标签之间的空格,在使用nextSubling()之类方法前最好先使用cleanWhitespace()

<ul id="apples">
    <li>Mutsu</li>
    <li>McIntosh</li>
    <li>IdaRed</li>
</ul>


varelement=$('apples');
element.firstChild.innerHTML;
//->undefined  由于ul 与li 之间有空格 firstChild 是一个空的文本结点
element.cleanWhitespace().firstChild.innerHTML
//->"Mustu"

descendantOf(element) 返回true/false 是否为element的子结点

descendants() 返回所有的子结点

<div id="australopithecus">
    <div id="homo-herectus">
        <div id="homo-neanderthalensis"></div>
        <div id="homo-sapiens"></div>
    </div>
</div>

$('australopithecus').descendants();
//->[div#homo-herectus,div#homo-neanderthalensis,div#homo-sapiens]
$('homo-sapiens').descendants();
//->[]

down()/up():down(element[,cssRule][,index=0])

//上面的例子
$("homo-herectus").down("#homo-neanderthalensis",1);//返回[div#homo-neanderthalensis]
//down()/up()可以当作去除DOM的父子关系,将所有结点都看作同一层次结点

$("homo-herectus").down();//返回div#homo-neanderthalensis index默认为0,所以默认返回下一个元素

empty():返回结点的innerHTML是否只有空格或空

update(str):将DOM的innerHTML置为str并返回该DOM结点

getDimensions();返回有属性width和height对象,该方法精确计算结点的宽度和高度

getElmentsByClassName(className):

getElementsBySelector(cssRule):Selector就是cssRule的解析类,$$(cssRule)就是调用该方法,同样可带多个参数

getWidth()/getHeight():准确获取结点的高度和宽度,与getDimensions()不同的是该方法返回的值单位为px,所以性能会有所下降

getStyle(styleName):获取style值,它不是仅调用attribute[styleName],在此之前利用正则表达式"整理"为attribute[styleName]认识的styleName

$(element).getStyle('font-size');
//equivalent: '12px;'
$(element).getStyle('fontSize');
//->'12px'

immdiateDescendants():获取子结点,但不返回子结点的子结点

<div id="australopithecus">
    <div id="homo-herectus">
        <div id="homo-neanderthalensis"></div>
        <div id="homo-sapiens"></div>
    </div>
</div>

$('australopithecus').immediateDescendants();
//->[div#homo-herectus]
$('homo-herectus').immediateDescendants();
//->[div#homo-neanderthalensis,div#homo-sapiens]
$('homo-sapiens').immediateDescendants();
//->[]

inspect():返回行如<tagName id="id" class="className">(若没有id 则不含id="id",class同理)的字符串

<ul>
    <li id="golden-delicious">GoldenDelicious</li>
    <li id="mutsu"class="yummyapple">Mutsu</li>
    <li id="mcintosh"class="yummy">McIntosh</li>
    <li></li>
</ul>

$('golden-delicious').inspect();
//->'<li id="golden-delicious">'
$('mutsu').inspect();
//->'<li id="mutsu" class="yummyapple">'
$('mutsu').next().inspect();
//->'<li>'

//inspect()实质上是将DOM结点转化Prototype认识的一种结点形式

mwkeClipping()/undoClipping():将对Css支持不够的元素的overflow属性设置为hidden(剪切DOM结点),返回DOM结点

makePositioned([element])/undoPositioned([element]):makePositined将DOM子结点中position=absolute的结点设置为position=relative,若不带参数,则将所有position=absolute的结点转化,同样可以带多个参数,指定转化(同样前提是position=absolute)

<div id="Container" class="title">
    <div id="sub" style="position:absolute;top:20px;left:200px; border:solid red 1px;">
        This is a Div has Positioned absolutely!
    </div>
</div>

$("Container").makePositioned($("sub"));
$("Container").undoPositioned($("sub"));

//代码运行

match(cssRule):检测结点是否符合cssRule


<ul id="fruits">
    <li id="apples">
        <ul>
            <li id="golden-delicious">GoldenDelicious</li>
            <li id="mutsu"class="yummy">Mutsu</li>
            <li id="mcintosh"class="yummy">McIntosh</li>
            <li id="ida-red">IdaRed</li>
       </ul>
   </li>
</ul>

$('fruits').match('ul');//->true
$('mcintosh').match('li#mcintosh.yummy');//->true
$('fruits').match('p');//->false

next()/previous():返回兄弟结点,调用格式为next(element[,cssRule][,index=0]),注意他和down()/up()的区别

<ul id="fruits">
    <li id="apples">
         <h3 id="title">Apples</h3>
         <ul id="list-of-apples">
             <li id="golden-delicious">GoldenDelicious</li>
             <li id="mutsu">Mutsu</li>
             <li id="mcintosh"class="yummy">McIntosh</li>
             <li id="ida-red"class="yummy">IdaRed</li>
        </ul>
        <p id="saying">An apple a day keeps the doctor away.</p>
    </li>
</ul>

$('list-of-apples').next();
//equivalent:默认index=0返回兄弟结点的下一个p#sayings
$('list-of-apples').next(0);
//->p#sayings
$('title').next(1);
//->ul#list-of-apples
$('title').next('p');
//->p#sayings
$('golden-delicious').next('.yummy');
//->li#mcintosh
$('golden-delicious').next('.yummy',1);
//->li#ida-red
$('ida-red').next();
//->undefined

nextSiblings()/previousSiblings():返回所有前/后兄弟结点,他返回DOM中的所有nextSbling/previousSibling

//上面的例子

$("golden-delicious").nextSiblings();//[li#mutsu,li#mcintosh,li#ida-red]
$("ida-red").nextSiblings();//[]

observe(element,eventName,handler[,useCapture=false)/stopObserving(element,eventName,handler[,useCapture=false);为结点添加/去除一个处理函数,该函数接受的参数为当前的event对象

$(element).observe('click',function(event){
    alert(Event.element(event).innerHTML);
});
//当点击element是弹出对话框,显示被点击的元素的innerHTML
//Event.element(event)返回事件源对象 参见Event.html

readAttribute(attr):不用说了,读出属性

recursivelyCollect(attr):读出所有属性值的数组,如前面的nextSiblings()就是使用return $(element).recursivelyCollect("nextSibling"),他忽略文本结点

<ul id="fruits">
    <li id="apples">
        <ul id="list-of-apples">
            <li id="golden-delicious"><p>GoldenDelicious</p></li>
            <li id="mutsu">Mutsu</li>
            <li id="mcintosh">McIntosh</li>
            <li id="ida-red">IdaRed</li>
       </ul>
   </li>
</ul>

$('fruits').recursivelyCollect('firstChild');
//->[li#apples,ul#list-of-apples,li#golden-delicious,p]
//在调用recursivelyCollect()方法时先判断该属性是否存在,若存在则不段循环直至属性值为null

remove():删除自身相当于element.parentNode.removeChild(element);

replace([,html])将结点的innerHTMl替换为html.toString(),并允许包括scipt等的任何标签,并会执行script,不带参数是将innerHTML置空,并返回替换后的结点,其实html可以为任意类型,但必须支持toString()方法

<div id="divId">the original innerHTML</div>

$("divId").replace("<b>Content became bold</b>");
//$("divId").innerHTML="<b>Content became bold</b>"

$("dicId").replace("<b>Content became bold and alert sth </b><script type='text/javascript'>alert('Hello,world');</script>")
//innerHTML替换而且会弹出对话框 'Hello,world'

scrollTo():让滚动条滑至该结点处,调用了window.scrollTo(nodeLeft,nodeTop)

setStyle(jsonStyles):注意cssProperty为关键字时可以使用cssProperty或者使用单引号

$("divId").setStyles({cssFloat:'left',height:'200px'});
//注意cssFloat实质上将float属性设置为left,如果直接使用float会认为是javascript中的保留字float

$("divId").setStyle({'float':'left'});//用单引号环绕float

//使用上述方法避免的 float的二意性,实质上是Selector的功劳,Selector 负责将这些Prototype难以理解的东西用正则表达式转化成Javascript认识的属性

show()/hide():显示/隐藏结点,他设置了结点的display属性而不是visibility属性,需要注意的是如果在Css StyleSheet中已经将display:none,则调用show()不会起作用

<style type=type="text/css" >
    #divId{display:none;border:solid 1px red;}
</style>

<div id="divId">This is a Div</div>

$("divId").show();//不会显示

//还是提醒在之前的版本中是使用Element.show($(element))方法
//在1.5.0开始的版本中摈弃该方法
//直接使用$(element).hide()
//甚至可以这样使用
$("div1","div2","div3").each(Element.show);
//当然这种方法更好
$("div1","div2","div3").invoke('show');

siblings():返回所有兄弟结点,包括前面的和后面的siblings()=previousSiblings()+nextSiblings()

toggle()折叠结点,如果display=='none'则display=''否则display='none'.同show()/hide(),如果在css中设置display:none,toggle()就不会起作用,以为toggle将display=''即设置为默认,事实上默认为none 所以不起作用.同样推荐使用诸如$("div1","div2","div3").each(Element.toggle)和$("div1","div2","div3").invoke("toggle");

toggleClassName(className):无非就是addClassName(className)和removeClassName(className)在交替调用

update(object):将innerHTML设置为object.toString()所以object必须支持toString()方法

$("divId").update(123);
//$("divId").innerHTML="123"

var Car=Class.create();
Car.prototype={
    initialize:function(){},
    toString:function(){return "I am a Car";}
};
$("divId").update(Car);
//$("divId").innerHTML="I am a Car"

visible():返回display是否等于none 若display='none',则返回false,否则都返回true