JavaScript表单属性和BOM

一、表单

提交数据

form表单

• ​ action 表单提交的地址(服务器地址/目标地址)
• ​ method GET/POST 表单的提交方式

1.表单的属性：

在表单中，通过为input输入类型添加name属性，可以直接通过表单来获取到目标节点对象。

    <form action="http://www.baidu.com" method="GET" id="form">
        <label for="">用户：</label><input type="text" name="username">
        <label for="">密码：</label><input type="password" name="pwd">
        <!-- 提交 -->
        <input type="submit" value="登录">

        var myForm = document.querySelector("#form");;
        console.log(myForm.username);//用户名输入框
        console.log(myForm.pwd);//密码输入框

​ 2.表单的方法/事件

• onsubmit 表单的提交事件
  • 注意：在表单提交事件中，可以通过return false拦截表单的提交(return其它内容，或者没有return都会提交表单)
• onfocus 获取焦点事件
• onblur 失去焦点事件
• onreset 表单重置事件

方法：

• focus() 获取焦点
• submit() 提交表单
• reset() 重置表单
• blur() 失去焦点

二、BOM

BOM：浏览器对象模型

1.window对象

常见属性：

• document 文档对象
• name 窗口名称

常见方法：

• alert() 警告框

• prompt() 输入框

• confirm() 确认框 返回值布尔类型 true 确定 false 取消

• setTimeout()

• setInterval()

• clearTimeout()

• clearInterval()

• open() 打开新窗口

  • open() 打开一个空白窗口
  • open(地址) 在窗口中打开指定地址
  • open(地址,打开方式) _self _target _blank
  • open(地址,打开方式,窗口样式 )

  open("http://www.baidu.com","_target","width=400,height=400,left=300,top=300");
  

• close() 关闭当前窗口

2.Navigator对象

Navigator对象用来描述浏览器信息

3.History对象

获取历史记录信息

• back()
• forward()
• go()

4.Location对象

Location 对象包含有关当前 URL 的信息。

        // console.log(location.href);
        // location.href="http://localhost:3000/login?username=jack&pwd=123#main"
        console.log(location.protocol);//协议
        console.log(location.host);//主机名+端口号
        console.log(location.hostname);//主机名
        console.log(location.port);//端口
        console.log(location.pathname);//路径
        console.log(location.search);//查询字符串  ?后面的内容
        console.log(location.hash);//哈希

三、body的位置

1.client系列

1) 可视宽高

• clientWidth 节点对象.clientWidth width+padding
• clientHeight 节点对象.clientHeight height+padding

2）边框

• clientTop 上边框
• clientLeft 左边框

3）屏幕可视宽高

• document.documentElement.clientWidth
• document.documentElement.clientHeight

2.offset系列

1)占位的宽高

• offsetWidth width+border+padding
• offsetHeight height+border+padding

2)与定位距离

• offsetLeft
• offsetTop

若没有定位，则offsetLeft和offsetTop是相对于body的left和top值

若定位，则offsetLeft和offsetTop是相对于定位的元素的left值和top值

3.scroll系列

• scrollTop 元素被卷去的高
• scrollLeft 元素被卷去的宽
• scrollWidth 元素真实/实际宽度
• scrollHeight 元素的真实/实际高度

获取页面被卷去的高度：

​ document.documentElement.scrollTop||document.body.scrollTop

示例：

1.回到顶部

2.懒加载

4.BOM事件

scroll 滚动事件

resize 尺寸改变事件