随手笔记08-BOM操作，表单操作，body相关位置属性

一、表单操作

1. 变单元素的获取

可以根据name属性获取表单元素

<form action="./2.html" id="myForm">
        <label for="">用户名：</label><input type="text" name="myName"><br>
        <label for="">密码：</label><input type="password" name="pwd"><br>
        <!-- <input type="checkbox" name="love">爬山 -->
        <button>登录</button>
</form>

   var form=document.getElementById('myForm');
		//通过name属性获取表单元素
        console.log(form.myName.value);
        console.log(form.pwd.value);

2. 表单事件

事件名	用法
onchange	内容改变事件（一般用于checked、radio、select）
oninput	输入框内容改变事件
onfocus	获取焦点事件
onblur	失去焦点事件
onsubmit	表单提交事件
onreset	表单重置事件

3. 表单常见方法

方法名	用法
focus()	获得焦点
blur()	失去焦点
submit()	提交表单
select()	下拉选择文字

4. 表单提交
   表单提交的几种方式，默认是return true 所以在放在表单内部的button按钮虽然没有任何功能却也可以提交表单

提交表单的方式	用法
onsubmit	表单提价事件
return “”	返回空字符，提交表单
return true	默认提交
return false	不提交表单

注意：只要不是return false，表单均会提交，return不能忘记加

<form action="http://www.baidu.com" onsubmit="return val()" id="myForm">

二、 BOM

1. BOM定义

Browser object model 浏览器对象模型 允许通过js操作一部分浏览器的内容

2. window对象
   • 是一个顶级对象，页面声明的变量和函数都会成为window对象的属性和方法（顶级对象可以省略）
   • 常见方法
     alert() 警告框
     prompt() 提示框
     confirm() 确认框
     open(url,target,params) 打开一个新的窗口
     参数说明：
     url 要打开的窗口的地址
     target: _self 在当前页面中打开 _blank 在新窗口中打开页面（默认）
     params: 窗口样式设置
     close() 关闭窗口页面
3. History对象
   • back() 回退一个页面
   • forward() 前进一个页面
   • go(url|number) 去指定的页面 ，例如：go(-1) 回退一个页面
4. Location对象

保存了与url相关的信息的一个对象

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

三、body相关位置属性

1. client系列（只读，返回值不带单位）

属性	描述
clientWidth	width+左右padding
clientHeight	height+上下padding
clientLeft	左边框的值
clientTop	上边框的值

2. offset系列（只读，返回值不带单位）

属性	描述
offsetWidth	宽度(width+padding+border)
offsetHeight	高度(height+padding+border)
offsetLeft	左偏移量(当前元素距离父元素的左边距)
offsetTop	上偏移量(当前元素距离父元素的上边距)
offsetParent	返回元素带有定位的父级元素，如没有定位，返回body

3. scroll系列（非只读，可以赋值）

属性	描述
scrollWidth	可滚动区域的宽度
scrollHeight	可滚动区域的高度
scrollTop	折叠的不可见的滚动的高度
scrollLeftt	折叠的不可见的滚动的左边距

页面被卷去的头部距离：window.pageYoffset
页面被卷去的左部距离：window.pageXoffset
注意：兼容性不好IE9以后才支持

解决兼容问题：

声明DTD，使用document.documentElement.scrollTop
未声明DTD，使用document.body.scrollTop