0x01

Summer Training Day 2.

DOM与BOM.
JavaScript的事件机制.
IFE Task 2-1 2-2

1.DOM与BOM.

ECMAScript(核心):JavaScript 语言基础;
DOM(Document Object Model)文档对象类型:规定了访问HTML和XML的接口;
BOM(Browser Object Mode)浏览器对象模型:提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。

ECMAScript

不属于任何浏览器;
定义了 JavaScript 脚本中最为核心的内容;
是 JavaScript 脚本的“骨架”;
最新版本是 ES7;

BOM

定义了 JavaScript 操作浏览器的接口;
提供了访问某些功能(如浏览器窗口大小、版本信息、浏览历史记录等)的途径以及操作方法;

DOM

DOM 定义了 JavaScript 操作 HTML 文档的接口;
提供了访问HTML文档的途径以及操作方法;
DOM操作html树,包括节点和节点之间的关系;
对节点:增删改查;
对关系:父子,非父子;
child,parent,siblings;
获取节点方法:

1
2
3
document.getElementById("");
document.getElementsByClassName("");
document.getElementsByTagName("");

CSS选择器复习

优先级排列:内联样式,id,class,tag;

#2.JavaScript的事件机制.

事件冒泡—IE事件流

开始由最具体的元素接收,然后逐渐传播到不那么具体的节点;
div→body→html→document;

事件捕获—Netscape

完全相反.

DOM标准事件模型

1.事件捕获阶段;
2.处于目标阶段;
3.事件冒泡阶段;
*需要注意的是,1阶段不到body,body被看作是3阶段一部分;

处理事件的两种方法

1
2
addEventlistener(event,fn,boolean);
removeEventListener(event,fn,boolean);

IE事件处理:

1
2
attachEvent(event,fn);
detachEvent(event,fn);

*跨浏览器的事件处理:以后再议;

2.IFE Task

2-1

1
2
3
4
button[0].addEventListener('click',function(){
display.innerHTML = input.value;
})
#.value 加在值变化之后,不能作用于空值.

oninput: 作用于input标签或textarea标签,实时调用js函数;
格式:

1
<input oninput= "myFunction()"></input>

2-2

新操作.

1
2
3
4
5
6
7
8
9
newData.sort(function (a, b) {
return b[1] - a[1];
});
# sort
# 基本形式是
# object.sort(function(a,b){
# return a-b;
# })
# 其中a-b:从小到大排序;b-a:从大到小;

1
2
3
4
5
6
7
8
9
10
var number = ["一","二","三","四"];
for (var i = 0; i < newData.length; i++) {
var li = document.createElement("li");
var ul = document.getElementById("aqi-list");
ul.appendChild(li);
li.innerHTML = "第" + number[i] + "名" + ":" + newData[i][0] + "," + newData[i][1];
console.log(newData[i]);
#<li>第一名:福州(样例),10</li>
#<li>第二名:福州(样例),10</li>
}

以上.