DOM介紹
DOM:文檔對象模型（Document Object Model)
JS中通過DOM來對HTML文檔進行操作。
文檔：表示的就是整個的HTML文檔
對象：表示將網頁中的每一個部分轉換爲對象
模型：使用模型來表示對象之間的關係，方便我們操作
節點介紹
節點：HTML文檔中的每個成分是一個節點，構成HTML文檔的最基本單元
DOM 是這樣規定的：
整個文檔是一個文檔節點
每個 HTML 標籤是一個元素節點
包含在 HTML 元素中的文本是文本節點
每一個 HTML 屬性是一個屬性節點
註釋屬於註釋節點
如：<p id="id">Hello</p>
p標籤爲元素節點
id="id"爲屬性節點
Hello爲文本節點
！！！節點彼此都有等級關係。通過節點可以說明HTML文檔裏面的關係
節點樹關係圖：
獲取節點對象
瀏覽器中爲我們提供了文檔結點document,這個對象是window屬性可在頁面中直接使用，所以文檔結點代表整個網頁。
所以我們可以把文檔節點document看出是一個接口，通過這個接口和其子節點之間的關係，我們可將js技術運用到網頁上。
獲取元素節點的三個方式：
1.getElementById() 通過id屬性獲取一個元素節點對象
例如:獲取id爲btn的按鈕
var btn = document.getElementById("btn");
2.getElementsByTagName() 通過標籤名獲取一組元素節點對象
注意此方法會給我們返回一個類數組對象，會把所有的元素封裝到對象中，類數組，只是一個普通的對象，他的原型是Object。而真實的數組是Array類型。、這說明了他擁有數組對象的功能，有索引。
例如：查找li節點var lis = document.getElementsByTagName("li");
3.getElementsByName() 通過name屬性獲取一組元素節點對象
注意此方法會給我們返回一個類數組對象，會把所有的元素封裝到對象中，這說明了他擁有數組對象的功能，有索引。
例如：查找name=time的所有節點
var time = document.getElementsByName("time");
以上方法只能獲取相關節點的對象輸出是object。
獲取節點對象的內容（innerHTML）
innerHTML獲取其元素的html代碼即html內容
<body>
<p id="hello">你好，js</p>
<input id="input" type="text" class="hh" value="哈哈">哈哈
<script>
var result = document.getElementById("hello").innerHTML;
console.log(result);
var result = document.getElementById("input").innerHTML;
console.log(result);
</script>
</body>
var result = document.getElementById("hello").innerHTML;
會顯示結果：你好，jsp
var result = document.getElementById("input").innerHTML;
其結果會返回空值,因爲像標籤這種自結標籤，其html不是哈哈而是空值，所以innerHtml會失效
但是我們可通過元素。屬性名的方式來顯示其值。
var result = document.getElementById("input").value;
這樣就可以顯示"哈哈"。
注意:元素.class屬性會失效，要想知道元素class的值，我們必須使用：元素.className的方法
JavaScript擺放位置
因爲html文件都是自上向下編譯的，如果js代碼放在html內容的上面，瀏覽器會先編譯js代碼，再編譯html文件
然而，像一些節點對象的id，name或者標籤並沒有被定義，會導致js代碼出錯。會出現Uncaught SyntaxError: Invalid or unexpected token的錯誤
因此要麼js代碼放在html代碼的下面，要麼通過window.onload(){}這個表示待頁面加載成功的方法，將js代碼放到window.onload(){}裏面。
//方法一：放在html代碼的下面
<body>
<p id="hello">你好，js</p>
<input id="input" type="text" class="hh" value="哈哈">哈哈
<script>
var result = document.getElementById("hello").innerHTML;
console.log(result);
var result = document.getElementById("input").innerHTML;
console.log(result);
</script>
</body>
//方法二，放在html代碼上面，但是要放在window.onload的方法體內
<script>
window.onload = function(){
var result = document.getElementById("hello").innerHTML;
console.log(result);
};
</script>
<body>
<p id="hello">你好，js</p>
<input id="input" type="text" class="hh" value="哈哈">哈哈
</body>