JS中常用的的选择器，JavaScript获取HTML标签元素-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS中常用的的选择器，JavaScript获取HTML标签元素。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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); //<p class="test">hello world 2</p>
   </script>
 </body>
</html>

5.querySelector().querySelectorAll()

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

element = document.querySelector(selectors);

5.3实例：文章来源地址https://www.toymoban.com/news/detail-758102.html

<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"); // 匹配第一个 div

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

HTML

</script>