Dom编程

Dom简介

Dom是由 1 Bom (Browser Object Modle:浏览器对象模型)

​ 2 Dom

​ 3 事件

​ 4 表单

Reference error:引用错误

SyntaxError:语法错误

Bom

(Browser Object Modle:浏览器对象模型)

由以下构成

window 对象：浏览器窗口对象，是所有 BOM 对象的顶层对象 【全局对象】

navigator 对象：浏览器对象，包含了所有浏览器相关的信息

screen 对象：屏幕对象，包含所有屏幕相关的信息

history 对象：历史对象，包含用户访问页面的历史信息

location 对象：路径对象，包含了网页路径的相关信息

document 对象： 文档对象，包含了 HTML 文档的相关信息【dom对象】

window 对象

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

Window 对象属性

pageXOffset

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置

pageYOffset

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。

screenLeft

screenTop

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。

所有主流浏览器都支持screenLeft和screenTop属性，Firefox除外。

screenX screenY

sscreenX和screenY属性返回窗口相对于屏幕的X和Y坐标。属性返回窗口相对于屏幕的X和Y坐标。

Window 对象方法

alert()

alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框。

alert(message)

open()

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法：window.open(URL,name,specs,replace)

open("./sub.html", "_blank", "width=200,height=200");

setTimeout()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

提示： 1000 毫秒= 1 秒。

提示： 如果你只想重复执行可以使用 setInterval() 方法。

提示： 使用 clearTimeout() 方法来阻止函数的执行。

语法

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
param1, param2, ...	可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

返回值:

返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

clearTimeout()

阻止 setTimeout() 方法执行函数 :

定义

clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。

clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。
注意: 要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量：

没有返回值。

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示： 1000 毫秒= 1 秒。

提示： 如果你只想执行一次可以使用 setTimeout() 方法。

 function foo(a) {
    console.log(a);
 }

setInterval(() => {
    foo(1)
  }, 1000);//表示每过1s输出a,并且重复执行

语法

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)

code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...	可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

**返回值:**返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。

clearInterval()

定义：

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：

没有返回值。

   function foo() {
            console.log(123123);
        }
        let timer = setInterval(foo, 3000);
        clearInterval(timer);
        timer = setInterval(foo, 3000);

在函数中添加return结束代码执行

navigator浏览器对象

screen对象 （屏幕）

avaiHeight:(不包括windows任务栏)

avaiwidth(不包括windows任务栏)

Height(总高度)

width(总宽度)

History对象

包含在浏览器中访问过的URL ，1 对象属性：length,历史列表中的网址数

方法：1 back()加载history列表中的前一个URL

​ 2 forward()下一个URL

​ 3 go() 加载具体某个页面 复数：上一个页面，正数：下一个页面。当前࿱