查看完整版本: [原创!]再谈如何获通过各式各样的方法来取页面的元素

[原创!]再谈如何获通过各式各样的方法来取页面的元素

原创内容, 转载请注明来源~
[quote] 1.获取页面元素的方法有很多种, 最简单明了的方法就是给元素设置一个ID属性, 然后再通过以下方法来获得元素[color=blue]document.getElementById()[/color]
可以将这个方法写成一个简短的函数:
[color=blue]var $ = function (elementId){return document.getElementById(elementId)}[/color]
这样, 当你需要访问一个带id属性的元素时, 只需要使用 [color=blue]$("元素ID")[/color] 就可以了.
由于在一个页面中, 每个id值都是唯一的, 所以需要使用引用document来调用这个方法
为什么不直接使用元素id 或者 document.all.元素Id 这样的方式呢? 因为这些方法都是M$开发出来的, 除了IE很少有其他浏览器能够很好的支持, 为了兼容所有浏览器, 应该统一用 [color=blue]document.getElementById[/color][/quote]

[quote] 2. 使用[color=blue]element.getElement[color=red][u]s[/u][/color]ByTagName[/color]
注意不要丢了"s", 这个方法是获得element对象包含的所有指定tagName的元素, 例如我要获得id为nav元素下所有的超链接, 那就可以这样:
[color=blue]$("nav").getElementsByTagName("A")[/color]
将其中的A代替成*号, 就是表示不限制tagName, 而是获得所有的元素[/quote]

[quote] 3. 使用[color=blue]document.getElementsByName[/color]
首先要区分一下, 既然元素有了id属性, 为什么还要有name属性呢?
id是标识某个元素的唯一名字, 而name是表示某一组元素的属性, 最常见的就是在表单中, 例如

[color=dimgray]请选择您的性别:
○ 男  ◎ 女 (圆圈代表表单中常见的单选框)[/color]

性别是一项表单项目, 可是他有两个值, 男, 女, 而对于单选框提交的时候, 则会将选中的那个值进行提交, 但无论如何, 他们都属于性别这个项目
所以他们的name就必须是一样的, 但是你可以分别给这两个单选设置一个id, 只要不相同, 都是可以的.
那么现在应该很清楚了, name 是可以相同的, 用于标识一组元素, 而id是惟一的例如如上的例子,
我们可以通过 [color=blue]document.getElementsByName("gender")[/color] 来获得两个单选框元素数组,
也可以通过[color=blue]document.getElementById("gender_1")
[/color][color=blue]document.getElementById("gender_2")[/color]来分别获得两个单选元素
name属性一般是出现表单中[/quote]

[quote] 4. 我们还可以对以上的getBy方法进行扩充, 例如根据ClassName(样式规则类名)来获取元素序列, 这样就需要借助到其他的方法, 例如

[color=blue]var getElementsByClassName = function (className, tagName, parentNode, fullMatch){  // 四个参数分别为 样式类名, [指定的标签名], [父元素], [完全匹配]
  if(!tagName)tagName="*"
  if(!parentNode)parentNode=document
  var elements=parentNode.getElementsByTagName(tagName)
  var result=[]  for(var i=0; i<elements.length; i++){
    if(fullMatch && elements.className=className) result.push(elements)
    if(!fullMatch && (" "+elements.className+" ").indexOf(" "+className+" ")!=-1) result.push(elements)
  }
  return result
}[/color]
用法很简单
[color=blue]var element = getElementsByClassName("nav")    // 获取所有样式包含有nav的元素
var element = getElementsByClassName("nav", "div")  // 获取所有样式包含有nav的div元素
var element = getElementsByClassName("nav", null, $("navigation"))  // 获取id为navigation的元素所包含的所有样式包含有nav的元素var element = getElementsByClassName("nav", null, $("navigation"), true)  // 获取id为navigation的元素所包含的所有样式仅为nav的元素通过这种方法,
[/color]
当我们需要获取不位于同一元素之内, tagName也不相同, className也不完全相同的一组元素时, 我们可以通过给元素设一个完全不需要存在的className, 然后再通过这个函数来获得这一组元素[/quote]

[quote] 除了getBy的方法, 我们还有更多的方法来获得页面中的元素-- DOM,
网页在浏览器中解析出来的都是DOM节点树的形式
你可以把整个网页想象是一棵树,
树是有很多分枝的, 但是树只有一个根(至少大部分树是这样 - -!)
网页的"树根" 就是 window对象, 也就是浏览器的窗口对象, 只要得到了window对象, 就可以通过各种办法来取得里面的元素就像你可以在一棵树的根部爬到这棵树的任意分枝上
网页中所有的元素都是一个DOM对象, 你可以理解一个DOM对象就是一棵树的分叉, 这个分叉只有一个上级分叉和任意个下级分叉
例如: [color=blue]element.firstChild[/color] 则是element对象的第一个子元素
[color=blue]element.lastChild[/color] 则是element对象的最后一个子元素
[color=blue]element.firstChild.childNodes[5][/color]    则是element对象的第一个元素的下级的第6个元素(索引是从0开始的)
除此之外, 还有
[color=blue]element.nextSibling[/color] 下一个兄弟元素
[color=blue]element.previousSibling[/color] 前一个兄弟元素
[color=blue]element.parentNode[/color] 父元素以下是常用的方法
[color=blue]element.hasChildNodes()[/color] 判断一个元素是否有子元素, 返回true/false
[color=blue]element.appendChild(newElement)[/color] 在element元素内部的末尾添加一个新的元素
[color=blue]element.inertBefore(dElement, newElement)[/color] 在element元素内部在dElement的前面插入一个新元素
[color=blue]elemnet.removeChild(oldElement)[/color] 在element元素内移除掉oldElement元素使用DOM可以在既不知道ID, 又不确定tagName 等情况下轻松获得想要的元素
有关DOM, 不仅仅是网页中的Element才是DOM对象, 网页中的文字, 空格等也是DOM的一个节点, 这点需要注意.[/quote]
呼~ 水平有限, 如有错误欢迎指出

[[i] 本帖最后由 Pudin 于 2008-4-5 14:25 编辑 [/i]]

牛人,顶!~~~~~~~~~~~~~~~

:P 不太懂网页技术，很谢谢你的经验分享！加精~！

哦. 知道了.
JS比较简单.:@

LZ 所提的第一个方法 "$" 在个别浏览器中有问题。

那是不是jq的选择器在其他的浏览器中也会有问题那？

不会的，JQuery支持的浏览器
Firefox 1.5+
Internet Explorer 6+
Safari 2.0.2+
Opera 9+