模型BOM"/>
JavaScript之浏览器对象模型BOM
浏览器对象模型 (BOM)
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
一、浏览器对象
JS可以获取浏览器提供的很多对象，通过这些对象去得到浏览器的信息。
1、window对象 – 浏览器窗口
// window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
consloe.log('window inner size: ' + window.innerWidth + 'x' + window.innerHeight)// outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
2、navigator对象 – 浏览器信息
这个信息是可以被用户改变的，所以对于不同的浏览器进行不同的操作，不推荐用if条件判断，||更好
var width = window.innerWidth || document.body.clientWidth;
3、screen对象 – 屏幕信息
4、location对象 – 当前页面的URL信息
// 获取完整的URL :8080/path/index.html?a=1&b=2#TOP
location.href;
获取URL的部分值：
// 加载新页面，获取新的URL地址
location.assign();// 重新加载当前页面
location.reload();
5、document对象 – 当前页面
HTML在浏览器中以DOM的形式表示为树形结构，document对象就是整个DOM树的根节点。需要查找DOM树的某个节点（HTML元素)，通常从document对象开始查找。
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"><dt>摩卡</dt><dd>热摩卡咖啡</dd><dt>酸奶</dt><dd>北京老酸奶</dd><dt>果汁</dt><dd>鲜榨苹果汁</dd>
</dl>// 按照ID获取一个DOM节点 -- getElementByTd()
// 按照Tag名称获取一组DOM节点 -- getElementsByTagName()
var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
cookie属性
(1) 定义：
是由服务器发送的key-value标示符。
(2) 作用：
服务器为了区分到底是哪个用户发来的请求，可以用cookie进行区分。当用户登录成功，服务器会发送一个Cookie给浏览器。此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。
(3) 读取和隐患
// js可以通过document.cookie;读取当前页面的Cookie
隐患：用户的登录信息通常也存在Cookie中，为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。
6、history对象 – 不应该使用
JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。
二、弹窗
// 警告栏
alert('sometext');
// 确定框，用户需要点确定或者取消按钮
confirm("sometext");
// 提示框，用户需要输入某个值
prompt("sometext","defaultvalue");
// 换行
alert("Hello\nHow are you?");
三、计时行为
使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
1、setInterval() 方法 — 指定的毫秒数不停地执行指定的代码
可以制作动态时钟的效果
<body>
<p>页面上显示时钟：</p>
// 显示动态时钟
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button><script>
// 用来不停的执行代码
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}
// 用clearInterval停止 setInterval() 方法执行的函数代码
function myStopFunction(){clearInterval(myVar);
}
</script>
</body>
2、setTimeout() 方法 – 在指定的毫秒数后执行指定代码
// 等待3秒，然后弹出 "Hello":
myVar = setTimeOUt(function(){alert("Hello")},3000);
// clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
clearTimeout(myVar);
四、Cookie
Cookie 用于存储 web 页面的用户信息。当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
// 创建+修改
document.cookie="username=John; expires=Thu, 18 Dec 2043 12:00:00 GMT";
// 读取
var x = document.cookie;
// 删除 只需要设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
五、操作表单form
表单：输入框、下拉框等可以接收用户输入。使用js操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。
（1）获取表单的值 + 设置表单的值
a. input.value
// 对于text password hidden 以及select 使用value
var input = document.getElementById('email');
// 获取表单的值
input.value; // '用户输入的值'
// 修改表单的值
input.value = 'test@example';
b. input.checked
// 对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断
// 获取表单的值
input.checked; // 返回的是true或者是false
// 修改表单的值
input.checked = true;
（2）提交表单里的值给服务器
浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。故需要相应本身的onsubmit事件。
<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>
（3）表单验证
验证提交到表单的值是否满足条件
a.自定义验证
// 验证函数
<script>
function validateForm() {// 获取表单输入框的值var x = document.forms["myForm"]["fname"].value;if (x == null || x == "") {alert("需要输入名字。");return false;}
}
</script>// 利用事件进行触发
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
b.浏览器自动验证
<form action="demo_form.php" method="post">// 如果表单字段fname的值为空，required属性会阻止表单提交<input type="text" name="fname" required="required"><input type="submit value="提交">
</form>
c.验证API
约束验证DOM方法
// 用来检查input元素中的数据是否合法的方法
// checkValidity() -- 合法返回true 不合法返回False
// setCustomValidity() -- 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
约束验证DOM属性
更多推荐
JavaScript之浏览器对象模型BOM
发布评论