DOM是文档对象模型的简称，DOM的基本思想是把结构化文档解析成一系列的节点,由这些节点组成数装的DOM树，所有的这些节点和最终的树状结构都有统一的对外接口，达到使用编程语言操作文档的目的，DOM可以理解为XML文档、SVG文档、HTML文档的编程接口API。DOM不属于javascript但是可以通过javascript操作DOM。

节点的概念：

DOM的最小组成单位叫节点(node)，一个文档的树形结构(DOM树)，就是由各种不同的类型的节点组成。

对于HTML文档，节点主要有一下六种类型：

Document节点：文档节点，指整个文档(window.document)。

DocumentType:文档类型节点，指文档的类型，比如<!DOCTYPE html>

Element:元素节点，HTML元素，比如<body>、<p>。

Attribute：属性节点，HTML元素的属性，比如：class = “right”。

Text:文本节点，HTML文档中出现的文本。

DocumentFragment:文档碎片节点，文档的片段。

　　Node接口在javascript中是作为Node类型来实现的，除了IE所有浏览器都可以访问到这个类型，javascript中所有的节点类型都是继承自node类型，因此所有的节点类型都共享这相同的基本属性和方法。

节点的属性：

nodeType属性:返回节点的常数值　　

类型 　　　　　　　　　　　　　　　　              nodeName 　　　　　　              nodeType
DOCUMENT_NODE                                       #document                               9
ELEMENT_NODE                                          大写的HTML元素名                       1
ATTRIBUTE_NODE                                       等同于Attr.name                         2
TEXT_NODE                                                #text                                        3
DOCUMENT_FRAGMENT_NODE                      #document-fragment                 11
DOCUMENT_TYPE_NODE                               等同于DocumentType.name         10

　　

下列属性返回当前节点的相关节点

　　ownerDocument

　　返回当前节点所在的文档对象，即document对象

var  doc = nod.ownerDoctype;

doc === document              //true

　　nextSibling

　　返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null，注意，该属性包括文本节点，节点后有空格，返回文本节点，内容为空格。

　　previoussibling
　　返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。同样，前面有空格，返回一个内容为空的文本节点。

　　parentNode
　　返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：element节点、document节点和documentfragment节点。

　　parentElement
　　返回当前节点的父Element节点。如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。

下列属性返回当前内容
　　textContent
　　属性返回当前节点和它的所有后代节点的文本内容。

//<div id="divA">This is <span>some</span> text</div>

document.getElementById("divA").textContent           This is some text

　　该属性可读写，可自动对HTML标签转义。

document.getElementById('foo').textContent = '<p>GoodBye!</p>'

　　自动解释为文本<p>而不会当作标签处理，对于Text节点和Comment节点，该属性的值与nodeValue属性相同

　　nodeValue
　　返回或设置当前节点的值，格式为字符串。但是，该属性只对Text节点、Comment节点、XML文档的CDATA节点有效，其他类型的节点一律返回null。

下列返回当前节点的子节点
　　childNodes
　　返回一个NodeList集合，成员包括当前节点的所有子节点。除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。

　　如果当前节点不包括任何子节点，则返回一个空的NodeList集合。由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。

var ulElementChildNodes = document.querySelector('ul').childNodes;

　　firstNode
　　返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。注意，除了HTML元素子节点，该属性还包括文本节点和评论节点。

　　lastChild
　　返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。
　　baseURI
　　返回一个字符串，由当前网页的协议、域名和所在的目录组成，表示当前网页的绝对路径。如果无法取到这个值，则返回null。

　　该属性不仅document对象有（document.baseURI），元素节点也有（element.baseURI）。通常情况下，它们的值是相同的。

Node节点的方法

　　appendChild()
　　接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。如果参数节点是文档中现有的其他节点，appendChild方法会将其从原来的位置，移动到新位置。

var p = document.createElement("p");

document.body.appendChild(p);

　　hasChildNodes
　　方法返回一个布尔值，表示当前节点是否有子节点。
　　方法与节点操作有关

　　cloneNode()
　　cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。

　　insertBefore
　　方法用于将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。

　　该方法返回被插入的新节点。如果insertBefore方法的第二个参数为null，则新节点将插在当前节点的最后位置，即变成最后一个子节点。

　　removeChild
　　接受一个子节点作为参数，用于从当前节点移除该节点。它返回被移除的节点。

　　replaceChild
　　用于将一个新的节点，替换当前节点的某一个子节点。它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。

下面方法用于节点的互相比较。
　　contains
　　接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。

　　compareDocumentPosition
　　与contains方法完全一致，返回一个7个比特位的二进制值，表示参数节点与当前节点的关系。

二进制值 数值 含义
000000 0 两个节点相同
000001 1 两个节点不在同一个文档（即有一个节点不在当前文档）
000010 2 参数节点在当前节点的前面
000100 4 参数节点在当前节点的后面
001000 8 参数节点包含当前节点
010000 16 当前节点包含参数节点
100000 32 浏览器的私有用途

　　可以使用比特位运算符检查结果

　　isEqualNode
　　返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。

　　normailize
　　用于清理当前节点内部的所有Text节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。

javascript高级程序设计---DOM的更多相关文章

  1. 2020/6/11 JavaScript高级程序设计 DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口).他描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 10.1 节点层次 DOM将任何HTML和XML ...

  2. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  3. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  4. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

  5. javascript高级程序设计阅读笔记（一）

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

  6. 《JavaScript高级程序设计》学习笔记

    系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端 ...

  7. JavaScript高级程序设计（第三版）学习，第一次总结

    Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...

  8. JavaScript高级程序设计（第三版）学习笔记20、21、23章

    第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...

  9. 读书时间《JavaScript高级程序设计》一：基础篇

    第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...

随机推荐

  1. Beta版本——项目测试

    前端测试 一.测试用例(tutor_distribution_0001) 测试内容 获取下拉框的输入测试 测试代码 $("#sub-confirm").click(function ...

  2. 【Alpha阶段】第7.5次Scrum例会

    会议信息 时间:2016.10.31 21:30 时长:10min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.11.01 21:30 个人任务报告 姓名 今日已完成Is ...

  3. 修改MySQL的默认数据存储引擎

    因为MySQL默认的是MyISAM数据引擎,不支持事务也不支持外键,所以需要用到Innodb引擎,于是决定将mysql的默认引擎设置为innodb.1 . 查看MySQL存储引擎是用的哪个?登录MyS ...

  4. PS------“窗口” -> "扩展功能"使用方法

    http://forum.xitek.com/thread-1330039-1-1-1.html

  5. Win7 配置Apache+PHP+Mysql环境

    第一.安装并配置APACHE(安装到D:\phpapache\Apache2.2) 1.安装时默认安装,Network Domain, Server Name 我填写我的计算机名,Administra ...

  6. re正则表达式13_review of regex symbols

    Review of Regex Symbols This chapter covered a lot of notation, so here’s a quick review of what you ...

  7. Integer 与int 赋值比较

    测试代码: @Test public void IntegerTest() { Integer i01 = 59; int i02 = 59; Integer i03 = Integer.valueO ...

  8. Java数据结构——迭代器

  9. cookie和浏览器

    XHR API允许应用添加自定义的HTTP首部(通过setRequestHeader()方法),同时也有一些首部都是应用代码不能设定的. Accept-Charset.Accept-Encoding. ...

  10. System.BadImageFormatException : 未能加载文件或程序集“Medici.PaymentRecover, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项。试图加载格式不正确的程序。

    System.BadImageFormatException : 未能加载文件或程序集“xxxxx.xxxxx, Version=1.0.0.0, Culture=neutral, PublicKey ...