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"; //選擇所有的，返回類似數組

總結

以上是生活随笔為你收集整理的02-DOM选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。