JavaScript学习7:DOM基础

DOM的全称为DocumentObject Model,即文档对象模型,是针对HTML和XML文档的API。它描绘了一个具有层次结构的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM是由Netscape及微软公司创始的DHTML发展而来的,但是现在它已经成为了表现和操作页面的真正跨平台的、语言中立的方式。

一.对DOM的理解

DOM中的三个字母,D可以理解为整个Web加载的网页文档;O可以理解为类似window

对象之类的东西,可以调用属性和方法,这里我们所说的是document对象;M可以看做是网页文档的树形结构。

1节点

加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构,DOM将这种树型结构理解为由节点组成。如下图所示

从上图的树型结构我们可以看到,html标签没有父辈,没有兄弟,所以html标签为根标签,head标签是html子标签,而meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话,那么这些节点组合成了一棵节点树。

2节点种类

DOM中的节点大概分为:元素节点、文本节点和属性节点

二.查找元素

W3提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作,

列举如下:

我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问他的一系列属性。

那么这些属性值如何取出来呢?

我们来看一个简单的小例子:

<span style="font-size:18px;"><body>
	<div id="box" title="测试页面" class="cla" style="color:blue;" >
		学好JS,前台都不怕!
	</div >
</body>
window.onload=function(){
	var obj= document.getElementById('box');
	alert(obj.tagName);
	alert(obj.innerHTML);
	alert(obj.id);
	alert(obj.title);
	alert(obj.style.color);
	alert(obj.className);
};</span>

至于其他方法就不再一一说明了,想了解的可以去查相关的资料。

三.DOM节点

1 node节点属性

节点可分为三种,上文提到了,而这些节点又有三个非常有用的属性,分别为:nodeName、

nodeType、和nodeValue。如下是他们的说明:

2层次节点属性

节点的层次结构可以划分为:父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。

四.节点操作

DOM不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换节点。

时间: 2024-11-12 17:19:16

JavaScript学习7:DOM基础的相关文章

JavaScript学习笔记——DOM基础 2.1

一.DOM 1.DOM的基本概念 DOM是Document Object Model的缩写,意思是文本对象模型,也就是说,如果没有Document,DOM也就无从谈起.我们可以把创建的网页当作是一个Document对象. JavaScript的对象可以分为三种类型:由用户自定义的对象,由JavaScript本身提供的内建对象,以及由浏览器提供的宿主对象. 顺便提一下BOM(Browser Object Model)和WOM(Window Object Model),其实这两个说的是一种东西,但大

JavaScript学习--Item29 DOM基础详解

看完JavaScript高级程序设计,整理了一下里面的DOM这一块的知识点,比较多,比较碎!DOM在整个页面的地位如图: DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口).DOM描,绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1.节点层次 DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点

JavaScript学习笔记——DOM基础 2.6

一.CSS-DOM 1.清楚一个概念 HTML负责的是结构,CSS负责的是样式,JavaScript负责的是动作(行为). 2.style属性 语法:element.style 返回:object style相对于element是一个属性,而style本身是一个对象,它包含了诸多元素的样式. 关于这一点,可以根据后面的例子去理解. 3.获取样式 例子:element.style.fontFamily 返回:style对应属性的值,如fontFamily,返回“Microsoft yahei” 注

JavaScript学习笔记——DOM基础 2.5

一.document.write方法 document对象write()方法,常用来向网页中输出字符串,圆括号中可以是要输出的字符串, document.write('这是我的个人博客'); 也可以是字符串变量, var myText = '这是我的个人博客'; document.write(myText); 还有一种,就是通过字符串和变量组合的方式进行输出. var myText = '这是我的'; document.write(myText + '个人博客'); document.write

Javascript学习总结-DOM编程-(七)

1. DOM 1.1. DOM简介 全称Document Object Model,即文档对象模型. DOM描绘了一个层次化的树,允许开发人员添加.删除.修改页面的某一部分. 浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的, 而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树, 组建好之后,按照树的结构将页面显示在浏览器的窗口中. 1.2. 节点层次 HTML网页是可以看做是一个树状的结构,如下: html |-- head |     |-- title |

JavaScript学习笔记——对象基础

javascript对象基础 一.名词解释: 1.基于对象 一切皆对象,以对象的概念来编程. 2.面向对象编程(oop Object oriented programming) A.对象 就是人们要研究的任何事物,不仅能表示具体事物,还能表示抽象的规则,计划或事件. 属性的无序集合,每个属性可以存一个值(原始值,对象,函数) B.对象的属性和行为 属性:用数据值来描述他的状态 行为:用来改变对象行为的方法 C.类 具有相同或相似的性质的对象的抽象就是类.对象的抽象,就是类,类的具体化(实例化)

JavaScript学习笔记——语言基础(1)

1.JavaScript虽然名字里包含Java,但它和Java的交集微乎其微. 2.JavaScript没有输入/输出的概念.它是一个在宿主环境下运行的脚步语言.帮助宿主环境与外界交流.最普遍的宿主就是浏览器,但在Adobe Acrobat,photoshaop,Yahoo的widget中也有JavaScript的解释器. 3.JavaScript的类型图谱如下: 4.JavaScript中的字符串是一些字符序列.它们是Unicode字符序列,每个字符都是由16位数字表示. 5.JavaScri

JavaScript学习笔记——语法基础1.1

一.写在前面的话 1.我们有听说过,在一些地方,会把JavaScript当作入门级编程语言,这是因为它相对易学,易习. 2.JavaScript是一门地地道道的编程语言,既然是一门语言,那就应该有专属于它本身的语法,掌握它的语法势在必行. 3.不要试图去记忆它的所有语法和关键字,事实上,几乎没有人能做到这一点. 4.没有一个人敢说,学JavaScript1年或者几年就能称为不败的神话,坚持下去,会让你走的更远,只有这样,你才可能欣赏到更美的风景. 5.制定一个适合你自己的计划,选择一本适合你的书

JavaScript学习笔记&mdash;&mdash;语言基础(2)

1.当你查询一个不存在的数组索引,结果会是undefined. 2.遍历一个数组可以像下面这样写: for(var i = 0;i < a.length; i++){ //Do something with a[i] }      但这样效率比较低,因为每次循环都会计算一次数组长度.可以修改成: for(var i = 0, len = a.length; i < len; i ++){ //Do something with a[i] }     还有一种更好的写法是: for(var i

【Javascript学习】语言基础

数据类型 javascript数据类型分为两种:基本类型与对象类型 基本类型:数字.字符串.布尔值.null.undefined其中null与undefined代表了各自特殊类型的唯一成员 对象类型:所谓对象类型便是属性的集合,每个属性都是由键值对组成普通的对象时无序键值对,有序的键值对便是我们的数组了 还有一个特殊的对象便是函数函数是具有与他相关联的可执行代码的对象,通过调用函数运行可执行代码并返回结果 若是使用new操作符来新建一个对象我们便称之为构造函数每个构造函数定义了一个类——由构造函