JavaScript day06 DOM程式設計4和BOM屬性和方法
一、HTML DOM
1.Document物件
1.1屬性
title
描述:獲取/設定標題欄資訊
語法: document.title = value 或 var 變數名稱 = document.title
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function changeTitle(){ document.title = '網頁標題'; } </script> </head> <body> <input type="button" value="單擊我,設定標題欄資訊" onclick="changeTitle()"> </body> </html>
head
描述:獲取文件的head物件
語法:Element document.head
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非同步載入JS文件</title> <script> function loadJS(){ var scriptEle = document.createElement('script'); scriptEle.src = 'scripts/common.js'; document.head.appendChild(scriptEle); } </script> </head> <body> <input type="button" value="單擊我,載入common.js檔案" onclick="loadJS()"> </body> </html>
body
描述:獲取文件的body物件
語法:Element document.body
images
描述:返回文件中所有的影象組成的集合(陣列)
語法:NodeList document.images
forms
描述:返回文件中所有的表單組成的集合(陣列)
語法:NodeList document.forms
links
描述:返回文件中所有的標記組成的集合(陣列)
語法:NodeList document.links
anchors
描述:返回文件中所有的標記組成的集合(陣列)
語法:NodeList document.anchors
1.2方法
querySelectorAll()
描述:返回由使用指定的CSS選擇器的物件組成的集合(陣列)
語法:NodeList document.querySelectorAll(selector)
說明:該方法支援所有CSS3選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelectorAll()方法</title>
<script>
function getObjectNum(){
//返回文件中所有使用t1 CSS類的物件所形成的陣列
var eles = document.querySelectorAll('.t1');
window.alert(eles.length);
}
</script>
</head>
<body>
<p class="t1">段落</p>
<div class="t1">DIV</div>
<h2 class="t1">標題</h2>
<h3 class="t1">標題</h3>
<div class="t1">DIV</div>
<input type="button" value="獲取使用.t1類的物件的數量" onclick="getObjectNum()">
</body>
</html>
querySelector()
描述:返回由使用指定的CSS選擇器的物件的第一個元素
語法:Element document.querySelector(selector)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelectorAll()方法</title>
<script>
function changeContent(){
var pEle = document.querySelector('.t1');
pEle.innerHTML = '中華人民共和國';
}
</script>
</head>
<body>
<p class="t1">段落</p>
<div class="t1">DIV</div>
<h2 class="t1">標題</h2>
<h3 class="t1">標題</h3>
<div class="t1">DIV</div>
<input type="button" value="設定使用.t1類的第一物件的內容" onclick="changeContent()">
</body>
</html>
2.Element物件
2.1屬性
tagName
描述:獲取元素的標記名稱
語法:string Element.tagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function getTagName(){
var ele = document.getElementById('p');
window.alert(ele.tagName);
}
</script>
</head>
<body>
<div id="p">中華人民共和國</div>
<input type="button" value="單擊我,獲取id為p的元素的名稱" onclick="getTagName()">
</body>
</html>
2.2方法
querySelector()
描述:返回由使用指定的CSS選擇器的物件的第一個元素
語法:Element Element.querySelector(selector)
querySelectorAll()
描述:返回由使用指定的CSS選擇器的物件組成的集合(陣列)
語法:NodeList Element.querySelectorAll(selector)
二、BOM
1.BOM(Browser Object Model),瀏覽器物件模型,提供與瀏覽器相關的API.
window物件是BOM的頂級物件,代表瀏覽器視窗或iframe或frame.
2.屬性
document
描述:返回HTMLDocument物件
history
描述:返回History物件
screen
描述:返回Screen物件
navigator
描述:返回Navigator物件
location
描述:返回Location物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location物件</title>
<script>
function redirect(){
var selEle = document.getElementById('friendLink');
var url = selEle.value;
//設定瀏覽器位址列中的地址為獲取到的資訊
location.href = url;
}
</script>
</head>
<body>
友情連結:
<select id="friendLink" onchange="redirect()">
<option value="">請選擇</option>
<option value="http://www.sina.com.cn">新浪</option>
<option value="http://www.163.com">網易</option>
<option value="http://www.taobao.com">淘寶</option>
</select>
</body>
</html>
Math
描述:返回Math物件
3.方法
alert()方法
描述:彈出警示對話方塊(只有一個確定按鈕)
語法:window.alert(string)
confirm()方法
描述:彈出詢問對話方塊(有確定和取消兩個按鈕)
語法:bool window.confirm(string)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function removeItem(){
if(window.confirm('確認要刪除嗎?\n刪除後將無法恢復')) {
window.alert('新聞刪除成功');
}
}
</script>
</head>
<body>
<table width="100%" cellpadding="10" cellspacing="0" border="1">
<tr>
<td>關於HTML的問題</td>
<td>張三</td>
<td><a href="#" onclick="removeItem()">刪除</a></td>
</tr>
<tr>
<td>關於CSS的問題</td>
<td>李四</td>
<td>刪除</td>
</tr>
<tr>
<td>關於JavaScript的問題</td>
<td>王五</td>
<td>刪除</td>
</tr>
</table>
</body>
</html>
setInterval()
描述:每間隔指定的時間執行相關的程式碼(重複執行)
語法:int window.setInterval(function,milliseconds)
clearInterval()
描述:清除由setInterval()設定的timeId
語法:window.clearInterval(int timeId)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 align="center">使用者註冊許可協議</h1>
<p align="center">...</p>
<p align="center">...</p>
<p align="center">...</p>
<p align="center">
<input type="button" value="我同意(5)" disabled id="agree" onclick="nextStep()">
</p>
</body>
<script>
function nextStep(){
location.href = 'http://www.baidu.com';
}
var i = 4;
var timeId = window.setInterval(function(){
document.getElementById('agree').value = '我同意(' + i + ')';
if(i==0){
window.clearInterval(timeId);
document.getElementById('agree').value = '我同意';
document.getElementById('agree').disabled = false;
}
i--;
},1000);
</script>
</html>
setTimeout()
描述:間隔指定的時間後執行相關的程式碼(執行一次)
語法:int window.setTimeout(function,milliseconds)
clearTimeout()
描述:清除由setTimeout()設定的timeId
語法:window.clearTimeout(int timeId)
parseInt()
描述:轉換成整數
語法:int parseInt(value)
parseFloat()
描述:轉換成浮點數
語法:int parseFloat(value)
isNaN
描述:檢測值是否為NaN(Not a Number)
語法:bool isNaN(value)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
console.log(parseInt(3.7999)); //3
console.log(parseInt('379'));//合法的數字字串開頭
console.log(parseInt('3e7'));//合法的數字字串開頭
console.log(parseInt('e37'));//非法的數字字串開頭
console.log(parseFloat(3.7999)); //3
console.log(parseFloat('379'));//合法的數字字串開頭
console.log(parseFloat('3e7'));//合法的數字字串開頭
console.log(parseFloat('e37'));//非法的數字字串開頭
console.log(isNaN(5));
console.log(isNaN(NaN));
</script>
</head>
<body>
</body>
</html>
4.Location物件
href屬性
描述:獲取/設定位址列中的地址資訊
語法:
location.href = string
var 變數名稱 = location.href
search屬性
描述:獲取位址列"?"以後所有的引數
語法:string location.search
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
<script>
function changeUrl(){
//名稱=值&名稱=值
location.href = '09_search.html?id=1&action=remove';
}
function getParameter(){
var str = location.search;
window.alert(str);
}
</script>
</head>
<body>
<p><input type="button" value="(1).單擊我,改變位址列的表現" onclick="changeUrl()"></p>
<p><input type="button" value="(2).獲取位址列的引數" onclick="getParameter()"></p>
</body>
</html>
reload()
描述:重新載入文件
語法:location.reload(void)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
</head>
<body>
<h1 id="random"></h1>
<input type="button" value="單擊我,重新整理頁面" onclick="refresh()">
</body>
<script>
document.getElementById('random').innerHTML = Math.random();
function refresh(){
//重新整理頁面
location.reload();
}
</script>
</html>
5.Screen物件
width屬性
描述:獲取顯示解析度寬度
語法:number screen.width
height
描述:獲取顯示解析度高度
語法:number screen.height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.alert('解析度:' + screen.width + 'X' + screen.height);
</script>
</head>
<body>
</body>
</html>
6.History物件
back()
描述:後退一步
語法:history.back(void)
forward()
描述:前進一步
語法:history.forward(void)
go()
描述:前進/後退
語法:history.go(number)
說明:如果為負數,則後退;否則前進;
history.back() 等價於 history.go(-1)
history.forward() 等價於 history.go(1)
7.Navigator物件
userAgent屬性(簡稱UA)
描述:返回代理器資訊
語法:string navigator.userAgent
三、JSON
1.JSON基礎
JSON(JavaScript Object Notation),是一種輕量級的資料交換格式;
JSON的官網 http://www.json.org
2.JSON支援的資料格式
陣列:[value,…]
物件:{property:value,…}