[北京|结业弟子]JS-刘其勇|2017年02月24日的日报-技能树.IT修真院

发表于： 2017-02-24 00:40:07

1 1120

JS-task2】js常用DOM操作

1.背景介绍

文档对象模型

以面向对象方式描述的文档模型。定义了表示和修改文档所需的对象，其行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示 ¹。 JavaScript通过DOM，可以添加、移除、改变或重排页面上的项目。

起源：90年代Netscape和DHTML

DOM脱胎于Netscape 及微软公司创始的DHTML（动态 HTML），在1998年W3C发布了第一级的DOM规范。为基本的文档结构及查询提供了接口。

DOM与BOM

BOM,浏览器对象模型，顶层为window对象，下层为：
.document对象即DOM，控制html文档；
.screen对象，控制对桌面屏幕的查询；
.history对象，历史记录操作前进后退（据说不推荐用）；
.navigator对象，查询终端浏览器版本，用户代理等。

也就是说：window,.document,.screen,.histroy等都是BOM对象，而DOM是BOM的一个子集。²

全部DOM对象³

2.知识剖析

操作--通过一些方法，获取节点与改变节点

节点：按文档层级，或文档结构，每个元素（标签）都可被选中作为对象，因此这些元素都是节点
获取节点的方法：id,标签名，类名，等
改变节点的方法：样式，文本，文档，属性⁶
DOM事件与获取方法：表现层与行为层⁴

3.常见问题

找不到对象⁵

4.解决方案

用if语句判断，然后再执行操作。

5.编码实战

6.扩展思考

操作DOM对性能的影响

7.参考文献

1.百度百科

2.http://www.jb51.net/article/55851.htm

3.http://www.w3school.com.cn/jsref/index.asp

4.【事件】http://www.runoob.com/jsref/dom-obj-event.html

5.锋利的jQuery(第二版)2.2.2

6.[更多方法]http://www.w3school.com.cn/htmldom/dom_methods.asp

8.更多讨论

不手写html，使用纯js制作页面
用web浏览器实现的虚拟现实技术（vr）

今日完成：

1 小课堂，常用DOM操作

2 任务3，没有完成页面传参，大体完成了点击的逻辑。以点击次数控制页面位置，以奇偶数控制覆盖或显示

var gamerNumber=1;
// alert($(".m-cover-wrapper").length);
function coverIdentity() {
    $(".m-cover-wrapper").css("display","block");
    $(".m-gamer-wrapper").css("display","none");
    $(".m-gamernumber").html(gamerNumber);
    thisNumber++;
    gamerNumber++;
}