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实例:
<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>