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的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. python实现汉诺塔(递归)

    def hanoi(n, A, B, C): if n > 0: hanoi(n-1, A, C, B) print("%s->%s" % (A, C)) hanoi( ...

  2. Codeforces Round #402 (Div. 2) C

    Description Igor found out discounts in a shop and decided to buy n items. Discounts at the store wi ...

  3. sql基础语法-创建表和约束

    创建数据库表 USE SQL2016 IF OBJECT_ID('dbo.Employees','U') IS NOT NULL DROP TABLE dbo.Employees; Create TA ...

  4. selenium2+python自动化2-元素定位

    嘻嘻,书接上回,接着唠,这里先补充一下自动化要掌握的四个步骤吧:获取元素.操作元素.获取返回值.断言(返回结果与期望结果是否一致),最后就是自动化测试报告的生成.这一片主要讲一下如何进行元素定位.元素 ...

  5. word-wrap与word-break为长单词换行

    如果你遇到长串英文单词或者url换行的问题,这时候就需要用到word-wrap与word-break这2个css属性啦. word-wrap:break-word;长单词与url地址自动换行. wor ...

  6. CZ-python01-06

    练习代码 练习代码 # Python注释 # 注释不是越多越好,对于一目了然的代码,不需要添加注释 # 对于复杂的操作,应该在操作开始填上若干行注释 # 对于不是一目了然的代码,应在其行尾添加注释(为 ...

  7. (转)Unity优化之减少Drawcall

    转载:http://www.jianshu.com/p/061e67308e5f Unity GUI(uGUI)使用心得与性能总结 背景和目的 小哈接触Unity3D也有一段时间了,项目组在UI解决方 ...

  8. 外文翻译 《How we decide》被情感愚弄 第一节

    本节为第三章的起始. 书的导言 本节阅读感言:情感系统脱离控制的后果是毁灭性的. Ann Klinestiver 在一所高中做英文老师,她被诊断为患帕金森综合症.在课堂上,当她正准备和学生们谈及一些莎 ...

  9. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  10. C# 移动开发 MasterDetailPage 关闭时报错问题

    至上次发表的 MasterDetailPage界面做主App,折腾10天,终于知道问题所在.. 泪奔的是解决这个问题只要一句代码 在MainActivity.cs里 [Activity(Label = ...