JavaScript DOM学习总结(一)
DOM
什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法。
W3C给出的DOM定义是这样的:“一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修改文档的内容,结构和样式。”
那么楼主在这里主要是跟大家分享下JavaScript中如何使用DOM,当然如果会用JavaScript使用DOM,当你使用PHP或是Python之类的语言来解析XML文档的时候,我们获得的DOM新知识将会有很大的帮助。
DOM中的“D",”O",“M”。
“D”当然就是“document”了,没有document的存在DOM也就无从谈起,浏览器在加载完我们所写的网页时,DOM就在后台产生了。浏览器将之转化为一个可读的文档对象。
"O"呢,就是“object”,JavaScript中对象分为三种,分别是:用户自定义对象(用户自行创建的对象),宿主对象(浏览器提供的对象)和内建对象(JavaScript中的内建对象,如:Math,Date)。对象就是我们操作的主要目标。
“M"怎么说呢,说它是”Modle"可以,也能说是“Map”本身DOM的存在就是让我们对整个文档有一个把握,所以说它是模型有道理,说它是地图也有道理。这里我们姑且把它当做是Map吧,既然是地图,那必然要有诸如图例,方向,等高线和比例尺之类的图例。我们要向看懂地图就需要对这些图例了如指掌。对于DOM同样如此,DOM把文档表示成一棵树(这里的“树”是数学上的概念),也是我们理解和运用这一模型的关键。家谱树模型非常适合用来表示一分用(X)HTML编写的文档。
比如:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas</title>
<style>
</style>
</head>
<body>
<h1 title="example">Examples</h1>
<p>A example</p>
<ul id="number">
<li class="one">第一条</li>
<li class="two">第二条</li>
<li class="three">第三条</li>
</ul>
</body>
</html>
节点
节点是个网络术语,他表示的是构成网络中的一个连接点。一个网络就是由一些节点所构成的集合。
那么在DOM中同样存在节点,浏览器所解析的文档就是由一个个的节点构成,这个节点就是我们上面所画出来的树中的树叶和树枝。那么这些树叶和树枝被分为了三种:元素节点,属性节点,文本节点。,接下来我们一一看一下:
1.元素节点
元素节点其实很好理解,我们文档中诸如body,p,ul,li等标签都是一个元素节点。
标签的名字就是元素节点的名字。
比如:
<p>A example</p>
这里的p标签就是一个元素节点,p就是元素节点的名称。
2.属性节点
属性节点是为了对元素做出更具体的描述,比如我们文档中:
<h1 title="example">Examples</h1>
这里的title就是一个属性节点,属性节点用用比较广泛,CSS中的诸如style,id,class我们都可以把它看做是一个属性节点访问。
3.文本节点
文本节点就更容易理解了,就是文本内容嘛。比如:
<ul>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ul>
在XHTML中文本节点被包含在元素节点的内部,当并非所有的元素节点都包含文本节点,就像这里的ul标签没有文本内容,它包含了li标签,li有文本内容,里面的内容就构成了文本节点。
获取元素
有三种方法可以获取元素节点,分别是通过元素ID(getElementByID),通过标签名字(getElementByTagName),通过类名字(getELementByClassName)来获取:
1.getElementById
注意:JavaScript区分大小写,getELementById这几个字母不能写错了
<script>
var number=document.getElementById("number");
alert(typeof number);
</script>
我们会得到 如图所示的alert对话框:
由此我们也能更深入的理解了HTML中处处皆对象的概念。
2.getElementByTagName
getElementTagName会得到一个数组,这个数组对应着给定标签的每一个元素,
比如:
var element=document.getElementsByTagName("li");
for(var i=0;i<element.length;i++){
alert(typeof element[i]);
}
我们依然可以看到:
3.getElementByClassName
var element=document.getElementsByClassName("one");
alert(typeof element);
我们仍旧可以看到:
到这里我们就学完了获取元素的三种方法,我想你一定厌倦了看那么多变的显示着object的alert对话框,你一定也明白了文档中每个节点都是一个对象。
那么我们下一次就要说一下节点对象的属性和方法了。利用这些方法我们就可以随心所欲的改变文档中的内容,甚至改变某些元素的属性。
下面是对本次学习的一个总结:
一份文档就是一棵节点树.
节点分为不同的类型,元素节点,属性节点和文本节点等。
getElementByTagName和getElementByClassName将返回一个对象数组,他们对应着一组特定的元素节点。
每个节点都是一个对象。
Happy hacking !
JavaScript DOM学习总结(一)的更多相关文章
- javascript DOM 学习总结 (1)
摘自javascript DOM编程艺术 1.首先介绍DOM的三个字母的含义: 1.1 D 如果没有document(文档),DOM 也无从谈起,当创建了一个网页并把他加载到web浏览器中时,DOM ...
- JavaScript DOM学习总结(二)
获取和设置属性 DOM实在是个好东西,掌握了它我们不仅可以在JavaScript中使用,其它程序语言我们同样可以使用. 接下来就一起使用DOM来干些实事吧! 1.getAttribute getAtt ...
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- 初步总结javascript中学习DOM之前的知识
嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- JavaScript DOM 编程艺术(第2版)读书笔记(1)
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- JavaScript DOM编程艺术第一章:JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
随机推荐
- 【转】 Nginx深入详解之多进程网络模型
[转自]http://blog.chinaunix.net/uid-22312037-id-3974068.html 一.进程模型 Nginx之所以为广大码农喜爱,除了其高性能外,还有其 ...
- Ubuntu Desktop基本办公环境搭建
Ubuntu Desktop基本办公环境搭建 一如前面所强调的, linux系统是面向开发人员友好的,而对office办公人员并不友好 . 如果是重度的office办公需求人员,不建议使用linux ...
- JavaScript使用DeviceOne开发实战(一) 配置和起步
2015 年 9 月 底,DeviceOne Release发布.至此,DeviceOne 基本完成了对多端的支持.基于 DeviceOne 可以: HTML5.Android.iOS.Windows ...
- prerender-SPA程序的SEO优化策略
随着web2.0的兴起,ajax的时代已经成为了事实,更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来,Single ...
- 一天一小段js代码(no.3)
//遍历属性,返回名值对 function outputAttributes(element){ var pairs = new Array(), attrName, attrValue, i, le ...
- 渣渣小本求职复习之路每天一博客系列——Unix&Linux入门(5)
前情回顾:昨天简单地介绍了一下如何使用vi编辑器,例如命令模式和插入模式的切换,以及一些简单命令的讲解. —————————————————————————直接就开始吧———————————————— ...
- [ACM_动态规划] 找零种类
问题描述:假设某国的硬币的面值有 1.5.10.50 元四种,输入一个金额 N (正整数,N<=1000),印出符合该金额的硬币组合有多少种. 问题分析: 1.5.10 元组合出 N 元的方法数 ...
- 如何用django开发一个简易个人Blog
功能概要:(目前已实现功能) 公共展示部分: 1.网站首页展示已发布的博客记录,包括名称.摘要信息.发布日期.阅读量及评论数. 2.首页文章列表可按照分类筛选. 3.点击标题或阅读全文链接,进入博客阅 ...
- Lucene系列-搜索
Lucene搜索的时候就要构造查询语句,本篇就介绍下各种Query.IndexSearcher是搜索主类,提供的常用查询接口有: TopDocs search(Query query, int n); ...
- Linux网络编程系列-TCP编程实例
实例: client #include <stdio.h> #include <sys/socket.h> #include <netinet/in.h> #inc ...