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. 屠蛟之路_重伤的屠蛟俊_ThirdDay

    在屠蛟少年们重登数据库大山的途中,少年屠蛟俊(511)实力扛把子,一直坚持在队伍前头开路引领.披荆斩棘,却也因为一路与险水恶林.狂禽猛兽做战斗而精力受损,最终一不小心坠进beta怪蛟设置的陷阱深洞里, ...

  2. java语言：Linux与JVM的内存关系分

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m.从表面上,物理内存应该 ...

  3. HDU 4280Island Transport（Dinc非STL 模板）

    题意: n岛m条路,然后是 n个岛的坐标,然后是m条双向路,包括 岛和 岛 之间 最大客流量,让求 最左边的岛 到右边的岛 最大客流量 分析: 建图 以 左边的岛为原点,最右边的为终点求最大客流量. ...

  4. POJ 2942Knights of the Round Table(二分图判定+双连通分量)

    题目链接 题意:一些骑士,他们有些人之间有矛盾,现在要求选出一些骑士围成一圈,圈要满足如下条件:1.人数大于1.2.总人数为奇数.3.有仇恨的骑士不能挨着坐.问有几个骑士不能和任何人形成任何的圆圈. ...

  5. Rsync

    转自:http://www.mike.org.cn/blog/index.php?load=read&id=639###pp=0 [rsync实现网站的备份,文件的同步,不同系统的文件的同步, ...

  6. audio patch(10.9.3) [2.6.1]

    ; Basic Block Input Regs: rax -  Killed Regs: <nothing>0000000000048353 3D8419D411             ...

  7. SVN cleanup操作反复失败解决办法

    今天在更新项目的时候遇到一个问题,按惯例要cleanup才能重新更新.但是很不幸,在cleanup的时候又遇到了问题! 1    svn cleanup failed–previous operati ...

  8. PHP_$_SERVER_说明详解

    PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行 脚本的文件名,与 document roo ...

  9. CSS3自适配手机屏幕

    @media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...

  10. QT 的下载地址

    http://blog.csdn.net/friendan/article/details/44873347