分享人:陈皓宇
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
什么是DOM?简单地说,DOM是一套对文档的内容进行抽象和概念化的方法
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML 交互的API文档。DOM 是载入到浏览器中的文档模型,它用节点树的形式来表现文档,每个节点代表文档的构成部分(例如: element——页面元素、字符串或注释等等)。 DOM 是Web——万维网上使用最为广泛的API之一,因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建,移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。 DOM 并不是天生就被规范好了的,它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在, WHATWG维护DOM生活标准。
在现实世界里,人们对所谓的'世界对象模型'都不会陌生,例如,当用'汽车'、'房子'和'树'等名词来称呼日常生活环境里的事物时,我们都可以百分百的肯定对方知道我们说的是什么,这是因为人们在对这些名词所代表的的东西有着相同的认知。于是,当对别人说"汽车停在车库里"时,可以断定他们不会理解为"小鸟关在壁橱里"
我们的"世界对象模型"不进可以用来描述客观存在的事物,还可以同来描述抽象概念。例如,假设有个人想我问路,而我给出的答案是"左边第三栋房子",这个答案有没有意义取决于那个人能够理解"左边"和"第三"的含义。如果他不会数数或者分不清左右,则不管他是否理解这几个概念,我的回答对他都不会有任何的帮助。在现实世界中,正是因为大家对抽象的"世界对象模型"有着基本的共识,人们才能用非常简单的话来表达出复杂的含义并得到对方的理解。
节点这个词是一个网络用语,代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。
在现实世界中,一切事物都由原子构成。原子就是现实世界的节点。但是原子同样还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样也是节点。
DOM也是同样的情况。文档是由节点构成的集合,只不过此时的节点是文档树上的树枝和树叶而已。
在DOM中有许多不同类型的节点。就像原子包含着亚原子微粒那样,也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种:元素节点、文本节点和属性节点。
元素节点只是节点类型的一种。如果一份文档完全有一些空白元素构成,他将有一个结构,但这份文档本身将不会包含什么内容。
获取DOM
通过使用 getElementById() 方法匹配元素的id属性来访问元素节点,对元素节点进行操作
通过使用 getElementsByTagName() 方法匹配元素的tagName来访问元素节点,对元素节点进行操作
通过使用 getElementsByClassName() 方法匹配元素的className来访问元素节点,对元素节点进行操作
值得注意的是, getElementsByTagName() 和 getElementsByClassName() 这两种方法因为其访问的是节点中的可能为复数的属性,所以得到的会是一个以数组的形式来体现出来的元素节点集合,我们可以通过打印获取到的DOM节点来判断类型
demoDOM事件
onclick事件---当用户点击时执行
onload事件---当用户进入时执行
onunload事件---用用户离开时执行
onmouseover事件---当用户鼠标指针移入时执行
onmouseout事件---当用户鼠标指针移出时执行
onmousedown事件---当用户鼠标摁下时执行
onmouseup事件---当用户鼠标松开时执行
demo如何通过class和target调用元素?如何对其设置属性?
在一个页面中常常有多个class相同的元素,也有多个标签相同的元素,在调用时方法如下
demoonblur事件---当对象失去焦点时发生
onchange事件---当对象域的值被改变时发生
button 事件---属性可返回一个整数,指示当事件被触发时哪个鼠标按键被点击。
更多的事件就不一一的描述了,有兴趣的同学可以去看下这个
w3school《JavaScript DOM编程艺术》
w3school感谢大家观看
分享人:陈皓宇|金立剑