DOM和BOM

一、定时器

1、循环定时器的设置和取消

（1）启动循环定时器：setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器

格式：setInterval(调用方法, 毫秒值);//毫秒值就是循环周期

（2）停止循环定时器clearInterval(定时器ID)

setInterval方法在创建一个定时器的同时，还会返回一个定时器的ID，该ID就代表这个定时器

此定时器ID在当前页面是不能重复的

我们可以通过clearInterval方法，指定某个循环定时器停止

格式：clearInterval(定时器ID);

2、一次性定时器的设置和取消

（1）启动一次性定时器：setTimeout()

一次性定时器，调用一次就会创建并执行一个定时器一次

格式：setTimeout(调用方法,毫秒值);

（2）停止一次性定时器clearTimeout(定时器ID)

setTimeout方法在创建一个定时器的同时，还会返回一个定时器的ID，该ID就代表这个定时器

此定时器ID在当前页面是不能重复的

我们可以通过clearTimeout方法，指定某个一次性定时器停止

格式：clearTimeout(定时器ID);

二、location对象

location对象包含浏览器地址栏的信息

常用属性：href 设置或返回完整的URL

设置href属性，浏览器就会跳转到对应的路径

三、DOM对象

1、DOM对象是什么？有什么作用？

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

文档：标记型文档（HTML等）

DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的

2、DOM树介绍

<html>

<head>

</head>

<body>

< a href="">我的链接</ a>

</body>

</html>

上述HTML文档会被浏览器由上到下依次加载并解析

每个标签会被加载成DOM树上的一个元素节点对象

每个标签的属性会被加载成一个属性节点对象

每个标签的内容体会被加载成一个文本节点对象

整个DOM树，是一个文档节点对象，即DOM对象

一个HTML文档加载到内存中就会形成一个DOM对象

3、DOM树的特点：

必定会有一个根节点

每个节点都是节点对象

常见的节点关系：父子节点关系

文本节点对象没有子节点（叶子节点）

每个节点都有一个父节点，零到多个子节点

只有根节点没有父节点

四、获取元素对象的四种方式

在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象：

getElementById(); 通过元素ID获取对应元素对象，如果找不到，返回null

getElementsByName(); 通过元素的name属性获取符合要求的所有元素，如果找不到，返回空数组

getElementsByTagName(); 通过元素的元素名属性获取符合要求的所有元素，如果找不到，返回空数组

getElementsByClassName(); 通过元素的class属性获取符合要求的所有元素，如果找不到，返回空数组

注：获取某个（些）元素节点对象，必须保证元素节点对象先被加载到内存中

五、元素对象常见属性

value

元素对象.value，获取元素对象的value属性值

元素对象.value=属性值，设置元素对象的value属性值

className

元素对象.className，获取元素对象的class属性值

元素对象.className=属性值，设置元素对象的class属性值

checked

元素对象.checked，获取元素对象的checked属性值

元素对象.checked=属性值，设置元素对象的checked属性值，修改单选/复选的选中与否

注：HTML中checked="checked"，JavaScript中返回true

innerHTML

元素对象.innerHTML，获取元素对象的内容体

元素对象.innerHTML=值，设置元素对象的内容体

六、JS事件

1、JS事件是什么？有什么作用？

通常鼠标或热键的动作我们称之为事件（Event），例如点击、表单提交、值发生改变、鼠标移入、移出……

通过JS事件，我们可以完成页面的指定特效

2、JS事件驱动机制简述

页面上的特效，我们可以理解在JS事件驱动机制下进行

JS事件驱动机制：

事件源：专门产生事件的组件

事件：由事件源所产生的动作或者事情

监听器：专门处理事件源所产生的事件

事件源：小偷（因为偷了东西被抓）

事件：偷东西（由小偷引起的）

监听器：警察（专门处理小偷偷东西的事情的）

3、常见的JS事件

（1）点击事件（onclick）

点击事件：由鼠标或热键点击元素组件时触发

（2）焦点事件

获取焦点事件（onfocus）

焦点：即整个页面的注意力

默认一个正常页面最多仅有一个焦点

例如：文本框中闪烁的小竖线

通常焦点也能反映出用户目前的关注点，或者正在操作的组件

获取焦点事件：当元素组件获取焦点时触发

失去焦点事件（onblur）

失去焦点事件：元素组件失去焦点时触发

（3）域内容改变事件（onchange）

域内容改变事件：元素组件的值发生改变时触发

（4）加载完毕事件（onload）

加载完毕事件：元素组件加载完毕时触发

获取元素对象时，要保证元素对象先加载，建议是把获取元素对象的代码放在body最后，如果想放在前面，也可以写在onload中

（5）表单提交事件（onsubmit）

表单提交事件：表单的提交按钮被点击时触发

注意：该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作

事件得到true，提交表单数据

事件得到false，阻止表单数据提交

（6）键位弹起事件（onkeyup）

键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件

（7）常用鼠标事件

鼠标移入事件（onmouseover）

鼠标移入事件：鼠标移入某个元素组件时触发

鼠标移出事件（onmouseout）

鼠标移出事件：鼠标移出某个元素组件时触发

4、JS事件的两种绑定方式

（1）元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数

事件句柄绑定方式

优点：1、开发快捷；2、传参方便；3、可以绑定多个函数

缺点：JS和HTML代码高度揉合在一起，不利于多部门的项目开发维护

（2）DOM绑定方式

使用DOM的属性方式绑定事件

DOM绑定方式

优点：使得HTML代码和JS代码完全分离

缺点：1、不能传递参数，解决：匿名函数是可以的；2、一个事件只能绑定一个函数，解决：匿名函数内部是可以绑定多个函数的

百度搜的

<!DOCTYPE html>

<html>

<head>

margin:0;

padding:0;

}

span{

display: inline-block;

width: 60px;

height: 60px;

border-radius: 50%;

background: black;

color: white;

font-size: 30px;

text-align: center;

line-height: 60px;

}

font-style: normal;

font-size: 20px;

}

</style>

</head>

<body>

</body>

</html>

//倒计时

var count = 1;

var Counter;

function countDown(){ //调用

Counter = setInterval(f,1000);

}

countDown(); //自运行

//倒计时

function f(){

var hs = Number(document.getElementById("hs").innerHTML);

var ms = Number(document.getElementById("ms").innerHTML);

var ss = Number(document.getElementById("ss").innerHTML);

if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){

var hs = document.getElementById("hs").innerHTML = "00";

var ms = document.getElementById("ms").innerHTML = "00";

var ss = document.getElementById("ss").innerHTML = "00";

clearInterval(Counter);

console.log(count);

return;

}

if(ss>0){

ss--;

document.getElementById("ss").innerHTML = ss;

count++;

}

if(ss==0){

if(ms>0){

ms--;

document.getElementById("ms").innerHTML = ms;

document.getElementById("ss").innerHTML = 59;

}

if(ms==0){

if(hs>0){

hs--;

document.getElementById("hs").innerHTML = hs;

document.getElementById("ms").innerHTML = 59;

}

</script>

2020-03-12

2020-03-12

百度搜的