JavaScript基礎DOM介紹和常用操作（5）
day53
參考：https://www.cnblogs.com/liwenzhou/p/8011504.html
JavaScript引入方式
location物件
window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
常用屬性和方法：
location.href 獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新載入頁面
彈出框
可以在 JavaScript 中建立三種訊息框：警告框、確認框、提示框。
警告框
警告框經常用於確保使用者可以得到某些資訊。
當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。
語法：
alert("你看到了嗎？");
確認框（瞭解即可）
確認框用於使使用者可以驗證或者接受某些資訊。
當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。
如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。
語法：
confirm("你確定嗎？")
提示框（瞭解即可）
提示框經常用於提示使用者在進入頁面前輸入某個值。
當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。
如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。
語法：
prompt("請在下方輸入","你的答案")
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
setTimeout()
語法：
var t=setTimeout("JS語句",毫秒)
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。
setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()"。
第二個引數指示從當前起多少毫秒後執行第一個引數（1000 毫秒等於一秒）。
clearTimeout()
語法：
clearTimeout(setTimeout_variable)
舉個例子：
// 在指定時間之後執行一次相應函式
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設定 clearTimeout(timer);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
setInterval()
setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。
語法：
setInterval("JS語句",時間間隔)
返回值
一個可以傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 設定的 timeout。
clearInterval() 方法的引數必須是由 setInterval() 返回的 ID 值。
語法：
clearInterval(setinterval返回的ID值)
舉個例子：
// 每隔一段時間就執行一次相應函式
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設定 clearInterval(timer);
DOM
直接查詢
document.getElementById 根據ID獲取一個標籤
document.getElementsByClassName 根據class屬性獲取
document.getElementsByTagName 根據標籤名獲取標籤合集
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM查詢標籤</title> </head> <body> <div id="d1">div</div> <p class="c1">p標籤</p> <p class="c1">p標籤2</p> <p class="c2">第二個p標籤</p> </body> </html>
分別查詢id、類和標籤名。
間接查詢
parentElement 父節點標籤元素
children 所有子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素