OM是什么

• DOM（Document Object Model 文档对象模型）是W3C的标准，是所有浏览器公共遵守的标准。

• DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。

• DOM定义了访问 HTML 和 XML 文档的标准，是HTML和XML的应用程序接口（API），它允许程序和脚本动态地访问和更新文档的内容、结构和样式。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树，这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）

• 每个节点都有父节点、除了根（它没有父节点）

• 一个节点可拥有任意数量的子

• 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

HTML DOM Document 对象

当浏览器载入 HTML 文档, 它就会成为 document 对象。document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

• document.activeElement 属性返回文档中当前获得焦点的元素

• document.addEventListener() 函数用于向文档添加事件句柄

• document.adoptNode(node) 函数从另外一个文档返回 adapded 节点到当前文档

• document.anchors 属性集合返回了当前页面的所有超级链接数组

• document.applets返回对文档中所有 Applet 对象的引用

• document.baseURI 属性返回 HTML 文档的基础URI

• document.body 属性返回文档的body元素

• document.close()用于关闭浏览器窗口

• document.cookie 属性返回当前文档所有 键/值 对的所有 cookies

• document.createAttribute() 函数用于创建一个指定名称的属性，并返回Attr 对象属性

• document.createComment() 函数可创建注释节点

• document.createDocumentFragment() 函数创建了一虚拟的节点对象，节点对象包含所有属性和方法

• document.createElement() 函数通过指定名称创建一个元素

• document.createTextNode() 函数可创建文本节点

• document.doctype 属性可返回与文档相关的文档类型声明（Document Type Declaration）

• document.documentElement 属性以一个元素对象返回一个文档的文档元素

• document.documentMode 属性返回浏览器渲染文档的模式

• document.documentURI 属性可设置或返回文档的位置

• document.domain 属性可返回下载当前文档的服务器域

• document.domConfig 属性 返回normalizeDocument()被调用时所使用的配置

• document.embeds 集合 返回文档中所有嵌入的内容（embed）集合

• document.forms 集合返回当前页面所有表单的数组集合

• document. getElementsByClassName() 函数返回文档中所有指定类名的元素集合，作为 NodeList 对象

• document.getElementById() 函数可返回对拥有指定 ID 的第一个对象的引用

• document.getElementsByName() 函数可返回带有指定名称的对象的集合

• document.getElementsByTagName() 函数可返回带有指定标签名的对象的集合

• document.images 集合返回当前文档中所有图片的数组

• document.implementation 属性可返回处理该文档的 DOMImplementation 对象

• document.importNode() 函数把一个节点从另一个文档复制到该文档以便应用

• document.inputEncoding 属性可返回文档的编码（在解析时）

• document.lastModified 属性可返回文档最后被修改的日期和时间

• document.links 集合返回当期文档所有链接的数组

• document.normalize() 函数合并相邻的文本节点并删除空的文本节点

• document.normalizeDocument() 函数可以移除空文本节点 , 并合并相邻节点

• document.open() 函数打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容

• document.querySelector() 函数返回文档中匹配指定 CSS 选择器的一个元素

• document.querySelectorAll() 函数 document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

• document.readyState 属性返回当前文档的状态（载入中……）

• document.referrer 属性返回载入当前文档的来源文档的URL

• document.removeEventListener() 函数用于移除由 document.addEventListener() 方法添加的事件句柄

• document.scripts 集合返回页面中所有脚本的集合

• document.strictErrorChecking 属性可设置或返回是否强制进行错误检查（error-checking）

• document.title 属性可返回当前文档的标题（ HTML title 元素中的文本）

• document.URL 属性可返回当前文档的 URL

• document.write() 函数可向文档写入 HTML 表达式或 JavaScript 代码

• document.writeln() 函数与 write() 方法作用相同，外加可在每个表达式后写一个换行符

HTML DOM 元素 (Element) 对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。所有主流浏览器都支持元素对象和NodeList 对象。

• element.accessKey 属性可设置或返回访问单选按钮的快捷键

• element.addEventListener() 函数用于向指定元素添加事件句柄

• element.appendChild() 函数http://techbrood.com/jsref?p=met-node-appendchild

• element.attributes 属性返回指定节点属性的集合

• element.childNodes 属性返回包含被选节点的子节点的 NodeList

• element.classlist 属性返回元素的类名，作为 DOMTokenList 对象

• element.className 属性设置或返回元素的 class 属性

• element.clientHeight 属性在页面上返回内容的可视高度（不包括边框，边距或滚动条）

• element.clientWidth 属性在页面上返回内容的可视宽度（不包括边框，边距或滚动条）

• element.cloneNode() 函数可创建指定的节点的精确拷贝，拷贝所有属性和值，该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

• element.compareDocumentPosition() 函数按照文档顺序，比较当前节点与指定节点的文档位置

• element.contentEditable 属性用于设置或返回元素的内容是否可编辑

• element.dir 属性设置或返回元素的文字方向

• element.firstChild 属性返回被选节点的第一个子节点，如果选定的节点没有子节点则该属性返回NULL

• element.focus() 函数用于为元素设置焦点（如果可以设置）

• element.getAttribute() 函数通过名称获取属性的值

• element.getAttributeNode() 函数从当前元素中通过名称获取属性节点

• element.getElementsByTagName() 函数可返回带有指定标签名的对象的集合

• element. getElementsByClassName() 函数返回文档中所有指定类名的元素集合，作为 NodeList 对象

• element.getFeature() 函数返回指定特征的执行APIs对象

• element.getUserData() 函数返回一个元素中关联键值的对象

• element.hasAttribute() 函数通过名称获取属性的值

• element.hasAttributes() 函数如果某节点有任何属性时返回 true，否则返回 false

• element.hasChildNodes() 函数可在某节点用于任何子节点时返回 true，否则返回 fals

• element.hasfocus() 函数返回布尔值，用于检测文档(或文档内的任一元素)是否获取焦点

• element.id 属性设置或者发回元素的id

• element.innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

• element.insertBefore() 函数可在已有的子节点前插入一个新的子节点

• element.isContentEditable 属性返回元素的内容是否可编辑

• element.isDefaultNamespace() 函数如果指定的命名空间是默认的 ，isDefaultNamespace() 方法返回 true，否则返回 false

• element.isEqualNode() 函数用于检查两个节点是否相等

• element.isSameNode() 函数可在某个节点与给定的节点是同一个节点时返回 true，否则返回 false

• element.isSupported() 函数用于判断当前节点是否支持某个特性

• element.lang 属性设置或返回元素的语言

• element.lastChild 属性可返回文档的最后一个子节点

• element.namespaceURI 属性为被选节点返回命名空间的 URI

• element.nextSibling 属性可返回某个元素之后紧跟的元素（处于同一树层级中）

• element.nodeName 属性可依据节点的类型返回其名称

• element.nodeType 属性属性返回节点类型

• element.nodeValue 属性根据节点的类型设置或返回节点的值

• element.normalize() 函数合并相邻的文本节点并删除空的文本节点

• element.offsetHeight 属性返回任何一个元素的高度包括边框和填充，但不是边距

• element.offsetWidth 属性返回元素的宽度，包括边框和填充，但不是边距

• element.offsetLeft 属性返回当前元素的相对水平偏移位置的偏移容器

• element.offsetParent 属性返回元素的偏移容器

• element.offsetTop 属性返回当前元素的相对垂直偏移位置的偏移容器

• element.ownerDocument 属性可返回某元素的根元素

• element.parentNode 属性可返回某节点的父节点

• element.previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）

• element.querySelector() 函数返回匹配指定 CSS 选择器元素的第一个子元素

• document.querySelectorAll() 函数返回匹配指定 CSS 选择器元素的所有子元素节点列表

• element.removeAttribute() 函数删除指定的属性

• element.removeAttributeNode() 函数从元素中删除指定的属性节点

• element.removeChild() 函数可从子节点列表中删除某个节点

• element.removeEventListener() 函数用于移除由 addEventListener() 方法添加的事件句柄

• element.replaceChild() 函数可将某个子节点替换为另一个，新节点可以是文本中已存在的，或者是你新创建的

• element.scrollHeight 属性返回整个元素的高度（包括带滚动条的隐蔽的地方）

• element.scrollLeft 属性返回当前视图中的实际元素的左边缘和左边缘之间的距离

• element.scrollTop 属性返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离

• element.scrollWidth 属性返回元素的整个宽度（包括带滚动条的隐蔽的地方）

• element.setAttribute() 函数创建或改变某个新属性，如果指定属性已经存在,则只设置该值

• element.setAttributeNode() 函数用于添加新的属性节点

• element.setIdAttribute() 函数

• element.setIdAttributeNode() 函数

• element.setUserData() 函数在元素中为指定键值关联对象

• element.style 属性设置或返回元素的样式属性

• element.tabIndex 属性可设置或返回单选按钮的 tab 键控制次序

• element.tagName 属性返回元素的标签名

• element.textContent 属性设置或者返回指定节点的文本内容

• element.title 属性设置或返回元素的标题

• element.toString() 函数 一个元素转换成字符串

• nodelist.item() 函数返回一个节点列表中指定索引的节点

• nodelist.length 属性返回节点集合的数目

HTML DOM 属性 (Attr) 对象

在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。所有主流浏览器都支持 Attr 对象和 NamedNodeMap 对象 (在HTML DOM中, NamedNodeMap对象表示一个无顺序的节点列表, 我们可通过节点名称来访问 NamedNodeMap 中的节点)

• attr.isId 属性如果属性是 ID 类型（例如，包含了其所属的元素的标识符），则 isId 属性返回 true，否则返回 false

• name 属性返回属性名称

• value 属性用于设置或者返回属性的值。

• specified 属性如果在文档中设置了属性值，则specified属性返回 true，如果是 DTD/Schema 中的默认值，则返回 false

• length 属性可返回集合中节点的选项数目

• getNamedItem() 函数返回节点列表中指定属性名的值

• item() 函数可返回节点列表中处于指定索引号的节点

• removeNamedItem() 函数可删除指定的节点

• setNamedItem() 函数用于添加指定节点。如果节点已经存在，它将被替换，并返回替换节点的值，否则将返回 null。

HTML DOM 事件 (Event) 对象

事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！

• 鼠标事件

• onclick事件会在元素被点击时发生

• oncontextmenu事件在元素中用户右击鼠标时触发并打开上下文菜单

• ondblclick事件会在对象被双击时发生

• onmousedown事件会在鼠标按键被按下时发生。

• onmouseenter事件在鼠标指针移动到元素上时触发

• onmouseleave事件在鼠标移除元素时触发

• onmousemove事件会在鼠标指针移出指定的对象时发生

• onmouseover事件会在鼠标指针移动到指定的元素上时发生

• onmouseout事件会在鼠标指针移出指定的对象时发生

• onmouseup事件会在鼠标按键被松开时发生

• 键盘事件

• onkeydown事件会在用户按下一个键盘按键时发生

• onkeypress事件会在键盘按键被按下并释放一个键时发生

• onkeyup事件会在键盘按键被松开时发生

• 框架/对象（Frame/Object）事件

• onabort事件在用户中止加载 或提交元素时触发

• onbeforeunload事件在即将离开当前页面（刷新或关闭）时触发

• onerror事件在加载外部文件（文档或图像）发生错误时触发

• onhashchange事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发

• onload事件会在页面或图像加载完成后立即发生

• onpageshow事件在用户浏览网页时触发

• onpagehide事件在用户离开网页时触发

• onresize事件会在窗口或框架被调整大小时发生

• onscroll事件在元素滚动条在滚动时触发

• onunload事件在用户退出页面时发生

• 表单事件

• onblur事件会在对象失去焦点时发生

• onchange事件会在域的内容改变时发生

• onfocus事件在对象获得焦点时发生

• onfocusin事件在一个元素即将获得焦点时触发

• onfocusout事件在元素即将失去焦点时触发

• oninput事件在用户输入时触发

• onreset事件在表单被重置后触发

• onsearch事件在用户按下"ENTER（回车）" 按键或点击 type="search" 的 元素的 "x(搜索)" 按钮时触发

• onselect事件会在文本框中的文本被选中时发生

• onsubmit事件在表单提交时触发

• 剪贴板事件

• oncopy事件在用户拷贝元素上的内容时触发

• oncut事件在用户剪切元素的内容时触发

• onpaste事件在用户向元素中粘贴文本时触发

• 打印事件

• onafterprint事件在页面打印后触发，或者打印对话框已经关闭

• onbeforeprint事件在页面即将打印时触发 (在打印窗口出现前

• 拖动事件

• ondrag事件在元素或者选取的文本被拖动时触发

• ondragend事件在用户完成元素或首选文本的拖动时触发

• ondragenter事件在拖动的元素或选择的文本进入到有效的放置目标时触发

• ondragleave事件在可拖动的元素或选取的文本移出放置目标时执触发

• ondragover事件在可拖动元素或选取的文本正在拖动到放置目标时触发

• ondragstart事件在用户开始拖动元素或选择的文本时触发

• ondrop事件在可拖动元素或选取的文本放置在目标区域时触发

• 多媒体（Media）事件

• onabort事件在视频/音频（audio/video）终止加载时触

• oncanplay事件在用户可以开始播放视频/音频（audio/video）时触发。

• oncanplaythrough事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发

• ondurationchange事件在视频/音频（audio/video）的时长发生变化时触发

• onemptied当期播放列表为空时触发

• onended事件在视频/音频（audio/video）播放结束时触发

• onerror事件在视频/音频（audio/video）数据加载期间发生错误时触发

• onloadeddata事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发

• onloadedmetadata事件在指定视频/音频（audio/video）的元数据加载后触发

• onloadstart事件在浏览器开始寻找指定视频/音频（audio/video）触发

• onpause事件在视频/音频（audio/video）暂停时触发

• onplay事件在视频/音频（audio/video）开始播放时触发

• onplaying事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发

• onprogress事件在浏览器下载指定的视频/音频（audio/video）时触发

• onratechange事件在视频/音频（audio/video）的播放速度发生改变时触发

• onseeked事件在用户重新定位视频/音频（audio/video）的播放位置后触发

• onseeking事件在用户开始重新定位视频/音频（audio/video）时触发

• onstalled事件在浏览器获取媒体数据，但媒体数据不可用时触发

• onsuspend事件在浏览器读取媒体数据中止时触发

• ontimeupdate事件在视频/音频（audio/video）当前的播放位置发送改变时触发

• onvolumechangehttp://techbrood.com/jsref?p=event-onvolumechange

• onwaiting事件在视频由于要播放下一帧而需要缓冲时触发

• 动画事件

• animationend事件在 CSS 动画完成后触发

• animationiteration事件在 CSS 动画重新播放时触发

• animationstart事件在 CSS 动画开始播放时触发

• 过渡事件

• transitionend事件在 CSS 完成过渡后触发

• 其他事件

• onmessage该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发

• ononline事件在浏览器开始在线工作时触发

• onoffline事件在浏览器离线工作时触发

• onpopstate该事件在窗口的浏览历史（history 对象）发生改变时触发

• onshow事件当 <menu> 元素在上下文菜单显示时触发

• onstorage该事件在 Web Storage(HTML 5 Web 存储)更新时触发

• ontoggle事件在用户打开或关闭 &lgt;details> 元素时触发

• onwheel事件在鼠标滚轮在元素上下滚动时触发

s一个非常重要的作用就是对dom进行操作，所谓的dom，可以理解为html代码里的一个个节点。比如，body标签元素就是一个dom。本文对js的dom操作进行一些总结。

按照惯例，先上一个刚写好的小例子，代码在最后给出：

现在，来看看js对dom的一些操作吧。

首先，给出一个html模板，接下来开始用js来做一些有趣的事情吧，css样式的绘制就不细说了，先上代码：

css

*{margin: 0;padding: 0;}
.parent {
 width: 305px;
 height: 302px;
 background: #d7e6ea;
 margin: 100px auto;
 
}
.parent .child {
 width: 80px;
 height: 80px;
 background: deepskyblue;
 float: left;
 margin-top: 10px;
 margin-left: 9px;
 margin-right: 12px;
 margin-bottom: 12px;
 box-shadow: 3px -3px 2px #9898c7;
 text-align: center;
 line-height: 80px;
 font-family: "微软雅黑";
 font-size: 28px;
 text-shadow: 2px 2px 2px yellowgreen;
}

html

<body>
 <div class='parent'>
 <div class='child'>1</div>
 <div class='child'>2</div>
 <div class='child'>3</div>
 <div class='child'>4</div>
 <div class='child'>5</div>
 <div class='child'>6</div>
 <div class='child'>7</div>
 <div class='child'>8</div>
 <div class='child'>9</div>
 </div>
</body>

效果图

从代码中，我们可以看到，body是一个大节点，里面套了一个class属性为parent的div盒子，然后我们又在这个盒子里面放了9个小盒子。

1.最简单的dom方法封装

在本系列中，假设我们不考虑用jQuery。

现在给第三个盒子添加一个id。

<div id='targetBox' class='child'>3</div>

如何拿到这个盒子呢？

很显然，最先想到的肯定是document.getElementById() 方法，于是就有了这样的代码。

var box = document.getElementById('targetBox');
box.style.background = '#FEAF51';

效果：

当然，我们很多时候都不希望每次都把document.getElementById（id）给写一遍，那么，是不是可以将这一个过程封装起来呢？

于是，自然而然的，我们会这么写：

//获取JavaScript的dom对象
function dom(id){
 return document.getElementById(id);
};
var box = dom('targetBox');
box.style.background = '#FEAF51';

完美运行，我们知道，在jQuery中，是这样的：

var box = $('#targetBox');

那么，为了让代码更加山寨，不妨将dom方法稍微改进一下嘞！

//获取JavaScript的dom对象
function dom(id){
 if(id.toString().indexOf('#') != -1) {
 id = id.replace('#','');
 }
 return document.getElementById(id);
};
var box = dom('#targetBox');
box.style.background = '#FEAF51';

2.如何获取dom元素在父盒子中的位置？

刚才，我们已经获得了编号为3的div盒子，要得到它在父盒子的角标位置，首先肯定要拿到它的父盒子对象吧。

像这样：

var box = dom('#targetBox');
var parent = box.parentElement;

parent打印出来是这样的：

看来很顺利呢，接下来因为要知道目标元素在父盒子的位置，则需要拿到父盒子所有的孩子节点。

像这样：

var children = parent.children;

打印结果：

接下来就要遍历这些孩子节点啦，children 的数据类型是object。

然而，在js中我们可以遍历数组，却无法直接遍历object，咋办呢？

原来，这是一个特殊的object，因为它有一个length属性。有length属性的object，可以通过以下方式转换成数组（注：当然，这边也可以直接获取获取object中的length，然后来遍历。）：

Array.prototype.slice.call(object);

举个例子：

var obj ={length:2,0:'first',1:'second'};
objArr = Array.prototype.slice.call(obj);
alert(objArr);

结果：

注1： length是几个，就转换几个，如果你length写1，那么只弹出first。

注2： key必须为数字，而且与数组的角标是对应的。

这里不深究call的的意思，我会在以后重新写这方面的内容。

回到正题，现在可以拿到数组形式的children了！

var children = Array.prototype.slice.call(parent.children);

开始遍历：

for(var i = 0,len = children.length;i < len;i++){
 if(children[i] == box){
 alert(i);
 }
}

结果：

弹出来下标是2，因为数组下标的起始值是从0开始的。

上面的循环结构还欠缺了一个东西，就是一旦找到box之后，因为及时退出循环才是。像这样：

for(var i = 0,len = children.length;i < len;i++){
 if(children[i] == box){
 alert(i);
 break;
 }
}

这样便可以一定程度地提高性能。顺便附上forEach的写法：

children.forEach(function(child,index){
 if(child == box){
 alert(index);
 return false;
 }
});

这样也可以，最后，将这些内容封装成方法，就采用forEach的方式吧！

//查找当前dom元素在父盒子中的位置
function getIndex(dom){
 var index = -1;
 var domArr = Array.prototype.slice.call(dom.parentElement.children);
 domArr.forEach(function(obj,i){
 if(obj==dom){
 index = i;
 return false;
 }
 });
 return index;
};

我学习js的路线就是如此，先想尽办法把功能实现了，然后才开始封装成方法。封装的好处不言而喻，没有人喜欢每次用到这个功能的时候，就去把实现代码拷贝一份吧。

3.如何获取parent下面指定class的元素列表？

parent盒子下面有9个孩子节点，我们能否通过一个什么办法获取到这9个孩子节点呢？显然，这些孩子节点都有一个共同的className，那么我们可以通过这个className来获取。

IE9 + 已经可以通过下面的方式来实现了：

var children = parent.getElementsByClassName('child');

效果：

IE678还是不支持的，那么，如果让我们自己来封装一个方法，又该如何呢？

这里提供一种思路：

1.用getElementsByTagName获取parent元素下所有的节点。

2.遍历这些节点，比较className，如果相同，就用一个数组装起来。

3.返回这个数组。

上代码：

/*通过className获取dom元素进行过滤*/
function getClass(pid,sClass){
 var aEle = dom(pid).getElementsByTagName('*');
 var arrs = [];
 for(var i=0;i<aEle.length;i++){
 if(aEle[i].className.indexOf(sClass)!=-1){
 arrs.push(aEle[i]);
 }
 }
 return arrs;
}

最后，附上最开始小例子的源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0;padding: 0;}

body {

background: url(https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/12.jpg?2) no-repeat;

background-size: 100% 128%;

overflow: hidden;

}

.content {

height: 600px;

width: 305px;

margin: 100px auto;

position: relative;

border-top:8px solid #ccc;

border-right:10px solid #ccc;

}

.content .screen {

height: 298px;

width: 305px;

background: #333;

position: absolute;

}

.content .screen .icon {

width: 78px;

height: 78px;

display: inline-block;

background: url(android.png) no-repeat;

background-size: 100% 100%;

position: absolute;

top: 50%;

left: 50%;

margin-top: -39px;

margin-left: -39px;

}

.parent {

width: 305px;

height: 302px;

background: #d7e6ea;

position: absolute;

bottom: 0px;

}

.parent .child {

width: 80px;

height: 80px;

background: #eee;

float: left;

margin-top: 10px;

margin-left: 9px;

margin-right: 12px;

margin-bottom: 12px;

box-shadow: 3px -3px 2px #9898c7;

text-align: center;

line-height: 80px;

font-family: "微软雅黑";

font-size: 28px;

text-shadow: 2px 2px 2px yellowgreen;

}

.parent .child:hover {

cursor: pointer;

background: linear-gradient(#ccc,#666);

}

.putIn {

position: absolute;

width:100%;

height:60px;

line-height: 60px;

color: #fff;

bottom:0;

right: 0;/*为了让padding起作用*/

text-align:right;

font-size: 40px;

overflow: hidden;

padding-right: 8px;

padding-bottom: 8px;

}

</style>

</head>

<body>

<div class="content">

<div class="screen">

<i class="icon"></i>

<span id="putIn" class="putIn"></span>

</div>

<div class='parent'>

<div class='child'>1</div>

<div class='child'>2</div>

<div id='targetBox' class='child'>3</div>

<div class='child'>4</div>

<div class='child'>5</div>

<div class='child'>6</div>

<div class='child'>7</div>

<div class='child'>8</div>

<div class='child'>9</div>

</div>

</div>

</body>

<script>

//获取JavaScript的dom对象

function dom(id){

if(id.toString().indexOf('#') != -1) {

id = id.replace('#','');

}

return document.getElementById(id);

};

var buttons = document.getElementsByClassName('child');

var putIn = dom('#putIn');

for(var i = 0,len = buttons.length;i < len;i++){

buttons[i].onclick = function(){

var num = this.innerHTML;

if(putIn.innerText.length < 13 )

putIn.innerText = putIn.innerText + num;

}

}

</script>

</html>