获取元素的五种方式

最新推荐文章于 2023-09-16 21:46:01 发布

CHENww_

最新推荐文章于 2023-09-16 21:46:01 发布

阅读量1.8k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/CHENww_/article/details/120479150

版权

一、getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

    <p id="demo">单击按钮来改变这一段中的文本。</p>
	<button onclick="myFunction()">点我</button>
	<script>
		function myFunction() {
			document.getElementById("demo").innerHTML = "getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。";
		};

	</script>

二、getElementsByName() 方法可返回带有指定名称的对象的集合。

<body>

	<input name="x" type="radio">
	<input name="x" type="radio">
	<input type="button" onclick="myFuntion()" value="多少名称为 'x'的元素?">
</body>
<script>
	function myFuntion() {
		var x = document.getElementsByName("x");
		alert(x);
	}
</script>

三、getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

注意：NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

<ul class="example">
		<li class="child">Coffee</li>
	</ul>
	<button onclick="myFunction()">点我</button>
	<script>
		function myFunction() {
			var list = document.getElementsByClassName("example")[0];
			list.getElementsByClassName("child")[0].innerHTML = "Milk";
		}
	</script>

四、querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

	<p id="demo">id="demo" 的 p 元素</p>
	<p> 点击按钮修改 id="demo" 的 p 元素内容</p>
	<button onclick="myFunction()">点我</button>
	<script>
		function myFunction() {
			document.querySelector("#demo").innerHTML = "Hello World!";
		}
	</script>

五、querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

提示: 你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。

<h2 class="example">使用 class="example" 的标题</h2>
	<p class="example">使用 class="example" 的段落</p>

	<p>点击按钮为 class="example" (索引为 0) 的第一个元素设置背景颜色。</p>

	<button onclick="myFunction()">点我</button>
	<script>
		function myFunction() {
			var name = document.querySelectorAll(".example");
			name[0].style.backgroundColor = "red";
		}
	</script>

CHENww_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取元素的五种方式

一、getElementById()方法可返回对拥有指定ID的第一个对象的引用。 <p id="demo">单击按钮来改变这一段中的文本。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "getElementById(...
复制链接

扫一扫