浅谈CSS/jQuery/JS选择器（三）

写作目的：

1
2
3
4
想要操作DOM中的元素，最基本的是把他们准确的选择出来。
而选择的办法有很多种，要为元素设置样式，可以通过css选择器来选择。
要实现程序逻辑，可以用JS把元素选择出来，也可以用更强大的jQuery选择器。
这一节主要写写JS如何选取文档元素。它有五种选取文档元素的方法，这里会一一列出。

选取文档元素的方法

1
2
3
4
5
1.用指定的元素id
2.用指定的name属性
3.用指定的标签名字
4.用指定的CSS类名
5.匹配指定的css选择器

1.用指定的元素id

1
var elt = document.ElementById("idname");
  • 同一个文档中的元素ID是唯一的，所以这样选择出来的是唯一元素。

通过ID查找多个元素

1
placeholder

2.用指定的name属性

  • name可能返回多个元素
  • name属性只在少数HTML元素中有效，包括表单、表单元素、“iframe”和“img”元素
1
var elt = document.getElementsByName("xxx");
  • getElementsByName()定义在HTMLDocument类中，所以只针对HTML文档，XML文档不可用。
  • 返回一个Nodelist对象
  • 在IE中，getElementsByName()也返回id属性匹配指定值的元素，所以，为了兼容，应该避免同样的字符串同时用作name和id

3.用指定的标签名

  • 选定多个元素，返回一个Nodelist对象，其中的元素按照在文档中的顺序排序
1
2
var firstpara = document.getElementsByTagName('p')[0];
var firstparaSpans = firstpara.getElementByTagName("span");

以上两句代码，第一句是document定义的getElementsByTagName()方法，它选取所有匹配到的标签元素，第二句是Element类定义的，它选取调用该方法的元素的后代元素。

另外，HTMLDocument类定义了一些快捷属性来访问一些节点。

1
2
3
4
document.forms.address;//拥有name为address的form元素
document.body//文档的body元素
document.head//文档的head元素
document.documentElement//文档的html元素

4.用指定的css类名

  • 返回一个Nodelist对象
  • 因为我们可以为一个元素添加多个类名，所以此方法的参数可以是空格隔开的多个标识符
1
var elt = document.getElementsByClassName("class1 class2");

5.匹配css选择器选取

  • Document类的方法querySelectorAll()和querySelector()方法，括号里面就是前面说过的各种css选择器语法。
  • css选择器在前面文字中已经谈过，其中除了一些伪类选择器用JS方法选择会不匹配，其余的选择器语法都可以用
1
2
3
4
var elts = document.querySelectorAll("div+p");
for(var i = 0;i<h1.length;i++){
  elts[i].style.borderRadius = "10px";
}

以上代码使用前面两节的例子，结果图如下：
Alt text
结果完全一样。
从上面我们可以看出，其实jquery选择是封装了以上函数，并在其基础上做了扩展。但是对js源码我们还是要了解的。在写以上这些的时候，要注意一些兼容性的问题。这些在犀牛书15章有详细记载。