文档对象模型，简称DOM。是HTML页面结构给javascript提供的一个入口，它就像一个桥梁，连接两者的关系。通过DOM，JavaScript拥有访问并修改HTML的权限。

一、DOM模型：

　　首先我们来介绍一下这个模型，它是把HTML文档抽象成一棵“树”，“树”的分支有一个个节点(node)，对应HTML里面的元素。

　　DOM就像是族谱，元素与元素之间形成父子关系。

　　如 <head>与<body>是兄弟节点

　　<h1>是<body>的子节点

二、节点( node )的概念

　　HTML中的每一个标签、文本、属性 与 DOM树中的节点一一对应。节点是HTML在DOM中的表现

　　1.元素节点：对应HTML的标签

　　2.属性节点：对应HTML开始标签内的属性

　　3.文本节点：对应HTML标签中的文本内容部分

　　eg:<p title="hello">你好</p>

　　　　↑　　  ↑　　　　  ↑

　元素节点　　属性节点　文本节点

三、获取节点信息

　　有时候在JavaScript程序中获取元素节点后，需要对其信息进行判断。

　　1.obj.nodeName获取节点名称，返回 标签名、属性名或者#text ，分别对应 标签、属性、文本

　　2.obj.nodeType获取节点类型，返回 1、2、3，分别对应 标签节点、属性节点、文本节点

　　3.obj.nodeValue获取节点的值，返回 null、节点值、文本内容

四、获取文档节点(元素节点)

　　1.document.querySelector(),传入CSS选择器，返回符合条件的第一个元素

　　2.document.querySelectorAll(),传入CSS选择器，返回对象数组

　　以上为HTML5新增方法，低版本浏览器不支持

　  3.document.getElementById(),传入元素id值，返回对象

　   4.document.getElementByTagName()，传入标签名，返回对象数组

　　5.document.getElementByName()，传入元素name值，返回对象数组

五、获取属性节点

　　1.node.getAttribute(attr),传入属性名，返回属性值

　　2.node.setAttribute("attr","value"),传入需要设置的属性名和属性值

六、获取文本节点

　　1.node.innerHTML ,返回包含标签的文本内容

　　2.node.innertextContent , 返回纯文本内容

　　3.node.innerText ,返回纯文本内容

注：innerText并非W3C标准，只有chrome 和 IE 支持。

　　2 、 3都是获取文本节点，包括空格，换行符等空白文本节点，而IE对这些空白文本节点是忽略的。

About 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. windows 启用ipv6（for XX-net）补充“Ping请求找不到主机”问题

    ipv6.google.com 有点地方直接能启用,有的时候不行. 导致在xx - net 里无法启用ipv6 这样搞试试 netsh int ipv6 isatap set state enable ...

  2. RabbitMQ入门_04_Exchange & Binding

    如果你比较细心,你会发现 HelloWorld 例子中的 Sender 只申明了一个 hello 队列,然后就开始向默认 Exchange 发送路由键为 hello 的消息.按照之前 AMQP 基本概 ...

  3. 1.python+selenium利用cookie，跳过验证码直接登录

    方法1 在登录时,叫代码等待一段时间,然后手动输入验证码 # coding:utf-8 from selenium import webdriver import time url = 'http:/ ...

  4. yii新手在实例化models(controller调用models实化化)php warning错误

    新手在执照yii教程来的时候,config/main.php文件是全新写的,post提交的时候,会出错 include(LoginForm.php) [<a href='function.inc ...

  5. 表达谱(DGE)测序与转录组测序的差别

    DGE-seq和普通的transcriptomic profiling相比较有什么不同,有什么特点? DGE就是用酶将mRNA切断,只使用靠近poly A的一小段RNA去测序. #1 由于不是测定mR ...

  6. android--------Dagger2介绍与简单使用（一）

    1:Dagger2是啥 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护的然后现在把这堆东西扔给Google维护了. 一般的I ...

  7. AIM Tech Round 3 (Div. 1) (构造,树形dp,费用流,概率dp)

    B. Recover the String 大意: 求构造01字符串使得子序列00,01,10,11的个数恰好为$a_{00},a_{01},a_{10},a_{11}$ 挺简单的构造, 注意到可以通 ...

  8. php实现频率限制

    一.前言 公司要做呼叫中心,呼叫中心为了防止骚扰,需要限制用户拨打电话的频率,比如30s只能点击一次.这样的需求是通过redis来实现的. 二.具体实现 <?php class Resource ...

  9. P4173 残缺的字符串 fft

    题意:给你两个字符串,问你第一个在第二个中出现过多少次,并输出位置,匹配时是模糊匹配*可和任意一个字符匹配 题解:fft加速字符串匹配; 假设上面的串是s,s长度为m,下面的串是p,p长度为n,先考虑 ...

  10. JavaScript语言简介

    Web程序不论是B/S还是C/S构架,分为客户端程序与服务器端程序两种. ASP.NET是开发服务器端程序的强大工具,但有时为了降低服务器负担与通信流量,这就需要编写能够在客户端执行的程序. 脚本语言 ...