javascript DOM,它到底是什么-------Day32

这一晚上看的我是头疼不已啊,为什么呢?

终究是半路出家,我对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,毕竟这三部分是一个总体,整合起来看的话会有不小的惊喜吧,今天就先到这里了,啊,又晚了,睡觉

时间: 2024-10-11 17:11:57

javascript DOM,它到底是什么-------Day32的相关文章

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

JavaScript DOM (1)

JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出IE3的时候发布了自己的VBScript语言,同时以JScript为名发布了JavaScript 的一个版本,很快赶上了 Netscape 的步伐.面对微软公司的竞争,Netscape 和 Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript 语言进行了标准化,于是出现了ECMASc

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

《JavaScript+DOM变成艺术》的摘要(二)

//DOM: //对象是一种独立的数据集合,与某个特定对象相关联的变量被称为这个对象的属性,通过某个特定对象可以为之调用的函数被称为这个对象的方法 // //4个非常实用的DOM方法: //检索特定元素节点的方法: //document.getElementById:与document相关联的函数,在脚本代码里,函数后面必须跟有一组圆括号 //document.getElementsByTagName:返回的是一个数组 //,setAttribute,getAttribute alert(doc

JavaScript DOM编程艺术第一章:JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap

前端学习系列之JavaScript DOM

JavaScript DOM简介 介绍 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM编程: DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准 HTML DOM节点树 通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问.所有 HTML 元素(节点)均可被修改,也可以创建或删除节点 理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签.head标签是htm

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

JavaScript DOM编程艺术学习笔记(一)

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad

JavaScript DOM实战:创建和克隆元素

DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的JavaScript DOM方法实战-修改文档树中已经用过它们.当时的目的是把新创建的元素添加到文档树里,使它成为某个元素的最后一个子节点. 1. //创建一个li新元素 2. var newChild=document.createElement('li'); 3. //创建一个a 新元素 4. v