JS中常用的的选择器

1. getElementById()

getElementById是JavaScript中的一个DOM方法，用于根据元素的id属性获取HTML文档中的元素。该方法接受一个字符串参数，即元素的id属性值，并返回具有该id属性值的元素。如果没有找到匹配的元素，则返回null。

以下是一个示例，演示如何使用getElementById获取页面中的元素：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用getElementById获取元素</title></head><body><h1 id="heading">这是页面标题</h1><p id="paragraph">这是一个段落</p><script>// 获取元素并修改其文本内容const headingElement = document.getElementById("heading");headingElement.textContent = "这是新标题";const paragraphElement = document.getElementById("paragraph");paragraphElement.textContent = "这是新的文本内容";</script></body></html>

在这个示例中，h1元素和 p元素都有一个id属性，分别为”heading”和”paragraph”。在JavaScript代码中，通过document.getElementById方法获取这两个元素，并使用textContent属性来修改它们的文本内容。注意，getElementById方法只会返回具有指定id属性值的第一个元素，如果有多个元素具有相同的id属性值，则只会返回第一个匹配的元素。

2.getElementsByName()

2.1. getElementsByName可以根据元素的name或id属性值来查找或获取元素．然后对元素进行某些操作．getElementsByName与getElementById都是用来在网页内查找获取元素．但他们是有区别的．getElementById是根据元素的id属性值进行查找，并且只获取唯一的．比如你网页中有n个元素的id值属性是一样的，getElementById只获取其中一个。
而getElementsByName是根据元素的name或id属性值来查找，并且可以获取多个元素，．如果你的网页中有5个元素的name和id属性值是一样的．那么getElementsByName将全部获取，并以数组的方式来返回对这5个元素的引用。
上面对getElementsByName的解释是根据W3C标准而言．实际应用中在IE浏览器里表现很不正常，强烈建议使用FF(FireFox)浏览器运行
2.2. 下面实例．
语法：
arr=document.getElementsByName(oName)
返回值：
arr:数组类型．返回一组网页内据有同一name属性的元素．

参数
document:文档网页的根.
oName:被查找元素的name属性或id属性值．
2.3 .getElementsByName()使用方法

getElementsByName实例<html><head><title>Dom:getElementsByName实例演示</title></head><body><h2>该实例将把网页内name属性值b的元素．添加一个边框．请用FF浏览器运行该例．</h2><div id="b">该属性只有id值．所以不会被获取改变,但在IE浏览器里只有该元素会被添加边框，</div><div name="b">该div的name属性为b,点击按扭添加一个边框，在IE里看不到效果，</div><span name="b">该span的name属性为b,点击按扭添加一个边框，在IE里看不到效果</span><br/><input type="button" value="添加边框" οnclick="get_element()"/><script language="javascript">function get_element(){var arr = document.getElementsByName("b");for(var i=0; i<arr.length; i++){arr[i].style.border="1px solid";}}</script></body></html>

3.getElementsByTagName()

3.1getElementsByTagName() 方法可返回带有指定标签名的对象的集合。语法如下：

 document.getElementsByTagName(tagname) //传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

3.2示例如下：

<html><head><script type="text/javascript">function getElements(){var x=document.getElementsByTagName("input");alert(x.length);}</script></head><body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()"value="How many input elements?" /></body></html>

##4. getElementsByClassName()
4.1返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。
4.2elements 是一个实时集合，包含了找到的所有元素。
names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔
getElementsByClassName 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。
4.3实例如下：

html> <body> <div id="parent-id"> <p>hello world 1</p> <p class="test">hello world 2</p> <p>hello world 3</p> <p>hello world 4</p> </div> <script> var parentDOM = document.getElementById("parent-id"); var test = parentDOM.getElementsByClassName("test"); // 匹配类名的元素集合，不是元素本身 console.log(test); //HTMLCollection[1] var testTarget = parentDOM.getElementsByClassName("test")[0]; // 我们想要取到的第一个元素 console.log(testTarget); //
hello world 2
 </script> </body></html>

5.querySelector().querySelectorAll()

5.1Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。
5.2语法：

element = document.querySelector(selectors);

5.3实例：

<div id="foo\bar"></div><div id="foo:bar"></div><script>console.log("#foo\bar"); // "#fooar"document.querySelector("#foo\bar"); // 不匹配任何元素console.log("#foo\\bar"); // "#foo\bar"console.log("#foo\\\\bar"); // "#foo\\bar"document.querySelector("#foo\\\\bar"); // 匹配第一个 divdocument.querySelector("#foo:bar"); // 不匹配任何元素document.querySelector("#foo\\:bar"); // 匹配第二个 div//如果要匹配的 ID 或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：HTML</script>