了解DOM
DOM是为了方便处理层次型文档(如XML、HTML)的一种技术。DOM还提供了一套API,使开发人员可以用面向对象的方式来处理这些文档。对于XML文档来说,有专门的处理XML文档是XML DOM,一般用的都是处理HTML文档 的HTML DOM 。
DOM 主要的功能是获得HTML语言中的各个元素(如div、form),从而可以很容易地获得这些元素的信息,或动态向这些元素中添加新的元素。操作DOM的对象实际上也需要使用JavaScript,也就是,调用DOM API也要编写JavaSscript代码。在JavaScript中描述DOM的对象是docment,其实document不仅是HTML DOM ,也是XML DOM,如果是直接操作HTML文档,可以使用documentElement属性,
var oHtml = document.documentElement ;
oHtml对象表示当前的整个HTML文档。在HTML文档的下一层有两个元素,head和body,这两个元素可以使用firstChild属性和lastChild属性获得,
var oHead = oHtml.firstChild ;
var oBody = oHtml.lastChild ;
还可以使用childNodes属性来获得上面两个对象,
var oHead = oHtml.childNodes[0] ;
var oBody = oHtml.childNodes[1] ;
通过HTML元素对象的outerHTML和innerHTML属性,可以分别获得当前元素的包括元素本身的和不包括元素本身的HTML代码,
alert(oHead.outerHTML) ; // 显示包括head标签本身的内容
alert(oBody.innerHTML) ; // 显示不包括body标签本身的内容
在DOM 中有3中方法可以获得当前HTML文档中的任意一个HTML元素,这3个方法也就是HTML document 的3 个方法,分别是getElementById、getElementsByClassName、getElementsByTagName。
1.getElementById方法
getElementById方法是最简单的一个,这个方法可以根据HTML元素的id属性值得到HTML元素。在HTML文档中,id属性值是唯一的。
2、getElementsByClassName方法
这个方法通过HTML的class属性获得对应的HTML元素集合。由于HTML元素的class属性值并不唯一,因此,使用getElementsByClassName方法可以得到多个相同class属性值的HTML元素。
3、getElementsByTagName
getElementsByTagName方法获得的HTML元素的范围最大,他可以根据HTML元素的标签类型来获得一个相同HTML元素的数组。
了解DOM的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
- 重撸js_2_基础dom操作
1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- jQuery学习之路(2)-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- 【loj10061】最短母串
#10061. 「一本通 2.4 练习 4」最短母串 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 上传者: 1bentong 提交 提交 ...
- Educational Codeforces Round 46 (Rated for Div. 2) E. We Need More Bosses
Bryce1010模板 http://codeforces.com/contest/1000/problem/E 题意: 给一个无向图,求图的最长直径. 思路:对无向图缩点以后,求图的最长直径 #in ...
- 记忆化搜索(DFS+DP) URAL 1501 Sense of Beauty
题目传送门 /* 题意:给了两堆牌,每次从首部取出一张牌,按颜色分配到两个新堆,分配过程两新堆的总数差不大于1 记忆化搜索(DFS+DP):我们思考如果我们将连续的两个操作看成一个集体操作,那么这个操 ...
- C3 Transitions, Transforms 以及 Animation总结
C3 Transitions, Transforms 以及 Animation总结 前言 昨天有人咨询我面试的注意事项, 突然就意识到自己这块非常差, 竟然没有任何的印象, 准备看着大神老师的博客, ...
- 转--oracle查看允许的最大连接数和当前连接数等信息
两个参数间的关系:sessions=1.1*processes+5 目前总结的语句,在查看数据的连接情况很有用,写完程序一边测试代码一边查看数据库连接的释放情况有助于分析优化出一个健壮的系统程序来. ...
- JavaEE中一些缩写的含义
EJB:Enterprise JavaBeans (企业JavaBeans) XML:Extensible Markup Lauguage (可扩展标记语言) SOAP:Simple Object ...
- fgetcsv()函数
fgetcsv()函数.fgetcsv()函数可以读取指定文件的当前行,使用CSV格式解析出字段,并返回一个包含这些字段的数组.语法格式如下:array fgetcsv(resource $handl ...
- STM32CUBEMX使用注意:
一 注意堆栈大小,简单来说,栈空间用于局部变量空间(size=0x400一般够用),堆(size=0x200一般够用)空间用于 alloc 或者 malloc函数动态申请变量空间
- 如何修改phpmyadmin上传文件大小限制
修改php配置文件,php.ini upload_max_filesize = 100M post_max_size = 100M 一般修改这2个就行了,然后重启wampserver 如果还不行,就执 ...
- 动手实现 Redux(一):优雅地修改共享状态
从这节起我们开始学习 Redux,一种新型的前端“架构模式”.经常和 React.js 一并提出,你要用 React.js 基本都要伴随着 Redux 和 React.js 结合的库 React-re ...