JavaScript引入方式
外部引入
在head或者body中，添加以下代碼
<script type="text/javascript" src="js/demo.js"></script>內部引入
在head或body中，定義script標簽，然后在script標簽里面寫js代碼
<script>alert("這是js的內部引入");</script>DOM
DOM是什么
DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。?
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹。
HTML DOM 樹
JS操作DOM類似對xml文件操作。
DOM標準規定HTML文檔中的每個成分都是一個節點(node)：
- 文檔節點(document對象)：代表整個文檔
- 元素節點(element 對象)：代表一個元素（標簽）
- 文本節點(text對象)：代表元素（標簽）中的文本
- 屬性節點(attribute對象)：代表一個屬性，元素（標簽）才有屬性
- 注釋是注釋節點(comment對象)
JavaScript 可以通過DOM創建動態的 HTML：
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
?
查找標簽
直接查找
document.getElementById 根據ID獲取一個標簽
document.getElementsByClassName 根據class屬性獲取
document.getElementsByTagName 根據標簽名獲取標簽合集注意：
涉及到DOM操作的JS代碼應該放在文檔的哪個位置。
間接查找
parentElement 父節點標簽元素
children 所有子標簽
firstElementChild 第一個子標簽元素
lastElementChild 最后一個子標簽元素
nextElementSibling 下一個兄弟標簽元素
previousElementSibling 上一個兄弟標簽元素節點操作
創建節點
var divEle = document.createElement("div");添加節點
語法：
追加一個子節點（作為最后的子節點）
somenode.appendChild(newnode)；
把增加的節點放到某個節點的前邊。
somenode.insertBefore(newnode,某個節點);
示例：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);刪除節點：
語法：
獲得要刪除的元素，通過父元素調用該方法刪除。
somenode.removeChild(要刪除的節點)
替換節點：
語法：
somenode.replaceChild(newnode, 某個節點);
屬性節點
獲取文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML設置文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")// 自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."獲取值操作
語法：
elementNode.value
適用于以下標簽：
- .input? ?
- .select
- .textarea?
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);class的操作
className 獲取所有樣式類名(字符串)classList.remove(cls) 刪除指定類
classList.add(cls) 添加類
classList.contains(cls) 存在返回true，否則返回false
classList.toggle(cls) 存在就刪除，否則添加指定CSS操作
obj.style.backgroundColor="red"JS操作CSS屬性的規律：
1.對于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position2.對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。
常用事件
?
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。onfocus 元素獲得焦點。 // 練習：輸入框
onblur 元素失去焦點。 應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用于表單元素,當元素內容被改變時觸發.（select聯動）onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下并松開。
onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。onselect 在文本框中的文本被選中時發生。
onsubmit 確認按鈕被點擊，使用的對象是form。?
?綁定方式：
方式一：
<div id="d1" onclick="changeColor(this);">點我</div>
<script>function changeColor(ths) {ths.style.backgroundColor="green";}
</script>注意：
this是實參，表示觸發事件的當前元素。
函數定義過程中的ths為形參。
方式二：
?
<div id="d2">點我</div>
<script>var divEle2 = document.getElementById("d2");divEle2.onclick=function () {this.innerText="呵呵";}
</script>?
摘抄自：https://www.cnblogs.com/liwenzhou/p/8011504.html
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
)
)
)
