一，查詢標籤

基本查詢：
    document.getElementById('查詢的內容')       根據ID獲取一個標籤
    document.getElementsByClassName             根據class屬性獲取
    document.getElementsByTagName                根據標籤名獲取標籤合集

"""
    如果我們的js程式碼需要頁面上某個標籤載入完畢
    那麼該js程式碼應該寫在boby內部最下方或者引入外部js檔案
"""

間接查詢 
    parentElement            父節點標籤元素
    children                 所有子標籤
    firstElementChild        第一個子標籤元素
    lastElementChild         最後一個子標籤元素
    nextElementSibling       下一個兄弟標籤元素
    previousElementSibling   上一個兄弟標籤元素

二，節點操作

var aEle = document.createElement('a')   # 建立標籤
aEle.setAttribute('href','https://www.mmzztt.com/')  # 設定屬性
aEle.innerText = '好不好看?'  # 設定內容文字
document.getElementsByTagName('p')[0].appendChild(aEle)  # 動態新增
"""一定要明確當前手上是什麼物件"""
imgEle.getAttribute('title')  # 獲取標籤屬性


innerText
	不加賦值符號是獲取內部文字
    加了賦值符號是設定內建文字
    # 不可以識別HTML標籤
innerHTML     #(<H>DSADAS</H>)
	不加賦值符號是獲取內部標籤+文字
    加了賦值符號是設定內建標籤+文字
    # 可以識別HTML標籤   # 識別<h>, 網頁文字不顯示

三，獲取值操作

# 普通的文字資料獲取
	標籤物件.value
# 特殊的檔案資料獲取
	標籤物件.value  '''僅僅獲取一個檔案地址而已'''
    標籤物件.files[0]  '''獲取單個檔案資料'''
    標籤物件.files  '''獲取所有檔案資料'''

四，class操作

classList  檢視所有的類
classList.remove(cls)  刪除指定類
classList.add(cls)  新增類
classList.contains(cls)  存在返回true，否則返回false
classList.toggle(cls)  存在就刪除，否則新增

樣式操作：
　　標籤物件.style.屬性名 = 屬性值

五，事件

# 就是給HTML元素新增自定義的功能
繫結事件的方式1
	<button onclick="func()">點我</button>
    <script>
        function func() {
            alert(123)
        }
    </script>
    
繫結事件的方式2
	<button id="d1">選我</button>
    <script>
        // 1.先查詢標籤
        var btnEle = document.getElementById('d1')
        // 2.繫結事件
        btnEle.onclick = function () {
            alert(456)
        }
    </script>

六，內建引數

# this指代的就是當前被操作物件本身
在事件的函式體程式碼內部使用
	btnEle.onclick = function () {
            alert(456)
            console.log(this)
        }