一.DOM操作
查找節點：
1. 直接查找
document.getElementById //根據ID獲取唯一一個標籤
document.getElementsByClassName //根據class屬性獲取一系列標籤
document.getElementsByTagName //根據標籤名獲取一系列標籤
2 間接查找
語法 含義
childNodes 獲取所有的子節點，除了元素還有文本等
children 獲取所有元素子節點，不包含文本
parentNode 獲取父節點
previousSibling 獲取上一個兄弟節點，不包含文本
previousElementSibling 獲取上一個兄弟元素節點，包含文本
nextSibling 獲取下一個兄弟節點，不包含文本
nextElementSibling 獲取下一個兄弟元素節點，包含文本
firstChild 獲取第一個子節點，不包含文本
firstElementChild 獲取第一個子節點，包含文本
lastChild 獲取最後一個子節點，不包含文本
lastElementChild 獲取父元素最後一個元素節點，包含文本
3 增加節點
1、創建新節點
var divEle = document.createElement('div');
2、追加一個子節點（放到最後）
父節點.appendChild(新的子節點)；
3、插入一個子節點（插入到某個節點前）
父節點.insertBefore(新的子節點,某個節點);
4、克隆節點
要複製的節點.cloneNode(); //括號裏不帶參數和帶參數false：只複製節點本身，不復制子節點。
要複製的節點.cloneNode(true); //帶參數true：既複製節點本身，也複製其所有的子節點。
4 刪除、替換節點
父節點.removeChild(要刪除的子節點)；
父節點.replaceChild(新的子節點, 某個子節點);
5 修改/設置節點屬性
1、獲取文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText //只查看所有標籤內的文本
divEle.innerHTML //查看所有子標籤，包括文本和子標籤
2、設置文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText="1" //先清空節點內容，再添加文本(字符串:'<h1>我是h1</h1>')
divEle.innerHTML="<p>2</p>" //先清空節點內容，可識別文本內的html標籤(標籤:'<h1>我是h1</h1>')
3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
4、自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."
6 獲取元素的值
適用於input、select、textarea標籤
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')
x.value
y.value
z.value
7 class操作
var x=document.getElementById('div1')
x.classList.remove('col1') //x.classList裏刪除class='col1'
x.classList.add('col1') //x.classList裏添加class='col1'
x.classList.contains('col1') //x.classList裏是否有class='col1'
x.classList.toggle('col1') //沒有就添加，返回true，有就刪除，返回false
8 css操作
obj.style.backgroundColor="red" //此處設置的是行內樣式
1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可 如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可 如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
9 事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時執行一段JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
1、常用事件
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素獲得焦點。 // 輸入框
onblur 元素失去焦點。 //應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 //應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下。 //應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onselect //在文本框中的文本被選中時發生。
onsubmit ///確認按鈕被點擊，使用的對象是form。
2、綁定方式
方式一：
行內綁定：直接通過div被點擊來修改自身樣式：
如果你對python感興趣，我這有個學習Python基地，裏面有很多學習資料，感興趣的+Q羣：688244617
<body>
<div id="div1" onclick="changeColor(this)"> 我是div，點我 </div>
<script> //this是實參，表示觸發事件的當前元素
function changeColor(ths) {
ths.style.backgroundColor="green"; //函數定義過程中的ths爲形參
}
</script>
</body>
通過button被點擊來修改另一個div標籤樣式：
<body>
<input type="button" id="b1" value="開關" onclick="change()">
<div class="c1 bg-red"></div>
<script> //<script>必須放在div定義後，可以放在body裏
function change() {
var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1這個標籤
c1Ele.classList.toggle("bg-green"); // 修改classList
}
</script>
</body>
方式二：
直接綁定匿名函數：直接通過div被點擊來修改自身樣式：
<body>
<div id="div1">來，點亮我的綠</div>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick = function() {
this.style.backgroundColor = 'red';
}
</script>
</body>
通過button被點擊來修改另一個div標籤樣式：
<body>
<input type="button" id="b2" value="開關">
<div class="c1 bg-red"></div>
<script>
function change() {
var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1這個標籤
c1Ele.classList.toggle("bg-green"); // 修改classList
}
var b2Ele = document.getElementById("b2"); // 通過JS代碼綁定事件
b2Ele.onclick = ()=>{
change();
}
</script>
</body>
方式三：
先單獨定義函數，再綁定
<div id="box1" ></div>
<script>
var div1 = document.getElementById("box1");
div1.onclick = fn; //注意，這裏是fn，fn代表的是整個函數,fn()指的是返回值。
function fn() { //單獨定義函數
alert("我是彈出的內容");
}
</script>
1 定時器
<body>
<input type="button" id="b1" value="開始">
<input type="button" id="b2" value="停止">
<input type="text" id="i1">
<script>
var t;
function showTime() {
var now = new Date(); // 將當前時間填寫到i1中
var i1Ele = document.getElementById("i1");
i1Ele.value = now.toLocaleString();
}
showTime(); //1找到開始按鈕,給它綁定事件,點擊後每隔1秒執行一次showTime()
var b1Ele = document.getElementById("b1");
b1Ele.onclick = function () {
if (!t){
t = setInterval(showTime, 1000);
}
};
var b2Ele = document.getElementById("b2");//2找到停止按鈕，給它綁定事件，點擊之後就清除定時器
b2Ele.onclick = function () {
clearInterval(t); // 清除的是定時器，
console.log(t);
t = undefined; //t只是一個普通的變量，它保存了定時器的id值,清除定時器後t中還有值
};
</script>
</body>
2 輸入框聚焦
<body>
<input type="text" id="i1" value="海飛絲">
<input type="text" id="i2" value="辣條" onfocus="f1(this);" onblur="f2(this);">
<script> //this指的是當前事件的標籤對象
//方式一
function f1(ths) {
ths.value = "";
}
function f2(ths) {
ths.value = "辣條";
}
//方式二
var i1Ele = document.getElementById("i1");
i1Ele.onfocus = function () { // 給i1設置獲取光標的事件
this.value = "";
};
i1Ele.onblur = function () {
this.value = "海飛絲"; // 給i1設置失去光標的事件
}
</script>
</body>
3 select聯動
<body>
<select id="province">
<option>請選擇省:</option>
</select>
<select id="city">
<option>請選擇市:</option>
</select>
<script>
var s1Ele = document.getElementById("province");
var s2Ele = document.getElementById("city");
var data = {"上海": ["黃浦區", "靜安區"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};
for (let k in data) { // 將省直轄市數據填充到第一個select中
//console.log(k);
let tmp = document.createElement("option");
tmp.innerText = k;
s1Ele.appendChild(tmp); // 將創建的tmp添加到第一個select中
}
s1Ele.onchange = function () { // 當第一個select框的值發生變化之後纔去更新第二個select框
s2Ele.innerHTML = ""; //第二次選擇區時清空第二個select框的option選項
let p = document.createElement("option");//恢復默認選項'請選擇省市'
p.innerText = "請選擇市";
s2Ele.appendChild(p);
//console.log(this.value);
let provine = this.value; //拿到選擇的省或直轄市
// 將province對應的區信息 填充到第二個select中
for (let i = 0; i < data[provine].length; i++) {
let tmp = document.createElement("option");
tmp.innerText = data[provine][i];
s2Ele.appendChild(tmp);
}
}
</script>
</body>