JS中常用的的選擇器
1. getElementById()
getElementById是JavaScript中的一個DOM方法，用于根據(jù)元素的id屬性獲取HTML文檔中的元素。該方法接受一個字符串參數(shù)，即元素的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>
// 獲取元素并修改其文本內(nèi)容
const headingElement = document.getElementById("heading");
headingElement.textContent = "這是新標題";
const paragraphElement = document.getElementById("paragraph");
paragraphElement.textContent = "這是新的文本內(nèi)容";
</script>
</body>
</html>
在這個示例中，h1元素和 p元素都有一個id屬性，分別為"heading"和"paragraph"。在JavaScript代碼中，通過document.getElementById方法獲取這兩個元素，并使用textContent屬性來修改它們的文本內(nèi)容。注意，getElementById方法只會返回具有指定id屬性值的第一個元素，如果有多個元素具有相同的id屬性值，則只會返回第一個匹配的元素。
2.getElementsByName()
2.1. getElementsByName可以根據(jù)元素的name或id屬性值來查找或獲取元素．然后對元素進行某些操作．getElementsByName與getElementById都是用來在網(wǎng)頁內(nèi)查找獲取元素．但他們是有區(qū)別的．getElementById是根據(jù)元素的id屬性值進行查找，并且只獲取唯一的．比如你網(wǎng)頁中有n個元素的id值屬性是一樣的，getElementById只獲取其中一個。
而getElementsByName是根據(jù)元素的name或id屬性值來查找，并且可以獲取多個元素，．如果你的網(wǎng)頁中有5個元素的name和id屬性值是一樣的．那么getElementsByName將全部獲取，并以數(shù)組的方式來返回對這5個元素的引用。
上面對getElementsByName的解釋是根據(jù)W3C標準而言．實際應用中在IE瀏覽器里表現(xiàn)很不正常，強烈建議使用FF(FireFox)瀏覽器運行
2.2. 下面實例．
語法：
arr=document.getElementsByName(oName)
返回值：
arr:數(shù)組類型．返回一組網(wǎng)頁內(nèi)據(jù)有同一name屬性的元素．
參數(shù)
document:文檔網(wǎng)頁的根.
oName:被查找元素的name屬性或id屬性值．
2.3 .getElementsByName()使用方法
getElementsByName實例
<html>
<head>
<title>Dom:getElementsByName實例演示</title>
</head>
<body>
<h2>該實例將把網(wǎng)頁內(nèi)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() 方法的字符串可以不區(qū)分大小寫。
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返回一個包含了所有指定類名的子元素的類數(shù)組對象。當在 document 對象上調(diào)用時，會搜索整個 DOM 文檔，包含根節(jié)點。你也可以在任意元素上調(diào)用getElementsByClassName() 方法，它將返回的是以當前元素為根節(jié)點，所有指定類名的子元素。
4.2elements 是一個實時集合，包含了找到的所有元素。
names 是一個字符串，表示要匹配的類名列表；類名通過空格分隔
getElementsByClassName 可以在任何元素上調(diào)用，不僅僅是 document。調(diào)用這個方法的元素將作為本次查找的根元素。
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語法：文章來源：http://www.zghlxwxcb.cn/news/detail-758102.html
element = document.querySelector(selectors);
5.3實例：文章來源地址http://www.zghlxwxcb.cn/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 語法（比如不恰當?shù)厥褂昧嗣疤柣蛘呖崭瘢?，你必須用反斜杠將這些字符轉(zhuǎn)義。由于 JavaScript 中，反斜杠是轉(zhuǎn)義字符，所以當你輸入一個文本串時，你必須將它轉(zhuǎn)義兩次（一次是為 JavaScript 字符串轉(zhuǎn)義，另一次是為 querySelector 轉(zhuǎn)義）：
HTML
</script>
到了這里，關(guān)于JS中常用的的選擇器，JavaScript獲取HTML標簽元素的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
