49 BOM 和DOM
一.BOM
window 物件
1.確認，輸入，
window.alert(123) // 彈框
let ret = window.confirm("是否刪除") //確認
let ret =window.prompt(">>>") // 輸入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <window 物件中列印，彈框，輸入title>Title</title> <script> // window物件 alert // window.alert(123); // let ret=window.confirm("是否刪除?"); // console.log(ret); //true false // let ret2=window.prompt("請輸入驗證碼") // console.log(ret2); </script> </head> <body> </body> </html>
2.定時器
var ID;
ID = setInterval(func名,1000) ; //設定定時器
clearInterval(ID); //清除定時器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title計時器> </head> <body> <script> //計時器 function show_time() { //// 建立時間字串 var now = new Date().toLocaleString();//此變數需要放在函式內部 var el = document.getElementById("jishiqi"); el.value =now; } var ID; //在函式外部先定義一個ID變數，並不賦值，方便其他函式可以引用該變數 function setTimer() { //if 判斷防止，計時器重複設定，沒設定計時器之前ID===underfined if (ID===undefined){ show_time(); //解決需要等待第一秒的問題 ID = setInterval(show_time,1000);//每隔一秒，執行show_time函式一次 } } function stop_time() { clearInterval(ID); ID = undefined; } </script> <input type="text" id ="jishiqi" class="c1"> <button onclick="setTimer()">start</button> <button onclick="stop_time()">end</button> </body> </html>
3.location 物件
location.href ="http://www.baidu.com" 跳轉到指定頁面
location.assign("http://www.baidu.com")跳轉到指定頁面 （assign表示分配，指派）
location.href 拿到整個url
location.search 拿url資料部分
location.host
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //location.herf 獲取url //location.search 獲取url 後的資料部分 // console.log(location.href); console.log(location.search); // location.href = "http://www.baidu.com"; //跳轉到指定的頁面，此處跳轉到百度頁面 // location.assign("http://www.taobao.com");//跳轉到淘寶頁面 console.log(location.host); </script> </body> </html>location物件
二.DOM
文件樹結構：樹形結構
兩個DOM(節點)物件：
1.document物件
2.element物件:所有標籤
1.查詢標籤
1.直接查詢
document.getElementById() //一個結果
document.getElementsByTagName() // 陣列
document.getElementsByClassName() // 陣列
document.getElementsByName() // 陣列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1" id="i1"> <p>123</p> <div class="c2">222</div> </div> <div class="c2">333</div> <script> /* document.getElementById(); // 一個element物件 document.getElementsByClassName(); // 多個element物件構成的陣列 document.getElementsByTagName(); // 多個element物件構成的陣列 document.getElementsByName(); // 多個element物件構成的陣列 document.getElementsByClassName("c2"); */ var c1=document.getElementsByClassName("c1")[0]; console.log("c1",c1); var c2=c1.getElementsByClassName("c2")[0]; console.log(c2) </script> </body> </html>View Code
2.導航查詢
parentElement 父節點標籤元素
children 所有子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
var ul = document.getElementById("target1");//通過id名獲取
var li1 = ul.getElementsByClassName("li1")[0];
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <ul class="box" id ="target1" > <li class="li1">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div></div> <input type="text" name="wang"> <script> // 導航查詢法 var ul = document.getElementById("target1");//通過id名獲取 var li1 = ul.getElementsByClassName("li1")[0]; li1.onclick = function (ev) { // alert(2); this.style.background = "pink"; }; //獲取下一個兄弟節點 var li2 = li1.nextElementSibling; li2.onclick = function () { alert("第2個li"); }; var li3 = li1.nextElementSibling.nextElementSibling; li3.onclick = function () { alert("第3個li"); }; //獲取父節點 var partent = li1.parentElement; partent.onclick = function (ev) { this.style.background ="green"; }; //獲取父節點下的所有子節點 var lis = partent.children; </script> </body> </html>View Code
2..標籤控制
1.文字控制
var ele = document.getElementById("d1");
1.獲取文字節點的內容
ele.innerText //只得到文字 內容
ele.innerHTML //得到ele標籤中所有內容，包括標籤
2.設定文字內容
ele.innerText ="<a>yuan</a>" // 不識別標籤，顯示文字原來的樣子
ele.innerHTML ="<a>yuan</a>" //可以識別標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> <li id="i2"><a href="">123</a></li> <li>234</li> <li>789</li> </ul> <script> let ele=document.getElementById("i2"); // 獲取文字 console.log(ele.innerHTML); console.log(ele.innerText); //賦值文字 //ele.innerHTML="yuan" //ele.innerText="yuan" ele.innerHTML="<a href=''>yuan</a>" ele.innerText="<a href=''>alex</a>" </script> </body> </html>innerHTML和innerText
3.屬性控制
attribute操作
ele.setAttribute("egon","123");
ele.getAttribute("egon");
ele.removeAttribute("alex");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> </ul> <input type="text" id="i2"> <script> let ele=document.getElementById("i1"); let ele2=document.getElementById("i2"); ele.setAttribute("egon","123"); ele.getAttribute("alex"); ele.getAttribute("egon"); ele.removeAttribute("alex") ; ele2.value; ele2.value=0 </script> </body> </html>屬性控制attitude
4.class屬性控制
ele.classList.add("c3")
ele.classList.remove("c2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: rebeccapurple; } .c2{ color: white; } .c3{ font-size: 28px; } </style> </head> <body> <div class="c1">Yuan</div> <script> var ele=document.getElementsByClassName("c1")[0]; ele.classList.add("c3"); ele.classList.remove("c1") </script> </body> </html>class屬性控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } li,ul{ list-style: none; } .box{ width: 100%; height: 600px; } .box .left{ float: left; width: 20%; height: 100%; background: #a3a3a3; } .box .right{ float: right; width: 80%; height: 100%; background: #829094; } .box .left .item{ width: 100%; /*height: 120px;*/ margin-bottom: 5px; } .box .left .item p{ width: 100%; height: 30px; background: red; } .hide{ display: none; } </style> </head> <body> <div class="box"> <div class="left"> <div class="item"> <p class="target">選單一</p> <ul class="it hide"> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> </div> <div class="item"> <p class="target">選單二</p> <ul class="it hide"> <li>22222</li> <li>22222</li> <li>22222</li> <li>22222</li> </ul> </div> <div class="item"> <p class="target">選單三</p> <ul class="it hide"> <li>33333</li> <li>33333</li> <li>33333</li> <li>33333</li> </ul> </div> </div> <div class="right"> </div> </div> <script> //找到需要繫結事件的標籤 var p_lst = document.getElementsByClassName("target"); for (var i=0;i<p_lst.length;i++){ p_lst[i].onclick = function () { //把自己的下一個兄弟節點屬性，設定為顯示 this.nextElementSibling.classList.remove("hide"); //將其他兄弟節點屬性，設定為隱藏 for (var j=0;j<p_lst.length;j++){ if(p_lst[j] !==this){ p_lst[j].nextElementSibling.classList.add("hide"); } } } } </script> </body> </html>選單欄
5.css控制
var ele=document.getElementsByClassName("c1")[0];
ele.style.color="red";
ele.style.fontSize="38px"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="d" id ="d"> python </div> <script> //css 操作 // var d = document.getElementsByClassName("d")[0]; var d =document.getElementById("d"); d.style.width ="200px"; d.style.height ="200px"; d.style.fontSize="20px"; d.style.color = "green"; d.style.border ="1px solid"; d.style.background ="red"; </script> </body> </html>ccs屬性控制