這部分提供了很多(寫的都有點煩了)方便的操作dom的方法:包含有名的$方法、document.getElementsByClassName方法,以及Element對象、Insertion對象
以下部分一個一個的詳細介紹:
$(element):getElementById的封裝,element可以是一個元素的id或元素本身,也可以是一個數組,這時返回一個數組,使用$方法,會自動調用Element.extend(element)方法,這樣的話使元素可以直接調用Element中的方法, 例如Element.hide(element)可以寫成這樣$(element).hide()
document.getElementsByClassName(className, parentElement): 根據class選擇元素
Element.extend(element): 擴展element,使element可以直接調用Element、Form.Element或Form中定義的方法
Element對象的方法:
visible: function(element):判斷element是否可見, 參數element可以是元素本身或元素id(下面的方面的參數基本上都是這樣的)
toggle: function(element):反轉element的可見性
hide: function(element):隱藏元素
show: function(element):顯示元素
remove: function(element):移除元素
update: function(element, html) :使用html更新element的內容,html中的script會執行(下同)
replace: function(element, html):將element替換為html
inspect: function(element):element的字符串表示
recursivelyCollect: function(element, property): 遞歸收集, 例如Element.recursivelyCollect(element, "parentNode")返回element所有的祖先節點, 注意只返回nodeType == 1的元素,也就是不返回文本元素
ancestors: function(element): 等同于上面的例子,返回元素的所有祖先節點
descendants: function(element): 返回所有子孫節點
immediateDescendants: function(element):返回元素的直接的子孫節點(子節點)的數組
previousSiblings: function(element):返回元素前面的兄弟節點
nextSiblings: function(element):返回位于元素后面的兄弟節點
siblings: function(element):返回元素所有的兄弟節點
match: function(element, selector):使用Selector的match方法匹配元素(Selector將在后面介紹), selector參數是一個css selector表達式或者Prototype中的一個Selector實例,如果element匹配selector則返回true,否則返回false,例如對于一個className為logcss的div來說,下面的表達式返回true, $(element).match("div.logcss") 待續。。
//update 2006-11-30 09:40
up(element, expression, index):利用Selector.findElement方法找到element元素的祖先節點中符合表達式expression的所有元素組成的數組索引為index的元素,也可以忽略expression(默認為*,表示匹配所有元素)和index(默認為0),直接這樣調用up(element, index)或up(element)
down(element, expression, index):跟up一樣,只是返回的是子孫節點
previous(element, expression, index):返回前面的兄弟節點
next(element, expression, index):返回后面的兄弟節點
新聞熱點
疑難解答