JavaScript学习06(操作BOM和表单)
操作BOM
window
所有浏览器都支持 window
对象。它代表浏览器的窗口。
所有全局 JavaScript 对象,函数和变量自动成为 window
对象的成员。
全局变量是 window
对象的属性。
全局函数是window
对象的方法。
甚至(HTML DOM 的)document
对象也是 window
对象属性:
window.document.getElementById("header");
等同于:
document.getElementById("header");
screen
window.screen
对象不带 window
前缀也可以写:
属性:
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
Location
window.location
对象可用于获取当前页面地址(URL)并把浏览器重定向到新页面。
一些例子:
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议(http: 或 https:)
- window.location.assign 加载新文档
History
window.history 对象包含浏览器历史。
一些方法:
- history.back() - 等同于在浏览器点击后退按钮
- history.forward() - 等同于在浏览器中点击前进按钮
Navigator
window.navigator 对象包含有关访问者的信息。
一些例子:
- navigator.appName
- navigator.appCodeName
- navigator.platform
操作表单
获取值
如果我们获得了一个 <input>
节点的引用,就可以直接调用 value
获得对应的用户输入值:
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
这种方式可以应用于 text
、 password
、 hidden
以及 select
。但是,对于单选框和复选框, value
属性返回的永远是HTML预设的值,而我们需要获得的实际是用户是否“勾上了”选项,所以应该用 checked
判断:
// <label><input type="radio" name="weekday" id="monday" value="1">
Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2">
Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
设置值
设置值和获取值类似,对于 text
、 password
、 hidden
以及 select
,直接设置 value
就可以:
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
对于单选框和复选框,设置 checked
为true
或 false
即可。
提交表单
通过 <form>
元素的 submit()
方法提交一个表单,例如,响应一个 button
的click
事件,在JavaScript代码中提交表单:
<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script>
这种方式的缺点是扰乱了浏览器对form
的正常提交。浏览器默认点击 <button type="submit">
时提交表单,或者用户在最后一个输入框按回车键。因此,第二种方式是响应 <form>
本身的onsubmit
事件,在提交form
时作修改:
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 继续下一步:
return true;
}
</script>
注意要eturn true
来告诉浏览器继续提交,如果 return false
,浏览器将不会继续提交form
,这种情况通常对应用户输入有误,提示用户错误信息后终止提交form
。