javascript day05 外部物件，document物件(DOM模型)，查詢節點的方式
目錄
1.外部物件
1.BOM 和 DOM
BOM:Browser Object Model
瀏覽器物件模型
將瀏覽器比喻成一個物件-window(網頁初始化時自動建立的),可以通過 window物件操控瀏覽器中的內容
DOM:Document Object Model
文件物件模型
將HTML文件比喻成一個物件 - document(屬於window的一個屬性)，可以靈活的操控網頁上的內容
2.window 物件(BOM模型)
1.作用
表示瀏覽器
window物件下的屬性和方法在使用時，可以省略window.直接去呼叫
ex:
window.alert() --> alert()
window.prompt() --> prompt()
window.document --> document
window.history --> history
2.window中的對話方塊
1.警告框
window.alert() / alert()
2.輸入框
window.prompt() / prompt()
3.確認框
window.confirm("") / confirm("")
點選 "確定" 按鈕的話，返回 True 其餘所有操作，都返回false
練習：
1.網頁中建立一個 按鈕，顯示"關閉"
2.點選按鈕時，彈出確認框"確認關閉網頁嗎"
3.如果點選確定的話，則關閉網頁
關閉網頁: window.close();
4.否則什麼都不操作即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function testConfirm(){
if(confirm("確認關閉網頁嗎")){
close();
}
}
</script>
<button onclick="testConfirm()">關閉</button>
</body>
</html>3.window中的定時器
1.定時器的分類
1.週期性定時器
每間隔一段時間後，就執行一段程式，反覆執行
2.一次性定時器
在指定的時間間隔後，只執行一次操作
2.週期性定時器
1.宣告定時器
var ret = setInterval(fun,time);
fun:函式,要週期性執行的操作，可以是匿名函式
time:要間隔的時間週期,以毫秒為單位的數字
ret:返回已建立好的定時器物件
2.清除定時器
window.clearInterval(timer)
timer: 要停止的定時器物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 儲存建立好的定時器物件
var timer;
// 每隔1s列印當前時間
function showTime(){
timer = setInterval(function(){
var now = new Date();
console.log(now.toLocaleString());
},1000);
}
// 暫停定時器(清除)
function stopTime(){
clearInterval(timer);
}
</script>
<button onclick="showTime()">顯示時間</button>
<button onclick="stopTime()">暫停</button>
</body>
</html> 3.一次性定時器
1.宣告定時器
var ret = setTimeout(fun,time);
fun:等待一定時間後要執行的操作
time:要等待的時長，以ms為單位
ret:建立好的定時器物件
2.清除定時器
clearTimeout(timer);
timer:已經建立好的一次性定時器物件
練習：
1.建立一個按鈕
2.點選按鈕時，彈出一個確認框
確認一下是否要關閉網頁??
3.如果使用者點選確定的話，5s鍾之後再關閉網頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function closePage(){
if(confirm("確認關閉網頁嗎")){
setTimeout(function(){
close();
},5000);
}
}
</script>
<button onclick="closePage()">關閉</button>
</body>
</html>4.window中的屬性
1.screen 屬性
作用：獲取客戶端顯示器的相關資訊
屬性：
1.width / height
獲取螢幕解析度
2.availWidth / availHeight
可用寬度和可用高度
2.history 屬性
1.作用:處理當前視窗所訪問過的url地址們
2.屬性&方法：
1.屬性：length,表示當前視窗所訪問過的url數量
2.方法：
1.back():後退
2.forward():前進
3.go(num)
在當前頁面的基礎上前進或後退num步
num:
取值為正，前進
取值為負，後退
3.location 屬性
1.作用
表示瀏覽器位址列的資訊
2.屬性&方法
1.屬性：href
表示當前視窗中正在瀏覽的網頁地址
如果為href屬性設定值的話，相當於實現了瀏覽器跳轉的功能
location.href = www.baidu.com
2.方法：reload()
從新載入當前網頁，等同於重新整理操作
4.navigator 屬性
1.作用
封裝了瀏覽器的相關資訊
2.屬性
userAgent:顯示瀏覽器相關資訊
5.document 屬性(重點)
2.document 物件(DOM模型)
1.document 的概述
document物件，是DOM模型中的頂層物件，封裝了所有和HTML元素相關的屬性，方法以及事件.
由於document是屬於window物件的核心屬性之一，所以不用宣告在網頁中就可以直接使用
網頁在載入的時候，會在記憶體中形成一顆節點樹(DOM樹).DOM樹會封裝網頁上所有的內容.
網頁上的每一個元素，每一個屬性，每一段文字，都是DOM樹上的一個獨立的"節點"
DOM所提供的操作:
1.查詢節點的操作方法
2.讀取節點的資訊
3.修改節點的資訊
4.刪除節點
5.建立節點
注意：只要DOM樹上的內容產生變化的話，網頁也會一同變化
DOM樹上的節點的型別:
1.元素節點 - 表示的是網頁中的一個元素
2.屬性節點 - 表示的是元素中的一個屬性
3.文字節點 - 表示的是元素中的文字內容
4.註釋節點 - 表示網頁中的一個註釋
5.文件節點 - 表示整個HTML文件
2.查詢元素節點
1.通過元素id查詢元素節點
前提：元素一定要具備id屬性，否則無法查詢
方法:
var elem = document.getElementById("元素ID");(低版本支援)
elem:對應的ID的元素在JS中的表現形式 - DOM元素/DOM物件
變簡介的方法
1.在DOM中，允許直接使用元素的ID進行元素的操作(低版本瀏覽器不支援)
2.放進函式裡
function $(id){
return document.getElementById(id);
}
DOM物件屬性：
1.innerHTML
修改 或 獲取當前DOM物件的HTML檔案
2.innerText
修改 或 獲取當前DOM物件的普通文字
注意：以上兩個屬性只針對雙標記有效
3.value
該屬性只針對表單控制元件，允許獲取或設定表單控制元件的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<p>
使用者名稱稱:<input type="text" id="uname">
</p>
<p>
<button onclick="getUname()">獲取/設定文字框的值</button>
</p>
<script>
function getUname(){
// 通過id=uname 得到input元素
var uname = document.getElementById("uname");
// 獲取 或 設定 uname 的 value值
console.log(uname.value);
// 為 uname 的 value 屬性賦值
uname.value = "動態設定的文字"
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
使用者名稱稱: <input type="text" id="uname">
<button onclick="checkUname()">驗證</button>
</p>
<div id="uname-show"></div>
<script src="common.js"></script>
<script>
/*function checkUname(){
//1.獲取 id 為 uname 的文字框的 value 值
var val = document.getElementById("uname").value;
var uShow = document.getElementById("uname-show");
//2.判斷 value 值得長度範圍,並將結果顯示在 id為 uname-show 的 div 元素中
if(val.length >= 6 && val.length <= 18){
uShow.innerText = "通過";
}else{
uShow.innerText = "使用者名稱稱不規範";
}
}*/
function checkUname(){
//1.獲取 id 為 uname 的文字框的 value 值
var val = $("uname").value;
//2.判斷 value 值得長度範圍,並將結果顯示在 id為 uname-show 的 div 元素中
if(val.length >= 6 && val.length <= 18){
$("uname-show").innerText = "通過";
}else{
$("uname-show").innerText = "使用者名稱稱不規範";
}
}
</script>
</body>
</html>3.讀取節點的資訊
1.節點的型別
屬性：nodeType
值：
返回1：元素節點
返回2：屬性節點
返回3：文字節點
返回8：註釋節點
返回9：文件節點
2.節點名稱
屬性：nodeName
元素節點 或 屬性節點：返回標籤名或屬性名
文字節點：返回 #text
文件節點：返回 #document
註釋節點：返回 #comment
4.獲取 或 設定 元素節點的屬性
所有元素節點具備以下方法，用於操作屬性：
1.getAttribute("attrName")
作用：獲取指定屬性的值
attrName:要獲取的屬性名稱
返回值：attrName屬性對應的值
2.setAttribute("attrName","attrValue")
作用：設定指定屬性的值
attrName:要設定的屬性名
attrValue:要設定的屬性值
3.removeAttribute("attrName")
作用:將 attrName 屬性從節點中刪除出去
練習：
1.建立一個網頁
2.建立一個a標記，
連結地址為:http://www.baidu.com
文字：百度
3.建立一個按鈕，文字為修改
4.點選按鈕時，將a標記修改為
連結地址為：http://www.tmooc.cn
文字：TMOOC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com" id="anchor">百度</a>
<button onclick="btnChange()">變</button>
<script src="common.js"></script>
<script>
function btnChange(){
var a = $("anchor");
a.innerHTML = "TMOOC";
a.setAttribute("href","http://www.tmooc.cn");
}
</script>
</body>
</html>5.元素節點的樣式
1.使用setAttribute() 設定 class 屬性值
相當於動態的為元素繫結類選擇器
elem.setAttribute("class","類選擇器")
2.使用元素的 className 屬性修改 class 的值
elem.className = "類選擇器"
3.變相的使用內聯方式設定屬性
elem.style.css屬性名 = 值;
elem.style.color = "red";
注意：
如果css屬性名中包含"-"的話，"-"要取消，並且後面的單詞的首字元變大寫
elem.style.fontSize = "18px";
//設定 elem 元素有邊框的顏色為紅色
elem.style.borderRightColor:"red";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#main{
width: 300px;
height: 200px;
background: red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<script src="common.js"></script>
<div id="main">這是測試div</div>
<button onclick="btnRadius()">邊框倒角</button>
<button onclick="btnShow()">顯示</button>
<button onclick="btnHide()">隱藏</button>
<script>
function btnRadius(){
$("main").style.borderRadius = "50%";
}
function btnHide(){
// 動態的為 #main 元素繫結 class 屬性，值為 hide
// $("main").setAttribute("class","hide");
$("main").className="hide"
}
function btnShow(){
//動態的將 #main 的 class 屬性值清除
// $("main").removeAttribute("class");
$("main").className = "";
}
</script>
</body>
</html>3.查詢節點的方式
1.根據id查詢
document.getElementById();
2.根據節點的層級關係查詢節點
1.parentNode屬性
返回當前節點的父節點元素
2.childNodes屬性
返回當前節點的所有子元素陣列
3.chiledren屬性
返回當前節點的所有子元素陣列(元素節點)
4.nextSibling
獲取當前節點的下一個兄弟節點
5.nextElementSibling
獲取當前節點的下一個元素兄弟節點
6.previousSibling
獲取當前節點的上一個兄弟節點
7.previousElementSibling
獲取當前節點的上一個兄弟元素節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="main">
<p id="pp">這是main中的p</p>
</div>
<div id="poem">
<h3 id="title">靜夜思</h3>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>舉頭望明月</p>
<p>低頭思故鄉</p>
</div>
<button onclick="getParent()">獲取pp的父元素</button>
<button onclick="getChild()">獲取poem的子元素</button>
<button onclick="getChildren()">獲取poem的子元素</button>
<button onclick="getNextSib()">獲取h3的下一個兄弟節點</button>
<script src="common.js"></script>
<script>
function getNextSib(){
//獲取下一個兄弟節點
//var elem = $("title").nextSibling;
//獲取下一個元素兄弟節點
var elem=$("title").nextElementSibling;
console.log(elem);
}
function getChildren(){
var arr=$("poem").children;
console.log(arr);
}
function getChild(){
var poem = $("poem");
var arr = poem.childNodes;
//迴圈遍歷arr中的每個元素
for(var i=0;i<arr.length;i++){
// console.log(arr[i].nodeType + ":" + arr[i].nodeName);
// 將元素節點過濾出來
if(arr[i].nodeType == 1){
arr[i].style.color="red";
}
// arr[i].style.color = "red";
}
}
function getParent(){
var pp = $("pp");
var parent = pp.parentNode;
console.log(parent);
}
</script>
</body>
</html>