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. 《Linux菜鸟入门2》Ldap

    ldap网络帐号1.ldap是什么ldap目录服务认证,和windows活动目录类似,就是记录数据的一种方式 2.ldap客户端所需软件yum install sssd krb-workstation ...

  2. iOS - CALayer相关(CATransform3D)

    一.图层的几何 图层的几何简单通俗,图层的所有几何属性(包括矩阵变换),都可以有隐式和显式动画. 图层几何的属性: 1.position是CGPoint值,她指定图层相对于她图层的位置,该值基于父图层 ...

  3. LightOj1089(求点包含几个线段 + 线段树）

    题目链接 题意:n( n <= 50000 ) 个线段,q ( q <= 50000) 个点,问每个点在几个线段上 线段端点的和询问的点的值都很大,所以必须离散化 第一种解法:先把所有的线 ...

  4. sphinx ：undefined reference to `libiconv' 报错解决办法

    sphinx :undefined reference to `libiconv' 报错解决办法   2013-11-30 21:45:39 安装sphinx时不停报错...郁闷在make时报错,错误 ...

  5. 第4章 jQuery的事件和动画(1)——事件篇

    jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...

  6. Codeforces 719B Anatoly and Cockroaches(元素的交叉排列问题)

    题目链接:http://codeforces.com/problemset/problem/719/B 题目大意: 有一队蟑螂用字符串表示,有黑色 ‘b’ 和红色 'r' 两种颜色,你想使这队蟑螂颜色 ...

  7. yourphp 遇见问题及解决办法

    1.前台页面提交出现 __NOLAYOUT__ 解决把法: 在Public 文件下找到 success.html,error.html,exception.html 头部去掉就可以

  8. MBProgressHUD上传照片进度提示

    第一步,控制器先来个属性 @property (strong, nonatomic) MBProgressHUD *HUD; 第二步,显示与隐藏的调用方法 - (void)hudTipWillShow ...

  9. C语言中qsort函数用法

    C语言中qsort函数用法-示例分析    本文实例汇总介绍了C语言中qsort函数用法,包括针对各种数据类型参数的排序,非常具有实用价值非常具有实用价值. 分享给大家供大家参考.C语言中的qsort ...

  10. fastjson是阿里巴巴的开源JSON解析库

    fastjson的API十分简洁. String text = JSON.toJSONString(obj); //序列化 VO vo = JSON.parseObject("{...}&q ...