02-DOM选择器

最新推荐文章于 2024-08-06 16:47:23 发布

原创最新推荐文章于 2024-08-06 16:47:23 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css

JS基础专栏收录该内容

28 篇文章

订阅专栏

本文深入讲解了Document Object Model (DOM)的各种选择器使用方法，包括ID选择器、标签名选择器、Class选择器、name属性选择器等，通过具体实例展示了如何用JS操作HTML元素。

02-DOM选择器

Document Object Model（文档对象模型）
我们把这个html看做一个对象树（DOM树），DOM是html文档结构，让js操作html元素而制定的一个规范；DOM的操作对象是文档（Document）
html文件：

		<div id="div">hello div</div>
		<div id="div2">hello div2</div>

		<h1>hello h1</h1>
		<h1>hello h1</h1>

		<div class="demo">hello demo1</div>
		<div class="demo">hello demo2</div>

		<p name="p">hello p</p>
		<p name="p">hello p</p>

		<h1 id="h">h1</h1>
		<h1 class="a">h1</h1>
		<p>p</p>

		<h2 class="h2">h2</h2>
		<h2 class="h2">h2</h2>

js文件：

document.getElementById('div').innerHtml = "hello";   //通过ID选择器来选择标签
document.getElementsByTagName("h1")[1].innerHTML = "您好 h1"; //通过标签名
document.getElementsByClassName("demo")[0].style.color="blue"; //通过Class选择器
document.getElementsByName("p")[0].style.background="yellow"; //通过name属性
document.querySelector("#h").innerHTML="您好 div"; //可以像css一样，选择标签
document.querySelector(".a").innerHTML="您好 aaa";
document.querySelector("p").innerHTML="您好 ppp";
document.querySelectorAll(".h2")[1].style.color="red"; //选择所有的，返回类似数组