JavaScript操作BOM&DOM

JavaScript组成

ECMAScript     BOM(浏览器对象)     DOM(文档模型)

什么是 ECMAScript?

ECMAScript 是一种语法标准

语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象

编码遵循 ECMAScript 标准

什么是 BOM

BOM ： Browser Object Model （浏览器对象模型）

提供了独立于内容与浏览器窗口进行交互的对象

浏览器对象模型

对象名称 说明

screen 屏幕对象 , 获取屏幕相关信息

navigator 浏览器对象 , 通过这个对象可以判定用户所使用的浏览器

history 历史对象 , 可以用来前进或后退一个页面

location 地址对象 , 可以用来获取当前 URL 的信息

JavaScript 计时事件 在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

localStorage

SessionStorage 存储对象 , 可以用来存储数据 , 和 cookie 相似 , 区别是它是为了更大容量存储设计的 , 在使用上也更加方便,打开后他的值刷新还是会存在,但是网页关闭就没有了

window 窗口对象 , 可以用来控制当前窗口 , 或打开新的窗口

JavaScript 弹窗

弹窗 语法 说明

  警告框 window.alert() 用于确保用户可以得到某些信息

提示框 window.prompt() 用于提示用户在进入页面前输入某个值

确认框 window.confirm() 用于验证是否接受用户操作,他的作用是会有返回值,确定返回ture,取消fales.

confirm() 方法

confirm(" 对话框中显示的纯文本 ")

var r=confirm(" 按下按钮 !");

if (r==true){

x=" 你按下了【确定】按钮 !";

}else{

x=" 你按下了【取消】按钮 !";

}

"0"和'  ',会隐形数据类型转换,结果为ture

0和'' 及null 会隐形数据类型转换,结果为false

window.location 对象

用于获得当前页面的地址 (URL) ，并把浏览器重定向到新的页面

语法 说明

location.href 返回当前页面的 URL 地址路径

location.pathname 返回 URL 的路径名

location.assign() 加载新的文档

location.search地址参数信息

location.port 地址端口

什么是 DOM

DOM ： Document Object Model （文档对象模型）

是 HTML 文档对象模型（ HTML DOM ）定义的一套标准方法，用来访问和操纵 HTML 文档

查找HTML元素

语法 说明

document.getElementById 通过 id 属性获取对象

document.getElementsByTagName 通过标签名获取对象

document.getElementsByClassName 通过 class 属性获取对象

var btn=document.getElementsByTagName('button');

btn[0].οnclick=function(){

alert(" 点点点 ");

}

HTML DOM - 改变 HTML

语法 说明

document.write() 改变 HTML 输出流

对象 .innerHTML= 新的 HTML 改变 HTML 内容

对象 .attribute= 新属性值 改变 HTML 属性

var changeName1=document.getElementById("a").innerHTML=" 流水无意 ";

var changePic1=document.getElementById("b").src="image/a.jpg";

HTML DOM - 改变 CSS

语法 说明

对象 .style.property= 新样式 通过 id 属性获取对象

document.getElementById("a").style.width="100px";

document.getElementById("a").style.height="150px";

练习 1 ：

渲染左侧菜单栏：

JavaScript 计时事件

语法 说明

setInterval() 间隔指定的毫秒数不停地执行指定的代码

clearInterval() 用于停止 setInterval() 方法执行的函数代码利用id来清除

setTimeout() 暂停指定的毫秒数后执行指定的代码

clearTimeout() 用于停止执行 setTimeout() 方法的函数代码

local

setInterval() 方法

setInterval(" 调用的函数 ", 间隔的毫秒数 )

每隔 5 秒 ( 5 000 毫秒 ) 执行函数 a () 一次

a=setInterval(function(){

//do something

}, 5 000)

clearInterval() 方法

clearInterval(setInterval() 返回的 ID 值 )

例如：

b .οnclick=function()

{

//do something

clearInterval( id );

}

setTimeout() 方法

setTimeout(" 调用的函数 ", 等待的毫秒数 )

3 秒 (3000 毫秒 ) 之后执行函数 a () 一次

a =setTimeout(function(){

//do something

},3000)

clearTimeout() 方法

clearTimeout(setTimeOut() 返回的 ID 值 )

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout

setInterval() 与 setTimeout 特点及区别

特点

setInterval() 和 setTimeout() 用来处理延时和定时任务

区别

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，而 setInterval() 则可以在每隔指定的毫秒数循环调用函数或表达式

练习 1 ： 结合日期对象，使用 JavaScript 计时事件制作   实时显示现在的年月日时分秒

练习 2 ：制作轮播图