文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

  DOM的出现统一了浏览器残次不齐的问题,大大地扩展了Javascript的工作内容。使得页面内容更加丰富。

      

  这张图片展示的就是DOM树的结构。

  node:节点。类似树的结构,DOM由结点构成。结点又分为元素结点,文本结点和属性结点。元素结点很容易理解,想<a titile="begin">text</a>这样的一个整体就是元素结点,文本结点是里面的内容即text,属性结点就是指类似title这样的东西。

  DOM获取元素有几种方式:

getElementById
getElementsByTagName
getElementsByClassName
getElementsByName

  仔细看的话只有getElementById是Element,其他三种都是Elements

  因此getElementById得到的是一个对象,其他三种都是对象数组,只能通过取下标获得。

getAttribute
setAttribute

  设置属性值跟取得属性值,也可以直接靠 .attribute 取得,但兼容性不太强。

childNodes
firstChild
lastChild
nodeType
nodeValue
nodeName

childNodes是某个node的子节点,包括元素节点、文本节点等

firstChild 是取第一个节点,lastChild是取最后一个节点

nodeType是显示节点类型值,对于一个节点有唯一值匹配

元素:1

属性:2

文本:3

注释:8

文档:9

nodeValue是节点值

nodeName是节点标签名

例如:

对于<p id="demo" title="p1"><a>text</a>p_text</p>

c=document.getElementById("demo") //c为p节点

c.childNodes[0] --> <a>text</a>

c.childNodes[1] -->  "p_text"

c.childNodes[0].nodeType -->1

c.childNodes[1].nodeType -->3

c.childNodes[0].nodeValue --> null

c.childNodes[1].nodeValue-->"p_text"

c.childNodes[0].nodeName --> "a"

c.childNodes[1].nodeName --> "#text"

[DOM]初识DOM的更多相关文章

  1. 初识DOM

    初识DOM 一. 节点的获取.插入.创建.删除.替换.修改文本节点 获取 1.document.getElementById 2.(element)document.getElementsByTagN ...

  2. React v16-alpha 从virtual dom 到 dom 源码简读

    一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...

  3. -_-#【Dom Ready / Dom Load】

    Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...

  4. Virtual DOM 虚拟DOM的理解(转)

    作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...

  5. js 字符串转dom 和dom 转字符串

    js 字符串转dom 和dom 转字符串 博客分类: JavaScript   前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...

  6. javascript DOM和DOM操作的四种基本方法

    在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...

  7. 精讲 org.w3c.dom(java dom)解析XML文档

    org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...

  8. 虚拟DOM Vitural DOM Tree

      提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快.那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM. 一.什么 ...

  9. DOM & Shadow DOM & Virtual DOM

    DOM & Shadow DOM & Virtual DOM What is the difference between Shadow DOM and Virtual DOM? ht ...

随机推荐

  1. Mac os x 系统的发展史

    ·Mac OS 9:发布时间:1999年 于1999年发布的Mac OS 9操作系统(图片来自互联网) 在OS X之前,1999年发布的Mac OS 9看起来就是一个普通的桌面操作系统.并且现在已经被 ...

  2. 基于Selenium的web自动化框架

    转自 : https://www.cnblogs.com/AlwinXu/p/5836709.html 1 什么是selenium Selenium 是一个基于浏览器的自动化工具,它提供了一种跨平台. ...

  3. 【Jest】笔记三:全局变量

    一.前提 我们在使用unittest,testng框架的时候都知道,每个case都是项目独立的,上一个case返回的值是不能使用到下一个case的,但是实际中接口之间的关系是紧密相连的,这个时候我们怎 ...

  4. STM32 BOR/POR/PDR介绍

    以STM32为例,介绍单片机中的BOR/POR/PDR1)PVD = Programmable Votage Detector 可编程电压监测器 它的作用是监视供电电压,在供电电压下降到给定的阀值以下 ...

  5. Vue01

    1.vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: 中文:https ...

  6. Django学习笔记之视图高级-CSV文件生成

    生成CSV文件 有时候我们做的网站,需要将一些数据,生成有一个CSV文件给浏览器,并且是作为附件的形式下载下来.以下将讲解如何生成CSV文件. 生成小的CSV文件 这里将用一个生成小的CSV文件为例. ...

  7. A*搜索详解(2)——再战觐天宝匣

    书接上文.在坦克寻径的,tank_way中,A*算法每一步搜索都是选择F值最小的节点,步步为营,使得寻径的结果是最优解.在这个过程中,查找最小F值的算法复杂度是O(n),这对于小地图没什么问题,但是对 ...

  8. 注册Docker Hub、以及Push(九)

      一.注册   1.使用浏览器打开官网的时候,发现注册按钮点不了       2.下载google访问助手,添加到浏览器         下载地址:http://www.ggfwzs.com/,根据 ...

  9. Dubbo和Spring Cloud

    1.Dubbo和Spring Cloud区别 1).通信方式不同 Dubbo使用RPC通信,Spring Cloud使用Http RestFul方式 2) 组成部分不同 组件 Dubbo Spring ...

  10. C#中使用EntityFramework(EF)生成实体进行存储过程的调用

    在EF中使用定义对象模型的方式调用一个存储过程,这个存储过程返回的是一组包含两列的值.(ProjectName,Count) 下面是存储过程: CREATE procedure [dbo].[Pro_ ...