javascript
JavaScript document对象
1. 什么是document對象
document對象是文檔的根節點，每張網頁都有自己的document對象只要瀏覽器開始載入 HTML 文檔，該對象就存在了，可以直接使用。
2. document對象的屬性
2.1 document.doctype
document.doctype，指向<doctype>節點，即文檔類型（Document Type Declaration，簡寫DTD）節點。HTML 的文檔類型節點，一般寫成<!DOCTYPE HTML>。如果網頁沒有聲明 DTD，該屬性返回null。
<!DOCTYPE html> <html lang="en"> <head></head> <body><script>console.log(document.doctype); </script><!-- <!DOCTYPE html> --> </body> </html>2.2 document.documentElement
document.documentElement屬性返回當前文檔的根節點（root），一般是<html>節點。
2.3 document.head
document.body屬性指向<head>節點。
2.4 document.body
document.head屬性指向<body>節點。
3. document對象的方法
3.1 document.write()
document.write方法用于向當前文檔寫入內容。
3.2 document.getElementsByTagName()
document.getElementsByTagName方法搜索 HTML 標簽名，返回符合條件的元素。它的返回值是一個類似數組對象（HTMLCollection實例），可以實時反映 HTML 文檔的變化。如果沒有任何匹配的元素，就返回一個空集。
<!DOCTYPE html> <html lang="en"> <head></head> <body><p>文本1</p><p>文本2</p><p>文本3</p><script>console.log(document.getElementsByTagName("p"));</script><!-- HTMLCollection(3)?[p, p, p] --> </body> </html>3.3 document.getElementsByClassName()
document.getElementsByClassName方法返回一個類似數組的對象（HTMLCollection實例），包括了所有class名字符合指定條件的元素，元素的變化實時反映在返回結果中。
<!DOCTYPE html> <html lang="en"> <head></head> <body><div class="box">文本1</div><div>文本2</div><div class="box">文本3</div><script>console.log(document.getElementsByClassName("box"));</script><!-- HTMLCollection(2)?[div.box, div.box]--> </body> </html>3.4 document.getElementById()
document.getElementById方法返回匹配指定id屬性的元素節點。如果沒有發現匹配的節點，則返回null。
<!DOCTYPE html> <html lang="en"> <head></head> <body><div>文本1</div><div id="box">文本2</div><div>文本3</div><script>console.log(document.getElementById("box"));</script><!-- <div id="box">文本2</div> --> </body> </html>3.5 document.querySelector()和document.querySelectorAll()
document.querySelector方法接受一個 CSS 選擇器作為參數，返回匹配該選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
document.querySelectorAll方法返回所有匹配選擇器的元素節點。
<!DOCTYPE html> <html lang="en"> <head></head> <body><div>文本1</div><div>文本2</div><div>文本3</div><script>console.log(document.querySelector("div"));<!-- <div>文本1</div> -->console.log(document.querySelectorAll("div"));<!-- NodeList(3)?[div, div, div] --></script> </body> </html>3.6 document.createElement()
document.createElement方法用來生成元素節點，并返回該節點。
var newDiv = document.createElement('div');3.7 document.createTextNode()
document.createTextNode方法用來生成文本節點（Text實例），并返回該節點。它的參數是文本節點的內容。
var newContent = document.createTextNode('Hello');3.8 document.createAttribute()
document.createAttribute方法生成一個新的屬性節點（Attr實例），并返回該節點。它的參數是屬性的名稱。
var attribute = document.createAttribute("class");總結
以上是生活随笔為你收集整理的JavaScript document对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关注这场直播，了解能源行业双碳目标实现路
- 下一篇： JavaScript 学习笔记 ——do