JavaScript三分钟~三小时复习

​

JavaScript三分钟~三小时复习

第一章
第二章
第三章
第四章
第五章
第六章
第七章
第八章
所学常用基础方法
无事件简单时钟
事件监听简单时钟

第一章

一、填空题

1.单行注释以 // 开始

2.consolo.log（alert（‘Hello’))在控制台的输出结果是 undefined 。

3.JavaScript由 ECMAScript 、DOM 、BOM 三部分组成。

4.console.log(‘<script>alert(123);<Vscript>’ )的输出结果是 <script>alert(123);<Vscript> 。

二、判断题

1.JavaSerip 不可以跨平台。 ( X)

2.alert(‘test’)与Alert(‘test’)都表示以警告框的形式弹出test 提示信息 。( X)

3.在JavaSerip中， 如果一条语句结束后，换行书写下一条语句，后面的分号可以省略。(√ )

4.通过外链式引人JavaScript时， 可以省略标签。 ( X)

5.asyne用于异步加载，即先下载文件，不阻塞其他代码执行。(√ )

6.JavaSeript中， age与Age代表不同的变量。(√ )

三、选择题

1.下列选项中不属于ECMASeript6保留关键字的是(C )。

A. delete

B. this

C static

D. ne

2.JavaScript 为代码添加多行注释的语法为( C )。

A. <---->

B. //

C./* */

D.#

3.下列选项中， 不能作为变量名开头的是( B)。

A.字母

B.数字

C.下划线

D. $

四、编程题

利用本章知识，编写一个将用户输人的信息输出到网页的Jvsrip程序。

var a = prompt('请输入');
alert(a);

第二章

一、填空题

1.JavaScript 中的数据类型分为两大类，分别是 基本 和 引用

2.表达式(-5) % 3 的运行结果为 -2

3.表达式“vara = 1,b = 1;console.log(++a)”的输出结果是 2

二、判断题

1.JavaScript 中的数字型可以用来保存整数或浮点数 (小数)。(√ )

2.console.log((3 + 6)* 2); 语句的输出结果为 15 。(X)

3.运算符“.”可用于连接两个字符串 。(X)

三、选择题

1.“console.log(true - 1)”语句输出的结果是 (B)
人
A.1

B.0

C. true1

D.-1

2.下列选项中与0相等（==）的是（D）

A.null

B.undefined

C.NaN

D.‘’

3.下列选项中不属于比较运算符的是**（D）**

A.==

B.===

C.!==

D.=

四、编程

1.根据用户输人的数值(数字 1 ~ 7)，返回对应的星期几。例如，7代表星期日、6代表星期六，依次类推。

var a = prompt('输入:');
for (var i = 0; i < a; i++) {
    if (i + 1 == a) {
       alert(`星期${i+1}`);
    }
}

2.比较两个数的最大值(用户依次输人两个数，最后弹出最大的那个值 )。

var a =prompt ('输入第一个数:');
var b =prompt ('输入第二个数:');
console.log(a > b ? a : b);

第三章

一、填空题

1.表达式“lab]=[12,34,56]”执行后，变量b 的值为 34 。

2.continue 关键字，在环语句中使用时，可以用来立即跳出本次循环。

二、判断题

1.while 语可以在条件表达式为 true 的前提下、环执行指定的一段代码，直到条件表达式为 false 时结束循环。(√ )

2 break 关键宇、在环语句中使用时、其作用是立即跳出本次循环 。（X）

3、可以使用“数组名[索引]”的方式来访问数组元素。(√ )

三、选择题

1.下列语句不能用于遍历数组的是**(D)**

A.for

B.for…in

C.for…of

D.if

2.执行代码“var nums=[[2,4],[6,9]];console.log(nums[1][0]);”,输出结果正确的是**©**
A.2

B.4

C.6

D.9

3.下列创建数组的方式，错误的是**©**
A.var art = new Array0:

B.var arr = [];

C.var arr = new array0:

D.var arr =[];arr.length=3;

四、编程题
1.移出数组 arr “[1,2,3,2,5.6,2,7,2]”中与2相等的元素，并生成一个新数组，不改变原数组。

var arr = [1,2,3,2,5.6,2,7,2];
var arr2 = [];
for(var i = 0;i<arr.length;i++){
     if(arr[i] != 2){
         arr2[arr2.length] = arr[i];
     }
}

console.log(arr2);
2.请将数组了"[‘苹果’,‘香蕉’,‘酥梨’,‘榴莲’,‘樱桃’,‘柿子’,‘葡萄’,‘哈密瓜’,‘西瓜’]"中的元素依次打印到控制台。

var arr = ['苹果', '香蕉', '酥梨', '榴莲', '樱桃', '柿子', '葡萄', '哈密瓜', '西瓜'];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

第四章

一、填空题

1.再使用 函数表达式 定义函数时，要考虑函数定义和执行的顺序。

2.JavaScript 中函数的作用域分为 全局作用域 和 块级作用域 。

3.执行代码“function info0(){year = 1999;};info();console.log(year)”的结果是 1999 。
二、判断题
1.函数 showTime0与 showtime0 表示的是同一个函数 。（X）

2.函数内通过关键字 var 定义的变量可以在全局作用域下进行访问 。（X）

3.函数“((a,b)=>a* b)(6,2);”的返回值是 12 。

三、选择题
1.阅读以下代码，执行 fn1(4,5)的返回值是**(B )。**

function fn1(x，y){
return (++x) + (y++);
}

A.9

B.10

C.11

D.12

2.阅读以下代码，执行 fn(7)的返回值是**(A)**。

var x =10;
function fn(myNum){
var x=11
return x+myNum;
}

A.18

B.17

C.10

D.NaN
3.下列选项中，可以用于获取用户传递的实际参数值的是**(D)**。

A.arguments.length

B. theNums

C.params

D.arguments

四、程序分析题
1.写出下面代码的运行结果

var a，b;
(function() {
alert(a);
alert(b);
var a = b = 3;
alert(a);
alert(b);
})();
alert(a);
alert(b);

undefined
undefined
3
3
undefined
3

2.以下代码执行后，num 的值是多少?

var foo = function(x，y)[
return x - y;
};
function foo(x，y){
return x + y;
}
var num = foo(1，2);
console.log(num);

-1

第五章

一、填空题
1、当需要判断一个对象中的基个成员是否存在时，可以使用 in 运算符

2.Math 中的 random() 方法用来获取随机数，每次调用该方法返网的结果都不同。

3.Date() 是日期对象的构造函数。

4.可以通过 Dae 对象中 getMonth() 来获取月份，范围是0-11.

二、判断题

1.利用构造函数(类)创建对象的过程，称为实例化。（√）

2.Math 对象用来对数字进行与数学和关的运算，该对象是构造函数。 （X）

3.数组类型检测有两种常用的方式，分别是使用 instanceof 运算符和使用 Array.isArray()方法。（√）

4.使用 Math.floor(Math.random0 * (max + 1) + 1)表示生成1到任意数之间的随机整数。（√）

三、选择题

1.下面选项中，获取从 1970-01-01 00:00:00 距离 Dte 对象所代表时间的毫秒数的是**(A)**

A.getTime()

B. setTime()

C. getFullYear()

D.getMonth0()

2.下面选项中，删除数组的最后一个元素的方法是**(A)**

A.pop()

B.unshift()

c.shift()

D.push()

3.下列选项中，可以实现颠倒数组中元素的位置的是**(A)**。

A.reverse()

B.sort()

C.indexOf()

D.lastIndexOf()

1.利用 String 对象实现删除字符串前后空格字符。

str = " Hello  world! ";
console.log(str.trim());

2.请用对象字面量的形式创建一个名字为可可的狗对象，具体信息如下

1.名称 :可可
2.类型(type):阿拉斯加犬
3.年龄:5岁
4.颜色:棕红色
5.技能:汪汪叫、摇尾巴

var dog = {
name: "可可",
type:"阿拉斯加",
age:5,
color:"red",
skill:"汪汪叫，摇尾巴"
};
console.log(dog);

第六章

一、填空题

1.时间的三要素分别是 事件源 、 事件类型 、事件处理程序。

2.getElementById() 方法通过id来获取元素。

3.通过element.innerHTML、element.innerTEXT、element.textContent方式可以修改元素内容

二、判断题

1.document.querySelector(‘div’)可以获取文档中第一个div 元素**(√)**

2.WebAPI由BOM和DOM 两部分组成。 (X)

3、HTML 文档中每个换行
都是一个文本节点。**(X) **

4.document对象的 getElementsByClassName() 方法和getElementsByName0 方法返回的都是元素对象集合 HTMLCollection.(√)

三、选择题
1.下面可用于获取文档中第一个 div 元素的是 ( A)。

A.document.querySelector(‘div’)

B. document.querySelectorAll(‘div’)

C. document.getElementsByName(‘div’)

D.以上选项都可以

2.下列选项中,可以作为 DOM 的 style 属性操作的样式名为 (A)。

A.Background

B. left

C. font-size

D.Textalign

3.下列选项中，可用于实现动态改变指定 div 中内容的是 ©。

A. console.log()

B. document.write()

C. innerHTML

D.以上选项都可以

4.关于获取元素，以下描述正确的是 (D)。

A. document.getElementById0 获取到的是元素集合

B.document.getElementsByTagName0 获取到的是单个元素

C.document.querySelector0 获取到的是元素集合

D.document.getElementsByClassName0 有浏览器兼容性问题
​
5.以下代码用于单击一个按钮，弹出对话框。在横线处应填写的正确代码是(A)

唐伯虎
<script>
var btn = document.getElementById(‘btn’);
__________________________________
</script>

A. btn.onclick = function(){ alert(‘点秋香’);}

B. btn.onclick = alert("点秋香’);

C. bn.click = function() {alert( ‘点秋香’);}

D. btn.click()

四、编程题请编写代码，实现根据系统时间显示问候语的功能，通过改变 div 中内容，显示不同问候语。要求如下。

·6点之前，显示问候语“凌晨好”
·9点之前，显示问候语“早上好”
·12点之前，显示问候语“上午好”
·14点之前，显示问候语“中午好”
·17点之前，显示问候语“下午好”
·19点之前，显示问候语“傍晚好”
·22点之前，显示问候语“晚上好”
·22点之后包括 22点，显示问候语“夜里好”

<body>
	<div><div>
	<script>
		var div = document.querySelector('div');
		var date = new Date();
		var time = date.getHours();
		if(time < 6 || time >= 22){
		    div.innerHTML = `<div>凌晨好</div>`;
		}else if(time < 9){
		    div.innerHTML = `<div>早上好</div>`;
		}else if(time < 12){
		    div.innerHTML = `<div>上午好</div>`;
		}else if(time < 14){
		    div.innerHTML = `<div>下午好</div>`;
		}else if(time < 17){
		    div.innerHTML = `<div>傍晚好</div>`;
		}else if(time < 19){
		    div.innerHTML = `<div>晚上好</div>`;
		}
	</script>
</body>

第七章

一、填空题
1.排他思想的实现步骤是 排他，与 设置.

2.HTML5 新增了通过 data- index 设置自定义属性

3.HTML5 中通过 dataset 获取自定义属性.

4.childNodes 属性可以获取元素的所有子元素节点，它是一个可读属性.

5.DOM根据HTML中各节点的不同作用，将文档中的注单独划分为 标准 和 条件
二、判断题

1.使用 document.createElement0 可以创建元素节点。(√)

2.键盘事件对象是KeyBoarfEvent.(√)

3.低版本的IE 浏览器(IE 6 ~ E 8)中，可以通过 event 获取事件对象 (√)

4.appendChild() 方法表示将一个节点添加到指定父节点的子节点列表前面 (X)

5.cloneNode()方法表示返回调用该方法的节点的一个副本，也称为克隆节点 (X)

二、选择题
1.下列选项中，可以实现创建元素的是**(D)**

A. element.push(‘<p>你好</p>’)

C. element.innerHtml = ‘<p> 你好 </p>’

B.element.pop(‘<p> 你好</p>’)

D.document.createElement(“p”)

2.关于添加元素，下列描述错误的是 (D)。

A.innerHTML 会覆盖原来的元素

B.appendChild 是在父元素内部追加

C.insertBefore 是在父元素内部指定的位置添加

D.crealeEleme 创建的元素立加到页面中

3.关于事件对象，描述错误的是**(D)**。

A. 事件对象的属性中保存了与事件相关的一系列信息

B.事件触发时就会产生事件对象

C.事件对象的获取有兼容性问题

D.通过事件对象不可以阻止事件冒泡和默认行为

4.下列选项中，可以正确获取到兼容了各个浏览器的事件对象的是**(A)**

A.document.onclick = function (event) { var e = window.event ll event; }

B. document.onclick = function (event) {var e = window.evt ll event;}

C. document.onclick = function (event) {var e = window.event ll evt;}

D. document.onclick = function (event) { var e = window.evt ll evt;}

5.关于事件监听，描述错误的是 ( C )

A.可以给同一元素同一事件注册多个监听器

B.addEventListener()有浏览器兼容问题

C.addEventListener()方法有两个参数

D.低版本的IE可以使用attachEvent 代替addEventListener

四、简答题

1 请简单介绍排他操作的一般实现步骤。

先排除挥其他元素,再给自身变量想要实现的效果

2.请解释说明 childNodes 和 children 的区别

> childNodes :集合、当前元素子节点、即时更新 children:可读只返回子元素节点、推荐

五、编程题
完成动态生成表格案例，具体要求如下。

①使用数组把学生数据模拟出来。
②动态创建行、单元格。
③为单元格填充数据。
③提供“删除”链接，可删除所在的行。

案例效果如图所示

姓名	科目	成绩	操作
张三	JavaScript	100	删除
李四	JavaScript	100	删除
刘五	JavaScript	100	删除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr td {
            text-align: center;
            border: 1px black solid;
        }

        table {
            padding: 100px;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="姓名" class="ipt1">
    <input type="text" placeholder="科目" class="ipt2">
    <input type="text" placeholder="成绩" class="ipt3">
    <button>添加</button>
    <table cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>JavaScript</td>
            <td>100</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
    <script>
        let table = document.querySelector('table');
        let ipt1 = document.querySelectorAll('input');
        let btn = document.querySelector('button');
        let a1 = document.querySelector("a");
        a1.addEventListener("click", function () {
            let tr = this.parentNode.parentNode;
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
        });
        btn.addEventListener("click", function () {
            var tr = document.createElement('tr');
            tr.innerHTML = `
                                <td>${ipt1[0].value}</td>
                                <td>${ipt1[1].value}</td>
                                <td>${ipt1[2].value}</td>
                                <td><a href="#">删除</a></td>
                                `;
            table.appendChild(tr);
            let a = document.querySelectorAll("a");
            for (let i = 0; i < a.length; i++) {
                a[i].addEventListener("click", function () {
                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                });
        });
    </script>
</body>

</html>

第八章

一、填空题
1.在 BOM 中，所有对象的父对象是document
2.页面中所有内容加载完之后触发的事件是window.onload
3.history 对象的 length 属性可获取历史列表中的 URL数量。
4 document.DOMContentLoaded事件是在 DOM 结构加载完触发的

二、判断题
l.全局变量可以通过 window 对象进行访问。(√)
2.修改 location 对象的 href 属性可获取或设置URL。(√)
3.使用clearTimeout()和clearInterval()可以清除定时器。(√)
4.使用 history对象的go()方法可以实现页面前进或后退。(√)
三、选择题
1.下列选项中，不是 window 对象的属性的是**( A)**。

A.pageX

B. location

C. history

D.navigator

2.下面关于 BOM 对象的描述，错误的是**©**

A.go(-1)与 back()皆表示向历史列表后退一步

B.通过 confirm()实现的“确认”对话框，单击“确认”按钮时返回 true

C. go(0) 表示刷新当前网页

D.以上选项都不正确

3.下列彬戴甸描述错误的是**(A)**。

A.onload 和 DOMContentLoaded 都是页面加载事件，没有区别

B.DOMContentLoaded 有浏览器兼容问题

C.定义在全局作用域中的变量是 window 对象的属性

D.window 对象的方法在调用时可以省略不写 window

四、编程题编写程序，实现电子时钟自动走动的效果，并提供一个按钮控制电子时钟是否停止走动

事件监听控制简单时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px black solid;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            padding: 0;
        }
        p {
            margin: 0;
        }
    </style>
</head>

<body>
    <div></div>
    <button>停止</button>
    <script>
        let i = 0,
            a = 0;
        setInterval(function () {
            if (a == 0) {
                let date = new Date();
                let s = date.getHours();
                s = s < 10 ? '0' + s : s;
                let f = date.getMinutes();
                f = f < 10 ? '0' + f : f;
                let m = date.getSeconds();
                m = m < 10 ? '0' + m : m;
                div = document.querySelector('div');
                let p = document.createElement('div');
                p.innerHTML = `<div>
                        <p>${s + ':' + f + ':' + m}</p>
                        </div>
                            `;
                div.appendChild(p);

                if (i == 1) {
                    let ps = document.querySelector('p');
                    div.removeChild(ps.parentNode.parentNode);
                } else {
                    i = 1;
                }
            }
        }, 1000);
        let but = document.querySelector('button');
        let isFlag = true;
        document.addEventListener('click', function () {
            if (isFlag) {
                a = 1;
                isFlag = false;
                but.innerText = `开始`;
            } else {
                a = 0;
                isFlag = true;
                but.innerText = `停止`;
            }
        })
    </script>
</body>

</html>

所学常用基础方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../xfy_js_6.4/ajax/js/jquery.min.js"></script>
</head>

<body>
    <div>
        aaaaaaaaaaa
    </div>
    <button>点击</button>
    <script>
        var a = document.querySelector('div');
        var but = document.querySelector('button')
        var body = document.querySelector('body');
        but.onclick = function () {
            body.removeChild(a);
        }

        function foo(x, y) {
            return x + y;
        }
        var foo = function (x, y) {
            return x - y;
        }

        // var num = foo(1, 2);
        // console.log(num);

        var a, b;
        (function () {
            alert(a);
            alert(b);
            var a = b = 3;
            alert(a);
            alert(b);
        })()
        alert(a);
        alert(b);

        Math.PI //圆周率
        Math.abs(x) //绝对值
        Math.max(1, 2, 3, 34, 5, 56, 7, 7, 8, 9, 9) //最大值
        Math.min(2, 45, 7, 8, 90, 3) //最小值
        Math.pow(2, 2) //x的y次方
        Math.sqrt(3) //平方根
        Math.ceil(3.44) //向上取整
        Math.floor(4.55) //向下取整
        Math.round(3.426) //四舍五入
        Math.random() //随机数0.0~1.0

        var date1 = new Date(); //当前时间
        date1.getFullYear(); //年份
        date1.getMonth(); //月
        date1.getDate(); //天
        date1.getDay(); //星期
        date1.getHours(); //小时
        date1.getMinutes(); //分钟
        date1.getSeconds(); //秒
        date1.getMilliseconds(); //毫秒
        date1.getTime(); //从1970到现在的时间戳

        arr.push(); //数组末尾添加元素,会改变原数组
        arr.unshift(); //数组开头添加元素,会改变原数组
        arr.pop(); //删除数组的最后一个元素,空数组返回undefined,会改变原数组
        arr.shift(); //删除第一个元素,若是空数组则返回undefined,会改变原数组

        arr.reverse(); //颠倒数组元素的位置,会改变原数组,返回新数组
        arr.sort(); //对数组的元素进行排序,会改变原数组,返回新数组

        arr.indexOf(); //返回数组中要找的元素第一个索引,没有就返回-1
        arr.lastIndexOf(); //返回数组中要找的元素最后一个索引,没有就返回-1

        arr.toString(); //数组转为字符串,逗号分隔,每个元素
        arr.join('分隔符'); //数组转为字符串,自己选择什么分隔,每个元素

        arr.fill(); //用一个固定值去替换数组中的元素(一个或者多个)  fill(value,start,end);
        /*const arr = [1, 2, 3, 4, 5];
          arr.fill(0, 1, 4);
          console.log(arr); // 输出：[1, 0, 0, 0, 5]
          */
        arr.splice(); //数组元素删除,第几个开始,往后面删除几个,返回新数组
        /*
         const arr = ["apple", "banana", "grape", "mango"];// 从 0 索引开始删除 2 个元素，然后插入 "peach", "pear" 两个元素
        const deleted = arr.splice(0, 2, "peach", "pear");
        console.log(arr);       // ["peach", "pear", "grape", "mango"]
        console.log(deleted);   // ["apple", "banana"]
         */
        concat();//连接连个或者多个数组,不影响原数组,返回一个新数组

        str.indexOf(str1)//获取要找的字符在字符串中首次出现的位置
        str.lastIndexOf(str1);//获取要找的字符在字符串中最后一次出现的位置
        str.chatAt(一个数字索引);//获取索引位置的字符
        str.charCodeAt(一个数字索引);//获取索引位置的ASCLL码
        str[一个数字索引]//获取索引位置的字符
        concat(str1,str2,str3);//连接一个或者多个字符串
        str.slice(2,3);//截取两个索引之间的子字符串
        str.substring(2,3)//截取截取两个索引之间的子字符串,不要负数
        str.toLowerCase();//转小写字母
        str.toUpperCase();//转大写字母
        str.split(',',3);//使用一个分隔符将一个字符串转换成数字,后限制数组长度
        str.replace(str2,str1);//使用str2替换str1

        document.getElementsByTagName('标签名');//根据标签获取元素,动态集合,随着页面变化而变化
        element.getElementsByTagName('标签名');//根据标签获取元素
        document.getElementsByName('标签name名');//根据标签name获取元素,返回对象集合
        document.getElementsByClassName('标签类名');//根据标签类获取元素,返回对象集合
        document.querySelector('标签名,标签name名,标签类名,标签ID名都可以');//只获取第一个
        document.querySelectorAll('标签名,标签name名,标签类名都可以');//获取全部,返回一个集合
        document.body;//返回文档的body元素
        document.title;//返回文档的title元素
        document.documentElement;//返回文档的html元素
        document.forms;//返回对文档中所有Firm对象的引用
        document.images;//返回对文档中所有Image对象的引用

        element.innerHTML;//设置或返回HTML元素,保留空格和换行
        element.innerText;//设置或返回文本内容,去除空格和换行
        element.textContent;//设置或者返回指定节点的文本内容,同时保留空格和换行

        background//设置页面背景属性
        backgroundColor//设置背景颜色
        display//设置要不要显示在屏幕上  none不显示 block显示
        fontSize//设置字体大小
        height//高度
        left//左
        listStyleType//用来设置列表的排序符号
        overflow//用于控制元素溢出如何处理的 CSS 属性
        textAlign//文字水平位置
        textDecoration//
        textIndent//设置文本第一行的缩进
        transform//设置动画

        标签.className;//修改标签的类名

        getAttribute('属性');//返回指定元素的属性值
        // <!--HTML-->
        <div data-index="2"></div>//自定义属性  data-是前缀  index是开发者自定义的
        // <!--JavaScript-->
        setAttribute('属性',值);
        元素对象.dataset.属性名 = '值';//设置自定义属性

        getAttribute();
        element.dataset.属性;

        childNodes;//获取子节点,返回集合
        children;//获取子节点,返回集合
        nextSibling;//获取下一个兄弟节点
        previousSibling;//获取上一个兄弟节点
        obj.children[索引];//开发中常用
        parentNode;//获取父级节点

        document.createElement('标签');//创建一个节点
        document.write();//创建元素
        element.innerHTML;//写入HTML

        node.appendChild();//添加节点到末尾
        node.insertBefore();//添加节点到开头
        node.removeChild('子节点');//删除一个节点的子节点

        node.cloneNode();//克隆节点


        // 进阶
        DOM对象.attachEvent(type,callback);//早期浏览器
        DOM对象.addEventListener(type,callback,[capture]);//事件监听方式
        DOM对象.oncilick = nill;//传统删除事件方式
        DOM对象.detachEvent(type,callback);//早期版本IE浏览器
        DOM对象.removeEventListener(type,callback);//标准浏览器

        var 事件对象 = window.event//早期IE内核浏览器
        DOM对象.事件 = function(event){}//W3C内核浏览器

        e.target;//返回出发事件对象  标准浏览器
        e.srcElement;//返回出发事件对象  非标准  IE6~8
        e.type;//返回事件对象类型
        e.stopPropagation()//阻止事件冒泡  标准浏览器
        e.cancelBubble//阻止事件冒泡  非标准  IE6~8
        e.preventDefault()//阻止默认事件  标准浏览器
        e.returnValue//阻止默认事件  非标准  IE6~8 
        e.target返回的是触发事件的对象,而this返回的是绑定事件的对象
        this和e.currentTaeget的值是相同的

        onclick//单击鼠标左键时触发
        onfocus//获得鼠标指针焦点时触发
        onblur//失去鼠标指针焦点触发
        onmouseover//鼠标指针经过时触发
        onmouseout//鼠标指针离开时触发
        onmousedown//当按下任意鼠标按键时触发
        onmouseup//当释放任意鼠标按键时触发
        onmousemove//在元素内当鼠标指针移动时持续触发

        contextmenu//禁止鼠标右击菜单
        selectstart//禁止鼠标选中

        clientX//鼠标所在位置x轴
        clientY//鼠标所在位置y轴
        pageX//鼠标所在位置x轴  IE6~8不兼容
        pageY//鼠标所在位置y轴  IE6~8不兼容
        screenX//鼠标所在位置x轴
        screenY//鼠标所在位置y轴

        keypress//某个按键按下时触发，不识别功能键，如ctrl shift
        keydown//某个按键按下时触发
        keyup//某个按键松开时触发

        window.onload//窗口（页面）加载事件
        document.DOMContentLoaded//加载事件会在DOM事件加载完成时触发，不包括CSS样式表、图片、flash动画
        window.donresize//当调整window窗口大小时，就会触发

        setTimeout();//指定时间后执行一次代码
        setInterval();//按照指定的时间周期进行执行一段代码
        clearTiemout();//取消 setTimeout()设置的定时器
        clearInterval();//取消 setInterval()设置的定时器
    </script>
</body>

</html>

无事件简单时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 80px;
            background-color: aquamarine;
            font-size: 20pt;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script>
    let div = document.querySelector('div');
    function fun() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var s = date.getSeconds();
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        s = s < 10 ? '0' + s : s;
        div.innerHTML = `<div>${year + '年' + month + '月' + day + '日' + hours+ "时" + minutes + "分" +  s + '秒'}</div>`;
        console.log(date);
    }
    setInterval(fun, 1000);
</script>

</html>