码迷,mamicode.com
首页 > 编程语言 > 详细

第一百一十三节,JavaScript文档对象,DOM基础

时间:2016-11-20 13:27:03      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:程序   nbsp   cell   str   html   tab   模型   lsp   ble   

JavaScript文档对象,DOM基础

 

学习要点:

1.DOM介绍

2.查找元素

3.DOM节点

4.节点操作

 

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。DOM描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

 

一.DOM介绍

DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。

DOM有三个等级,分别是DOM1、DOM2、DOM3,并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safari、Chrome和Opera1.7+。

PS:IE中的所有DOM对象都是以COM对象的形式实现的,这意味着IE中的DOM可能会和其他浏览器有一定的差异。

 

1.节点

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

技术分享

 

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

PS:后面我们经常把标签称作为元素,是一个意思。

2.节点种类:元素节点、文本节点、属性节点。

元素节点,其实就是标签

属性节点,就是这个标签的属性

文本节点,就是标签包含的文本

<div title="属性节点">测试Div</div>

 

 技术分享

二.查找元素,元素节点

W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作。分别为:getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

 

元素节点方法

方法

说明

getElementById()

获取特定ID元素的节点

getElementsByTagName()

获取相同元素的节点列表

getElementsByName()

获取相同名称的节点列表

getAttribute()

获取特定元素节点属性的值

setAttribute()

设置特定元素节点属性的值

removeAttribute()

移除特定元素节点属性

 11

第一百一十三节,JavaScript文档对象,DOM基础

标签:程序   nbsp   cell   str   html   tab   模型   lsp   ble   

原文地址:http://www.cnblogs.com/adc8868/p/6082422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!