javascript选择器是什么 js选择元素的方法

转载

mob64ca14133dc6 2023-09-05 20:49:44

文章标签 javascript选择器是什么获取元素 JavaScript 属性值 css选择器 文章分类 JavaScript 前端开发

DOM中选取文档元素的方法总共有5种：
1.通过id值。
2.通过name属性值。
3.通过指定的标签名。
4.通过class类。

5.通过css选择器。

下面我就这五种方法详细解释一下吧。

1.通过ID选取元素: document.getElementById()
任何元素都可以有一个id属性，在文档中该值必须唯一，所以该方法返回一个DOM对象。通过id获取元素是最简单最常用的选取元素的方法。
getElementById(id值)。注意这个方法是Document对象的方法。所以使用方法通常如下：
var el = document.getElementById("id");

2.通过name属性选取元素: document.getElementsByName()

多个元素可能有同样的名字，所以该方法返回NodeList对象。
getElementsByName(name值)定义在HTMLDocument类中，而不是在Document类中，所以它只对HTML文档有用，对XML文档无用。
在对form、img、iframe、applet、embed、object元素设置name属性时要注意一点，这些元素的属性值将自动成为window和Document对象的对应属性。所以如果通过name属性值查找以上几个特殊的元素可以像获取属性值一样操作，如：
//针对<form name="wlk">元素，得到Element对象
var form = document.wlk;
但是，不太推荐这样做，最好还是显示的调用getElementsByName()来查找元素。注意，getElementsByName()是HTMLDocument类中的方法，所以使用通常如下：
var el = document.getElementsByName("name");

3.通过标签名查找：getElementsByTagName()

getElementsByTagName("tagname")也返回NodeList对象，在NodeList对象中返回的元素按照在文档中的顺序排序的。所以可如下获取文档的第一个p元素：

var p = document.getElementsByTagName("p")[0];

HTML标签不区分大小写，故而在使用该方法是也不用区分大小写。如果传参数为通配符*，就返回文档中所有的元素。

该方法给是Element对象的方法，所以你

既可以在document上调用，也可以在element上调用。

像getElementsByName()一样，该方法对form、images等标签也可像操作属性一样操作。如：

document.forms.wlk或者document.forms[1]。当然还是推荐显示调用getElementsByTagName()。

4.通过class属性选取元素：getElementsByClassName()

getElementsByClassName()方法基于class属性值中的标志符来选取成组的文档元素。

类似getElementsByTagName()，在HTMl文档和HTML元素上都可调用getElementsByClassName()，它的返回值是NodeList对象，且是

实时的。它的参数只需要一个字符串，但该字符串可以由多个空格隔开的标志符组成。只有当元素的class属性值包含指定的标志符时才匹配，不过标志符的顺序无关紧要。