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. springMVC的注解@RequestParam与@PathVariable的区别

    1.在SpringMVC后台控制层获取参数的方式主要有两种, 一种是request.getParameter("name"),另外一种是用注解@RequestParam直接获取. ...

  2. BZOJ3159: 决战

    方法很简单,树剖,把区间提取出来,打翻转标记,再放回去. 注意:由于某种原因,我写的是把题目中的r忽略掉的一般情况,否则简单得多. 本来以为写起来也很简单T_T #include<bits/st ...

  3. 【原】使用webpack打包的后，公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  4. Div内有ul li元素，Div设置高度100%，谷歌IE下li过多会显示滚动条，而火狐下就会滚动条就不起作用，li会撑大Div

    产品上也许是用了过多iframe问题,自己做了demo没有这种情况 解决办法: 设置Div的display样式为-moz-inline-grid -moz-代表火狐私有属性,使用自己的div样式就可以 ...

  5. JavaScript格式化日期

    查找格式化日期的方法大都是写日期扩展方法,也许是为了维持jquery easyUI 源码完整性, // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h ...

  6. VM安装linux

      看图简单流程即可.注意磁盘空间至少30G,实用oracle数据库时需要更大,可以后期增加.   静待安装完成即可.一定记得创建的用户名及密码,及root用户的密码.

  7. HDFS的Java操作

    实验环境: Windows 10 Eclipse Mars.2 Release (4.5.2) CentOS 7 Hadoop-2.7.3 先决条件: 1) Windows上各环境变量已配置OK.   ...

  8. Clion cmake 一个简单的 C++ 程序

    CMakeLists.txt cmake_minimum_required(VERSION 3.5) project(dll) set(CMAKE_CXX_FLAGS "${CMAKE_CX ...

  9. apk支持html video控制 ，是播放状态就暂停，暂停状态就播放

    apk支持html video控制 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...

  10. python 函数基础介绍

    函数是对程序逻辑进行结构化或过程化的一种编程方法.能将整块代码巧妙地隔离成易于管理的小块,把重复代码放在函数中而不是进行大量的拷贝. 一.函数创建 def 函数创建格式如下: def function ...