DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

　　1，节点层次

　　　　DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。每个节点都有自己的特点、数据和方法，也与其他的节点存在某种关系。构成了层次。

　　　　<html>元素为文档元素。是文档的最外层元素。每一段标记都可以通过一个节点来表示。HTML元素通过元素点表示，特性通过特性点来表示。文档类型通过文档类型节点来表示。注释通过注释节点来表示。共有12种节点类型，这些类型都继承自一个基类型。

　　　　1，Node类型

　　　　　　每个节点都有一个nodeType属性。用于表明节点的类型。要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。

　　　　　　每个节点都有一个childNodes属性，其中保存着NodeList对象。可以通过方括号，也可以使用item（） 来访问Nodelist中的节点。

　　　　　　每个节点都有一个parentNode属性，指向父节点。 都有previousSibling 和nextSibling

　　　　　　父节点的firstChild和lastChild分别指向其childNodes的第一个和最后一个节点。

　　　　　　因为节点的关系指针都是只读的，所以DOM提供了操作节点的方法。

　　　　　　appendChild（） ： 向childNodes列表的末尾添加一个节点。返回新增的这个节点。如果已经有了这个节点， 那么就将该节点从原来的位置转移到最后的位置。

　　　　　　insertBefore（） ： 将节点插入到节点列表指定的位置。接收两个参数，被插入的节点和作为参照的节点， 被插入的节点将会变成参照节点的前一个同胞节点。

　　　　　　replaceChild（） ： 替换节点。接收两个参数，要插入的节点和要替换的节点。 返回要替换的节点。

　　　　　　removeChild（） ： 移除节点。 返回值为那个被移除的节点。

　　　　　　cloneNode（） ：  复制节点。  参数为 true的时候执行深复制，为false则执行浅复制。这个方法只复制特性，不会复制节点中的js属性。

　　　　2，Document类型

　　　　　　js通过document类型表示文档。document对象是HTMLDocument的一个实例。

　　　　　　Document节点有以下的特性： nodeType为9，nodeName为‘#document’

　　　　　　document.documentElement指向html元素，document.body指向body元素。

　　　　　　document.title ：  获取或修改文档的标题。

　　　　　　document.URL:  获取完成的URL

　　　　　　document.domain： 获取域名

　　　　　　document.referrer ： 获取来源页面的URL

　　　　　　document.getElementById()  :

　　　　　　document.getElementByTageName ： 获取到HTMLCollection对象，这个对象有一个方法namedItem（），可以通过元素的name特性取得集合中的项。

　　　　　　document.getElementByName（） ： 获得所有有name特性的元素。

　　　　　　特殊集合：

　　　　　　document.forms： 取得文档中所有form元素。

　　　　　　document.images ： 取得所有的img元素。

　　　　　　document.links  ：  取得所有带href特性的a元素

　　　　　　document.write（）： 页面写入内容

　　　　3，Element类型

　　　　　　element类型为xml或者html的元素。提供了对元素的标签名，子节点和特性的访问。

　　　　　　特性：nodeType为1， nodeName的值为元素的标签名。 parentNode可能为Document或者Element

　　　　　　标准属性： id、 title 、 lang（元素内容的语言代码，很少使用）、dir（值为ltr或rtl）、className

　　　　　　取得特性： getAttribute（）    有两类特殊的特性，通过getAttribute返回的值并不相同。第一个就是style，返回的是style的字符串。 第二个就是onlick这样的事件处理程序，返回的也是相应代码的字符串。基于这些，一般只有在取得自定义特性值的时候，才使用getAttribute的方法。

　　　　　　　　 setAttribute（） ：参数为 要设置的特性名 和值

　　　　　　　　 removeAttribute（）： 删除元素的特性。

　　　　　　attributes属性

　　　　　　创建元素

　　　　　　　　document.createElement()可以创建新元素，参数为要创建元素的标签名。

　　　　　　元素的子节点

　　　　　　元素的childNodes属性中包含了它的所有的子节点

　　　　4，Text类型

　　　　　　文本节点由Text类型表示，包含的可以是纯文本内容。

　　　　　　特性： nodeType为3， nodeName为‘#text’， nodeValue为节点所包含的文本。 不支持子节点

　　　　　　创建文本节点

　　　　　　　　document.createTextNode()创建新文本节点。参数为要插入的文本。

　　　　　　规范化文本节点

　　　　　　　　normalize（）可以将一个包含多个文本节点的父元素的所有文本节点合并成一个节点。

　　　　　　　　splitText（） ： 按照指定的位置分割ndoeValue

　　　　5，Comment类型

　　　　　　注释类型，特性为： nodeType为8，nodeName为‘#comment’，nodeValue为注释内容

　　　　6，DocumentFragment类型

　　　　　　文档片段在文档中是没有对应的标记的。不过可以包含和控制节点。

　　　　　　document.createDocumentFragment()

　　　　7，Attr类型

　　　　　　元素的特性就是Attr类型来表示。

　　　　　　特征为： nodeType为2，nodeName为特性的名称，nodeValue为特性的值

　　2，DOM操作技术

　　　　1，动态脚本

　　　　　　var  script = document.createElement('srcipt'); script.type = 'text/javascript'; script.scr='index.js'; document.body.appendChild(script);

　　　　2，动态样式

　　　　　　<link>包含来自外部的文件，<style>元素则指定嵌入的样式。

　　　　3，操作表格

　　　　　　为了方便操作table，为table  tbody和tr添加了一些属性和方法

　　　　4，使用NodeList

　　　　　　NodeList是在访问DOM文档时实时运行的查询。

DOM扩展

　　1，选择符API

　　　　1，querySelector（）   querySelectorAll（）

　　2，元素遍历

　　3，HTML5

　　　　1，类相关的扩展

　　　　　　getElementByClassName

　　　　　　classList属性

　　　　　　　　操作类名的方式，

　　　　　　　　add（）： 将给定的类名字符串添加到列表中

　　　　　　　　contains（） ： 列表中是否存在给定的值

　　　　　　　　remove（value） ： 删除给定字符串

　　　　　　　　toggle（value） ： 如果列表中有就删除，没有就添加

　　　　2，焦点管理

　　　　　　document.activeElement（），获取DOM当前获得焦点的元素。

　　　　　　document.hasFocus() ， 确定文档是否获得了焦点

　　　　3，HTMLDocument的变化

　　　　　　readyState属性： 有两个值 loading和complete

　　　　　　兼容模式

　　　　　　head属性： document.head

　　　　4，字符集属性

　　　　　　charset属性：  document.charset  =  'UTF-8'

　　　　5，自定义数据属性

　　　　　　元素可以添加非标准的属性，但是要添加data-，添加了自定义属性后，就可以通过元素的dataset属性来访问自定义属性的值，

　　　　6，插入标记

　　　　　　innerHTML属性

　　　　　　outerHTML属性

　　　　　　insertAdjacentHTML（） 方法

　　　　7，scrollIntoView（）

　　　　　　可以在所有的HTML元素上调用，如果给这个方法传入true，或者不传参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false，则调用元素尽可能全部出现在视口中。

　　4，专有扩展

　　　　1，文档模式

　　　　2，children属性

　　　　　　只包含元素中同样还是元素的子节点，其他的和childNodes一样。

　　　　3，contains（）

　　　　　　判断某个节点是不是另一个节点的后代

　　　　4，插入文本

　　　　　　innerText

　　　　　　outerText

　　　　5，滚动

　　　　　　scrollIntoViewIfNeeded（alignCenter）  ：  只在当前元素在视口中不可见的时候，才滚动浏览器窗口或者容器元素，最终让其可见。参数为true的话，则表示尽量将元素显示在视口中部（垂直方向）

　　　　　　scrollByLines（lineCount）： 将元素的内容滚动指定的行高

　　　　　　scrollByPages（pageCount） ： 将元素的内容滚动指定的页面高度。

　　样式 ：

　　　　在html中定义样式的方式有3种：<link>元素引用外部样式表文件。 使用<style>元素定义嵌入式样式。以及使用style特性定义针对特定元素的样式。

　　　　访问元素的样式：

　　　　　　el.style.属性名： 获取style特性中指定的样式。

　　　　计算的样式：

　　　　　　getComputedStyle() ，参数为要计算样式的元素 和一个 为伪元素字符串。返回值为一个CSSStyleDeclaration对象，包含当前元素的所有计算的样式。

　　元素大小：

　　　　1，偏移量

　　　　　　offsetHeight： 元素在垂直方向占用的空间大小，包括元素高度，水平滚动条的高度，边框高度

　　　　　　offsetWidth： 元素在水平方向上占用的空间大小，包括元素高度，垂直滚动条的宽度，边框宽度。

　　　　　　offsetLeft ： 元素左外边框 到 包含元素的左内边框之间的距离     这里的包含元素指的是含有定位的祖先元素。

　　　　　　offsetTop： 上外边框 到包含元素上内边框之间的距离

　　　　2，客户区大小

　　　　　　clientWidth：元素宽度加上左右内边距

　　　　　　clientHeight： 元素 高度加上左右内边距

　　　　3，滚动大小

　　　　　　scrollHeight：元素内容的总高度

　　　　　　scrollWidth： 元素内容的总宽度

　　　　　　scrollTop：  y轴滚动的距离

　　　　　　scrollLeft： x轴滚动的距离

　　　　4，确定元素大小

　　　　　　getBoundingClientRect（） ：返回值为一个矩形对象：包含left top right bottom

js高级程序设计 笔记 --- DOM的更多相关文章

  1. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  2. JS高级程序设计--笔记

    1.JS分三个部分:ECMAScript.DOM.BOM       1)ECMAScript:提供核心语言功能       2)DOM:提供访问和操作网页内容的方法和接口       3)BOM:提 ...

  3. js高级程序设计 笔记 --- 错误处理、json和ajax

    1,错误处理 1,try-catch语句 try{可能导致错误的代码} catch(error) {在错误发生时该怎么处理} error.message是所有浏览器都支持的属性. finally语句是 ...

  4. js高级程序设计 笔记 --- 表单

    一,基础知识 在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见): action:接收请求的URL ...

  5. JS高级程序设计 笔记

    1.instanceof 可以判断实例是否在某个对象的原型上: function A() { this.a = "a"; } function B() { this.b = &qu ...

  6. js高级程序设计 笔记 --- 面向对象的程序设计

    1,理解对象 通过对象字面量的方式,创建一个对象,为它添加属性和方法: var obj = { a: 1, b:2, sayA(){ console.log(this.a)}} 1,属性类型: 数据属 ...

  7. js高级程序设计 笔记 --- 引用类型

    一,变量和作用域 1, js变量可以保存两种类型,基本类型.引用类型和symbol类型,基本类型有5种:undefined.null.boolean.number.string,它们都有以下的特征 基 ...

  8. JS高级程序设计笔记一

    /*设置自定义属性*/ var div=document.querySelector("#div1"); div.setAttribute("title",&q ...

  9. 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

    读书笔记 - js高级程序设计 - 第十三章 事件   canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好   有时候即使浏览器支持,操作系统如果缺缺 ...

随机推荐

  1. Oracle 用户验证日志

    1.sysdba/sysoper 权限用户验证日志;2.非sysdba/sysoper 权限用户验证日志;3.关于sqlcode; 1.sysdba/sysoper 权限用户验证日志:在数据库设置了参 ...

  2. 二项分布&超几何分布

    伯努利分布  在一次试验中,事件A出现的概率为p,不出现的概率为q=1-p.若以β记事件A出现的次数,则β仅取0,1两值,相应的概率分布为: 二项分布是指在只有两个结果的n次独立的伯努利试验中,所期望 ...

  3. mysql-day01

    Microsoft Windows [版本 10.0.17134.648](c) 2018 Microsoft Corporation.保留所有权利. C:\Users\lijun>java用法 ...

  4. 【转载】实战mysql分区(PARTITION)

    转载地址:http://lobert.iteye.com/blog/1955841 前些天拿到一个表,将近有4000w数据,没有任何索引,主键.(建这表的绝对是个人才) 这是一个日志表,记录了游戏中物 ...

  5. HBASE--MapReduce

    1.查看 HBase 的 MapReduce 任务的执行 $ bin/hbase mapredcp 2.执行环境变量的导入 $ export HBASE_HOME= ~/hadoop_home/hba ...

  6. MFC多线程详细讲解（转）

    一.问题的提出 编写一个耗时的单线程程序: 新建一个基于对话框的应用程序SingleThread,在主对话框IDD_SINGLETHREAD_DIALOG添加一个按钮,ID为IDC_SLEEP_SIX ...

  7. [原创] 改善 Firemonkey Canvas 几何绘图质量问题（移动平台）

    说明: Fiiremonkey 的跨平台能力,大家有目共睹(一码同介面跨四平台),唯独移动平台在几何绘图方面,质量始终不尽人意,我也曾试着去修正(如:修正曲线平滑问题),也曾找过第三方案(如:AggP ...

  8. CentOS 下 zookeeper 安装

     搭建zookeeper需要几个条件 a. 配置Java环境  c. centos d. 下载 xshell5 (下载它只是为了更方便的使用linux)     一.新建一个myapp目录: 二.下载 ...

  9. Nexys4 DDR MIG控制器引脚文件

    目前网上只有ucf文件,vivado不兼容ucf格式 使用c++字符串转换的xdc格式代码 set_property -dict { PACKAGE_PIN R7 IOSTANDARD SSTL18_ ...

  10. 神器与经典--sp_helpIndex

    ======================================================= 每每和那些NB的人学习技术的时候,往往都佩服他们对各个知识点都熟捻于心,更佩服的是可以在 ...