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. POJ3928 Pingpong（统计比 K 小的个数 + 树状数组）

    Ping pong Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2691   Accepted: 996 Descript ...

  2. 今天接触枚举类型,感觉是C里面应该才有的东西

    遍历枚类型的方法: public static EActChannel getEnumByCode(int code) { for (EActChannel enm : EActChannel.val ...

  3. vm centos 添加网卡 无配置文件

    vm centos 添加网卡 无配置文件 解决办法 [root@test ~]# ifconfig eth0 Link encap:Ethernet HWaddr 00:0C:29:C8:41:FB ...

  4. StringBuffer类

    String的内容一旦声明则不可改变,如果改变,则改变的肯定是String的引用地址. 如果一个字符串要被经常改变,则就必须使用StringBuffer类. 在String类中可以通过“+”进行字符串 ...

  5. Servlet之Filter详解

    参考文献:http://www.cnblogs.com/zlbx/p/4888312.html Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时 ...

  6. NGINX 配置404错误页面转向

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是 ...

  7. Which hashing algorithm is best for uniqueness and speed?

    http://programmers.stackexchange.com/questions/49550/which-hashing-algorithm-is-best-for-uniqueness- ...

  8. LeetCode —— Invert Binary Tree

    struct TreeNode* invertTree(struct TreeNode* root) { if ( NULL == root ) { return NULL; } if ( NULL ...

  9. Django开发web环境搭建的简单方法（CentOS6.5环境）

    这几天跟Linux下的Python + Django环境搭建卯上了.经过几天的琢磨,找到了一条自己认为给力的路径. 这里给出命令行,过程如下: 首次登陆,切换管理员: [web@bogon ~]$ s ...

  10. MVC下分页的自定义分页一种实现

    1.引言 在MVC开发中我们经常会对数据进行分页的展示.通过分页我们可以从服务端获取指定的数据来进行展示.这样既节约了数据库查询的时间也节约了网络传输的数据量.在MVC开发中使用的比较多的应该是MVC ...