这一晚上看的我是头疼不已啊,为什么呢?
终究是半路出家,我对javascript的理解仅仅停留在:调用javascript,改变页面样式,元素和实现一些事件的响应,尽管须要的时候可能会用,可是到底使用的原理却不是非常明确,至于DOM,这么专业的词汇,还是省省吧。
只是一晚上也不是毫无收获,先记录下临时自己的理解,可能存在偏差,随着之后应用的增多慢慢理解吧,先烙个印再说。
1、DOM它是什么?
最直接的回答:“Document Object Model”的缩写,简称“文档对象模型”,听到这种回答真是让人抓狂啊,可是,不得不说它是正确的。
最专业的回答:W3C对DOM的定义是-----它 是中立于平台和语言的接口,程序和脚本能够通过这个接口动态的訪问和改动文档的内容、结构和样式。
最简练的回答:一种API,应用编程接口
毫无疑问,上面的回答都是正确的,并且我们还能提炼出几个要点:1、一种应用接口;2、对文档的操作,在我看来,这大抵就是它的核心了,这样我们来试着通俗的解释下,看看能不能更简单、更直观的了解这样的概念
在上一篇文章中,提到了javascript能够分成三部分:ECMAscript、DOM、BOM,然后又简单描写叙述了下ECMAscript:定义了变量来存不同数据类型的值,定义了运算符来对值进行操作,将值的改变和运算符的操作过程合成语句,或者用语句拼接一些完整的方法等等,可是就这样摆着,方法是有了,可没见过说明书能够自己操作机器的,我们要想真正实现动态化和交互性,就必须将他们整合,而这样的将html(或者html5)、css和javascript凝聚在一起的就是DOM。
这样我们再来回味上面的三种回答,它是将文档内事物都整合起来作为一个大的对象进行操作的;至于改变文档内的内容,javascript则是来訪问这个文档的入口,而举个不恰当的样例,桌上一桌丰盛的菜,你最须要的是什么,是一套餐具,人用餐具吃饭,这已经成了一个标准,无论你吃的是那个菜,无论是你在吃还是他在吃,手扒的倒是能够排除在外,而javascript就是那个媒介,那个通道....
2、DOM是怎样进行改变的?
这个总是各个介绍中大篇幅阐述的,看的多了,理解的也就easy些,这样我们先来看看这幅神图:
嗯,就是这样,DOM将整个文档打散,分成一个模块一个模块的散件,里面的随意一个事物你都能够单独将它取出来,这就是它的策略,分而治之。
这样来让我们看看,它把他都分成了什么:(还记得什么是网页么,html标签 + 文本)
* 文档节点 :这就是整个文档,就是一个网页
* 元素节点 : html标签
* 文本节点 :文本
* 属性节点 :html标签的属性
* 凝视节点 :凝视都是一类,分的果然非常细,不放过一条活鱼的样子
至于根节点、父节点、子节点和同胞的差别,就不详说了,这个社会,谁还能分不清谁是谁啊。
3、DOM的初印象
你对DOM的初印象是什么,我不知道,我的初印象是对事件的响应,既然是实现动态,可以交互,就必需要能监听事件,或者鼠标的,或者键盘的,这就是我最初的概念,当然这非常片面,可是这一点会你是始终忘不掉的,简单想想会有哪些事件需要监听呢:
* onclick/onmouseover/onblur/甚至单击、双击、右键、长按的鼠标操作,足够单独整理一篇的
* 监听键盘(不同按键相应的编码,难道真的要背么..)
* 事实上另一个是对页面改变的监听,window.onload/onchange/等等
4、DOM的增删改查
碰到数据处理,惯性的就是考虑增删改查,不得不说,这应该算的上一个好习惯。我们最常见、使用频率最高的应该是查和改。
查的方法通常有三种:getElementById、getElementByTagName、getElementByNames,由于id的唯一性,通过id来定位查询是最快最经常使用的,而后两种则是获取集合类型,批量获取的好方法,tagname用来获取同样标签的同类元素,而classname则能够*定义,更便于特选部分,而非所有,当然classname还存在它最大的问题就是兼容性,万恶的ie。
而改的就 更简单了,在前面以前做过的更改页面背景颜色,甚至改变引入样式,改变标签内容等,都是DOM的改,它主要包含例如以下几个方面:1、改变html内容;2、改变CSS样式;3、改变html属性;4、改变事件(处理程序)
而增和删就是最近才掌握学习的,createElement(“div”)是不是非常熟悉,是的,我们已经用过非常多次了,当然节点还不仅仅这一种,我们还能够变通,仅仅要不要忘记最后的appendChild(),而删就更easy理解了,在哪就从哪里剔除掉,removeChild(),“县官不如现管”在这里体现的淋漓尽致,当然前面的改也能够通过replaceChild来总体改动,就不再多说了。
这里事实上有个最明显,最经常使用,而我们却非常少去思考的一个最鲜活的样例,我们来分析下,加深下印象:
<script type="text/javascript">
function show(){
alert("haha");
}
</script>
是不是很的熟悉,没办法,生活就是这样,总在不经意间让你感觉到无尽的智慧。我们来写一下它的DOM代码
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function show(){alert('haha');}";
document.body.appendChild(script);
这种话<script type="text/javascript" src=""></script>你知道怎么写了么
5、怎样加快DOM的执行速度
事实上我如今写这个有点牵强,由于我没有实际应用測试过,可是感觉是有道理的,就在这里一块说下:
首先,为什么会存在DOM的执行速度问题?
DOM的改动会严重影响网页的用户界面,须要又一次绘制页面,也就说须要浏览器进行又一次解析,而为了确保运行效果的准确性,全部改动操作是按顺序同步运行的,也就是所说的“回流”,由于须要又一次从头运行,所以性能上肯定要收到影响。我们无法改变这样的现状,仅仅能有意有效的去降低它的负担,避免更能多的影响因素。
然后,我们来看看,那些操作能够呢?
1、通过类名切换来改动DOM
document.getElementById("").style.color=cyan;
document.getElementById("").style.width=100px;每个改变都要进行重析,须要执行两次
我们全然能够写成.cc{style:cyan;width:100px;}
document.getElementById("").classname=cc;这里仅仅须要执行一次就可以
2、一次性DOM元素生成
var e=document.createElement("");
body.appendChild(e);
e.innerHTML="haha";---两次重析
而我们能够去做的仅仅是将二三句进行颠倒就可以
var e=document.createElement("");
e.innerHTML="haha";
body.appendChild(e);--一次就可以
3、还有个就是文档片段记录
function show(element){
var a;
for(var i=0;i<10;i++){
var e=document.createElement("");
e.innerHTML="haha";
body.appendChild(e)
}
};----这但是一个浩大的project,须要10次重析
而我们通过文档片段记录,则有效的减短了时间
function show(element){
var a,f=document.createDocumentFragment();
for(var i=0;i<10;i++){
var e=document.createElement("");
e.innerHTML="haha";
f.appendChild(e);
}
body.appendChild(f);
}
我理解的DOM,临时是这样一个框架,接下来还须要看BOM,毕竟这三部分是一个总体,整合起来看的话会有不小的惊喜吧,今天就先到这里了,啊,又晚了,睡觉
javascript DOM,它到底是什么-------Day32的更多相关文章
-
JavaScript DOM 编程艺术(第2版)读书笔记(1)
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...
-
读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
-
javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
-
JavaScript DOM 编程艺术&#183;setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
-
javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
-
javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
-
javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
-
JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
-
javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
随机推荐
-
GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块)GCJ-02:中国坐标偏移标准,Google Map.高德.腾讯使用BD-09:百度坐标偏移标准,Baidu Map ...
-
AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
-
特征工程 dataframe格式
import os import copy import codecs import operator import re from math import log from pyspark.sql ...
-
IM通信协议逆向分析、Wireshark自定义数据包格式解析插件编程学习
相关学习资料 http://hi.baidu.com/hucyuansheng/item/bf2bfddefd1ee70ad68ed04d http://en.wikipedia.org/wiki/I ...
-
explicit用法
explicit用来防止由构造函数定义的隐式转换. 要明白它的作用,首先要了解隐式转换:可以用单个实参来调用的构造函数定义了从形参类型到该类类型的一个隐式转换. 例如: class things { ...
-
Hadoop 源码编译导出
https://svn.apache.org/repos/asf/hadoop/common/branches/branch-trunk-win/BUILDING.txt http://www.src ...
-
The 6th Zhejiang Provincial Collegiate Programming Contest->;ProblemF:80ers&#39; Memory
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3207 题意:给出N个关键字符串,然后给出k行,每行Ni个字符串,找出每行有 ...
-
脑波设备mindwave二次开发框架
神念科技提供的mindwave提供了脑波耳机和相应的游戏,这些游戏你可以通过购买神念科技的mindwave耳机来获取,这里不多作介绍. 我们作为程序员,如果有了相应的创意,也可以通过他们提供的二次开发 ...
-
Java中的Integer
包装类---Integer Integer 类在对象中包装了一个基本类型int的值.Integer类型的对象包含一个 int 类型的字段.此外,该类提供了多个方法,能在 int 类型和 String ...
-
Activity生命周期详解
http://blog.csdn.net/liuhe688/article/details/6733407 onPause 回到 onResume 的过程“在一般的开发中用不上”,但是作为开发者还是有 ...