一、代碼抒寫
1.標簽內(nèi)部
2.外部引入
????<head>
????????????<script src=""></script>
????</head>????
3.寫在標簽里面
????<div onclick="alert('你好世界')"></div>
二、 彈窗調(diào)試
????alert普通彈窗 con?rm確認彈窗(很少用) prompt輸入彈窗(很少用)
????console打印日志
1.調(diào)試方法
????<script>
????????alert("內(nèi)容")
????????console.log("打印日志)
????</script>
//通常用來排查錯誤檢查代碼? 使用完之后一定刪除
2.系統(tǒng)彈窗
????<script>
????????????confirm("確定") //警告彈窗
????????????prompt("請輸入你的姓名:") //獲取判斷彈窗
????</script>
三、獲取元素
? ??????獲取元素.事件=行為
? ??????get的性能 > query的性能
1.元素的獲取?
（1）通過ID名獲取
????????????<div id="content" class="wrap"></div>
? ? ? ? ? ? ?<script>
????????????????????console.log(document.getElementById("content"))
????????????</script>
（2）通過class類名獲取
????????????<div id="content" class="wrap"></div>
? ? ? ? ? ? <script>
????????????????console.log(document.getElementsByClassName("wrap")[0])
????????????</script>
注意:這個class類名獲取在低版本也是具有兼容性的,IE8及以下是不支持這個方法的
（3）通過標簽名獲取
????????document.getElementsByTagName("div")[0]
（4）通過name名獲取
????????<div?id="wrap"?class="content"?name="list"></div>
????????<input?type="text"?name="user">
????????<input?type="text"?name="password">
? ? ? ? ?<script>
? ? ? ? ????????console.log(document.getElementsByName("list")[0]);
? ? ? ?????????console.log(document.getElementsByName("user")[0]);
? ? ? ? ? ? ? ?console.log(document.getElementsByName("password")[0]);、
? ? ? ? </script>
（5）通過選擇器獲取
????????query是詢問的意思?selector是選擇的意思?
????<div?id="wrap"?class="content"?name="list">
????????<p>13235</p>
????????<p>1383978</p>
????</div>
????<div?class="content">
????????<p?class="text">8</p>
????????<p?class="text">199</p>
????</div>
????<script>
????????//多個標簽?默認第一個
? ????? ? ? console.log(document.querySelector("#wrap"));
? ? ? ? ? ? console.log(document.querySelector(".content"));
? ????? ? ? console.log(document.querySelector("#wrap?p"));
????????????//獲取所有
????????????console.log(document.querySelectorAll(".content")[0])
? ? ? ????? //指定獲取
????????????console.log(document.querySelectorAll("#wrap?p")[1]);
????</script>
注意:這個選擇器是H5出來的API,也就是說它是具有兼容性的,在我們的IE瀏覽器里面低版本不支持這個API
（6）特殊元素獲取
????<script>
????????console.log(document.documentElement)//獲取整個結構文檔,html架構
????????console.log(document.head)//獲取我們的頭部標簽head
????????console.log(document.body)//獲取body標簽
????????console.log(document.title)//獲取標題標簽
????</script>
四、事件 DOM0級事件
通過鼠標,鍵盤來操作元素的過程就是事件,直接鏈式操作的點后面跟事件是DOM0級事件
1.事件
? ??獲取的元素.事件?=?行為
????<div class="wrap"></div>
????<script>
????????document.getElementsByClassName("wrap")[0].onclick = ? //點擊
????? ? document.getElementsByClassName("wrap")[0].onmouseover = ?? //鼠標移入
????? ? document.getElementsByClassName("wrap")[0].onmouseenter = ?? //鼠標移出
????</script>
2.行為(function)
????????一個元素通過什么事件要做什么事情,就是一個行為,這個行為我們可以稱之為一個功能,我們放在函數(shù)function(){}中操作
?????????行為(函數(shù)體)
????????????????????function?聲明一個函數(shù)?函數(shù)是執(zhí)行的功能
????????????????????function(參數(shù)){?????這里的參數(shù)是在代碼執(zhí)行體里面使用的
????????????????????????????代碼執(zhí)行體
????????????????????}
????????????document.getElementById("wrap").onclick?=?function(){
????????????????????console.log(document.getElementById("wrap"))
????????????}
3.內(nèi)容屬性
????????直接修改標簽的值
?獲取元素.屬性?=?值
????????????innerHTML? 改變元素內(nèi)容? ?解析標簽(讀取標簽)
????????????innerText? ? ?改變元素內(nèi)容? ? 不解析標簽? ? 把標簽作為值渲染
????document.getElementById("wrap").innerHTML?=?456;
????document.getElementById("wrap").innerHTML?='<P>456</P>'
????document.getElementById("wrap").innerText?='<P>456</P>'
