每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。
*: Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問
document 獲取元素
document.getElementById(id) //通過id獲取
document.getElementsByClassName(classname) //通過class獲取 數組形式
document.getElementsByName(name) //通過標籤中的name獲取 數組形式
document.getElementsByTagName(tagname) //通過標籤名稱獲取 數組形式
document.getElementsByTagNameNS(ns,name) //ns表示要查詢的元素的命名空間名稱,name表示要查詢的元素的名稱,其中特殊字符 "*" 代表所有元素
常用方法示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" class="box"></div>
<div class="box"></div>
</body>
</html>
<script type="text/javascript">
var app = document.getElementById("app")
console.log("獲取app")
console.log(app)
var box = document.getElementsByClassName("box")
console.log("獲取box")
console.log(box)
</script>
還有一些其他的方法
document.open() //打開一個流,以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
document.close() //關閉用 document.open() 方法打開的輸出流,並顯示選定的數據。
document.write() // 向文檔寫 HTML 表達式 或 JavaScript 代碼。
document.writeln() //等同於 write() 方法,不同的是在每個表達式之後寫一個換行符。
<html>
<head>
<script type="text/javascript">
function createNewDoc()
{
var newDoc=document.open("text/html","replace");
var txt="<html><body>學習 DOM 非常有趣!</body></html>";
newDoc.write(txt);
newDoc.close();
}
</script>
</head>
<body>
<input type="button" value="打開並寫入一個新文檔" onclick="createNewDoc()">
</body>
</html>