JS（08）-avaScript操作BOM&DOM

 

i f(  ) 判断中， 带空格的字符“  ”串和字符串为0“0”的会

数据类型转换，返回的值是ture，因为字符串是有内容的

0 和“”以及null会隐式数据类型转换为false

JavaScript组成

ECMAScript    BOM     DOM

什么是ECMAScript

ECMAScript是一种语法标准

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

编码遵循ECMAScript标准

什么是BOM

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

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

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

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

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

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

属性有back(后退),forward(前进),go(刷新)注意:go(1)前进,go(2)前进第二个页面,go(-1)后退,go(0)刷新

-（history.length  3 表示有三个页面）

history.go(2)必须在这之前建立两个页面，第一个页面中需要有链接到第二个页面的链接，然后有访问历史记录后，再点击跳转到第二页面。

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

1、href完整地址:获取当前url地址

2、pathname: url：路径

3、assign:加载新的文档    href也可以加载新文档

4、host地址：包括域名和端口

5、hostname   域名；可以打印网页的域名

6、origin源地址：包括(协议：http://，https://加密)

7、protocol    协议：http://，https://加密

8、port端口

9、hash:"#abc"锚点

10、search:搜索

11、reload  刷新界面  =history.go(0)

12、replace 替换当前页面，不会有访问记录

JavaScript 弹窗

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

确认框    window.confirm()       用于验证是否接受用户操作

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

confirm()方法

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

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

       if (r==true){

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

       }else{

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

       }

window.location 对象

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

语法说明

location.href 返回当前页面的 URL

location.pathname      返回 URL 的路径名

location.assign()  加载新的文档

什么是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()  间隔指定的毫秒数不停地执行指定的代码

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

clearInterval()      用于停止 setInterval() 方法执行的函数代码

clearTimeout(setTimeOut()返回的ID值)

一次性定时器2

setTimeout()    在指定的毫秒数后仅 执行一次 执行指定的代码

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

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

clearTimeou t ( clearTimeou t ()返回的ID值)

练习：距离建军节倒计时

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

区别

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

localStorage永久储存

（可以用来存储数据, 和cookie相似, 区别是它是为了更大容量存储设计的, 在使用上也更加方便）

只要域名和端口一致，路径不一样，但是数据仍然存在

 setItem方法上传两个值。第一个是健，第二个是值

   /* 永久存储 localStorage 就算浏览器关闭了页面，数据还是存储本地

        除非自己清除数据，数据仍然存在*/

取值的方式有两种

1、 localStorage.getItem("name")  输入健出来值

不管存的什么类型，取出来都是字符串

对象存储的方式：

数组存储的方式：

1、 localStorage.getItem("name")  写健出来值

2、localStorage. removeItem  清除单个数据

3、localStorage. clear清除全部的数据