网页需要交互,但网页如果很复杂,交互的话怎么去操控呢?
事实上,网页上的对象按照一定的结构排列
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事件
- 在窗口完成文档内容加载时触发