DOM部分收尾 操作表单

DOM部分收尾 操作表单

(1)      获取表单元素：form.表单元素name属性

①    例如 <input name=”a”/>  form.a

(2)      表单元素的事件

①    Form元素的事件

1)       onsubmit 提交事件  表单提交触发事件 

1. 在事件的处理函数中 return false 就可以阻断表单的提交

2)       onreset 重置事件   表单发生重置的时候触发事件

1. 在事件处理函数中 return false  就可以阻断表单重置

②    Input 的事件

1)       onfocus  聚焦事件 当input获取焦点的时候 触发事件

2)       onblur  离焦事件  当input失去焦点的时候 触发事件

(3)      表单元素的方法   

①    Form元素的方法

1)       reset：用法：form.reset()  重置表单

2)       submit：用法：form.submit()  提交表单

②    Input元素的方法

1)       Facus：用法：input.facus()  让input聚焦

2)       Blur：用法：input.blur()  让input离焦

3)       Select：用法：input.select() 让input内容选中

1. BOM  BOM：Browser Object Model  浏览器对象模型

(1)      BOM定义：浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

①    提供了独立于内容的：BOM的操作不依赖页面内容，即便没有html内容 也可以使用BOM操作浏览器

②    可以与浏览器窗口进行互动的：BOM主要用于操作浏览器窗口

(2)     

(3)      Window系统对话框

①    Alert

②    Console.log

③    Confirm

1)       弹出一个询问对话框，有确定也有取消

2)      

3)       用法：confirm(“要询问的内容”)

4)       如果用户点击确定 返回值为true  如果点击取消 返回值为false

5)       可以通过返回值 判断用户点击的是 确定还是取消 从而执行不同的操作

④    Prompt

1)       用法：prompt(“要询问的内容”)

2)      

3)       作用：让用户输入一个指定的内容 如果点击确定，prompt返回值为用户输入的内容，如果点击取消，返回值为null

⑤    Document.write

1)       用法：document.write(“写入页面的内容”)

2)       将指定的内容 写入document文档中

(4)      Open和close

①    Open打开新页面

1)       open(url地址，打开方式，设置新页面的大小，是否替换浏览记录)

1. Url地址：要打开的页面的地址
2. 打开方式：“_self”  “_blank”（默认）
3. 可以设置新页面的宽高（必须是_blank的情况下 才可以设置）（默认窗口大小）  “width=xxxpx height=xxxpx”
4. 是否替换浏览记录 true/false（默认是false）
5.  除了url地址之外所有参数都可以不传
6. 当方法在行内引入时调用的时候 需要写作 window.open,因为在行内引入的时候 不存在window环境

②    Close 关闭页面

1)       Close() 可以关闭当前标签页

(5)      location 本地对象  主要用来获取一些和地址相关的信息

①    hash:哈希，锚链接，锚点值 用来获取地址栏中的锚点值

1)       Spa: single page application

②    host:获取服务器名和端口号（如果有）  前提是必须在服务器环境中打开页面

③    hostName：获取服务器名称

④    href：获取地址

⑤    pathname：文件路径

⑥    port：获取端口号

⑦    protocol：获取协议

⑧    search：获取提交的字符串

⑨    location = url地址 跳转指定的url地址

⑩    location.reload()   刷新页面

(6)      History：历史对象  主要用来操作浏览器的前进后退效果

①    forward：跳转到下一条历史记录去

1)       用法：history.forward()

②    back：跳转到上一条历史记录去

1)       用法：history.back()

③    go：跳转到指定的历史记录去

1)       用法：history.go(n)  n是数字

1. 如果n>0 表示要跳转到下n条历史记录去
2. 如果n<0 表示要跳转到上n条历史记录去

(7)      Navigator：导航对象  主要用来记录浏览器相关的一些信息

①    appCodeName：浏览器代号

②    appName：浏览器名称

③    appVersion：浏览器版本

④    plantform：硬件平台   “win32”至少是windows32位的操作系统

⑤    cookieEnabled：是否允许使用cookie true可以使用 false不能使用

⑥    userAgent：用户代理

⑦    systemLanguage：系统语言

(8)      BOM操作元素大小和位置的三大系列属性

①    client：

1)       元素.clientWidth/clientHeight  获取元素自身的可视宽高

1. 可视宽高：元素自身宽高 + padding

2)       元素.clientLeft/clientTop   获取元素自身的左边框 和 上边框的宽度

②    Offset

1)       元素.offsetWidth/offsetHeight  获取元素自身的占位宽高

1. 占位宽高：元素自身宽高 + padding + border

2)       元素.offsetTop/offsetLeft   获取到带定位父元素的顶部和左侧的距离，如果没有带定位父元素，获取到body顶部和左侧的距离

③    Scroll

1)       元素.scrollWidth/scrollHeight  获取元素自身内容的宽高

1. 浏览器窗口的滚动条宽度为17px

2)       元素.scrollTop/scrollLeft   获取元素内容 被卷去的高度/宽度 一般scrollLeft不使用

1. 也可以设置：元素.scrollTop/scrollLeft = “n”

④    上述所有方法中除了scrollTop/scrollLeft之外 别的方法都只能获取不能设置，但scrollTop/scrollLeft 既可以获取也可以设置

(9)      实际案例

①    Onscroll事件  滚动条滚动事件 当滚动条发生滚动的时候触发这个事件

②    这个事件 要添加给滚动条所属的元素

③    如果想获取内容被卷去的高度 需要写作 容器元素.scrollTop

④    如果想获取整个页面被卷曲的高度 就要写作 页面容器.scrollTop

⑤    在标准浏览器中 页面容器为 html元素(document.documentElement)  在ie中页面容器为 body(document.body)

(10)   Onresize 屏幕大小改变事件  当浏览器窗口大小发生变化的时候 触发这个事件