一、根據 id 獲取元素
語法格式：
document.getElementById(elementId); 通過標簽的 id 屬性查找標簽 dom 對象， elementId 是標簽的 id 屬性值
Demo:
1 var main = document.getElementById('main'); 2 console.log(main); // 獲取到的數據類型 HTMLDivElement，對象都是有類型的。
注意：由於id名具有唯一性，部分瀏覽器支持直接使用id名訪問元素，但不是標准方式，不推薦使用。如果頁面上沒有對應的 id，此時返回 null。
二、根據標簽名獲取元素
語法格式：
doucument.getElementsByTagName(tagName); 通過標簽名查找標簽 dom 對象。 tagname 是標簽名
Demo：
1 var divs = document.getElementsByTagName('div'); 2 for (var i = 0; i < divs.length; i++) { 3 var div = divs[i]; 4 console.log(div); 5 }
注意：
因為一個文檔里面可能有多個同名的標簽，獲取獲取的是一個偽數組（集合），可以對其進行遍歷。
獲取到的集合是動態集合，即往頁面再次添加元素時，會自動更新集合內元素的個數。
三、根據 name 獲取元素
語法格式：
doucument.getElementsByName(elementName); 通過標簽的 name 屬性查找標簽 dom 對象， elementName 標簽的 name 屬性值
Demo:
1 var inputs = document.getElementsByName('hobby'); // 獲取的是一個偽數組 2 for (var i = 0; i < inputs.length; i++) { 3 var input = inputs[i]; 4 console.log(input); 5 }
注意：此方法存儲瀏覽器的兼容性，IE9+ 以后才支持。
四、根據類名獲取元素
語法格式：
document.getElementsByClassName(className); 通過標簽的 class 屬性查找 dom 對象
Demo：
1 var mains = document.getElementsByClassName('main'); // 獲取的是一個偽數組 2 for (var i = 0; i < mains.length; i++) { 3 var main = mains[i]; 4 console.log(main); 5 }
五、根據選擇器獲取元素
1、querySelector()
語法格式：
querySelector(選擇器名);
注意：使用該方法只會返回第一個匹配的元素。
Demo：
1 var element = document.querySelectorAll('.a'); 2 console.log(element)
2、querySelectorAll()
語法格式：
querySelectorAll(選擇器名);
注意：使用此方法可以返回所有匹配到的元素
Demo：
1 var elements = document.querySelectorAll('.a'); 2 consoloe.log(elements);
注意：這兩個方法都是根據選擇器來獲取元素，存在瀏覽器兼容問題，IE8 以后才執行