網頁需要交互，但網頁如果很複雜，交互的話怎麼去操控呢？
事實上，網頁上的對象按照一定的結構排列
DOM（Document Object Model）
操控網頁的標準
- 規定了HTML文檔中各個對象屬性、方法和事件的標準
- 描述了整個HTML文檔，瀏覽器通過它管理和顯示各個元素
- 我們通過編程訪問來修改
DOM是我們操控整個網頁的標準
對象關係
對象佈局
Window對象和常用方法
window對象屬性
document
！！！中國人口何其多，如何找到某個人
方法1：身份證號碼 document.getElementById（“元素id”）
方法2：省份/城市/區縣/街道/小區/門牌號/姓名 form名稱.元素名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試操控對象的方法</title>
<script type="text/javascript">
function GetUserInfo(){
//window對象是頂層對象對象，可以忽略不寫，document/window.document
var userName = document.getElementById("userName").value;
var pwd = userForm.pwd.value;
alert(userName);
alert(pwd);
}
</script>
</head>
<body>
<form name="userForm" method="">
賬戶名：<input type="text"id="userName"/>
密碼：<input type="text" name="pwd"/>
<input type="button" value ="提交" onclick="GetUserInfo()" />
</form>
</body>
</html>
每個html標籤都有id和name屬性
getElementBy() 根據元素ID獲取唯一對象
getElementByName() 根據元素名稱獲取一組同名對象
location
填寫URL，改變頁面跳轉或加載
href-設置/獲取要操作的URL
reload()-重新加載當前頁面
replace(“url”)-加載新頁面替換當前頁面
history
history.back() 後退
history.forward() 前進
剩餘的
狀態欄信息
window.status = “系統當前狀態：正在等待用戶提交數據！”
屏幕寬度
window.screen.width
window對象常用方法
對話框
- alert
- confirm
打開新窗口
<!DOCTYPE html>
<html>
<head>
<title>window對象方法</title>
<script type="text/javascript">
function openNewWindow() {
window.open("userLogin.html", "用戶登錄",
"toolbar=0, location=0, status=0,menubar=0,width=300px,height=200px,scrollbars=1");
}
</script>
</head>
<body>
<input type="button" value="打開新窗口" onclick="openNewWindow()" />
<input type="button" value="關閉當前窗口" onclick="window.close()" />
</body>
</html>
打開模態窗口
<!DOCTYPE html>
<html>
<head>
<title>打開模式對話框</title>
<script type="text/javascript">
function openNewWindow() {
showModalDialog("userLogin.html", "用戶登錄",
"status=0;dialogWidth=300px;dialogHeight=200px;scroll=1");
}
</script>
</head>
<body>
<input type="button" value="打開模式窗口" onclick="openNewWindow()" />
</body>
</html>onLoad事件
- 在窗口完成文檔內容加載時觸發