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. python 中面向对象编程简单总结3--定制类

    声明:资源来自慕课网python学习课程,以下只是个人学习总结,仅供参考 1.Python类的特殊方法 特征:以  __ 开头并结尾的方法,比如用于print的__str__() , __getatt ...

  2. VWAP算法（成交量加权平均价）

    算法交易其实主要是用在基金公司.券商量化比较多.例如我已经选好股,要大量买入,但是单凭交易员的操作海量单而且要完成买入100万股这些的操作是有点的困难的.那么这时候怎样解决拆单,防止冲击成本的问题呢? ...

  3. javascript总结24:Array常用的队列操作和排序方法

    1 数组-引用类型 JavaScript中的内置对象 复习数组的使用 两种创建数组的方式 Array对象的属性 length 获取数组的长度(元素个数) 2 常用方法 : 检测数组 instanceo ...

  4. Firefox 43无法安装xpi的问题

    Firefox 43无法安装xpi的问题 说明:Firefox 42将默认禁止安装未签名扩展   强制禁用这个首选项(高级用户): 你可以在 Firefox 配置编辑页面 (about:config ...

  5. ASP.NET MVC WebApi接口授权验证

    对于很任何多开发者来说,不管是使用任何一种框架,或者是使用任何一种语言,都要使用面向接口编程.使用面向接口编程的时候,那么就会有很多的权限验证,用户验证等等. 特别是对于一些系统来说,别人想要对接你的 ...

  6. Android Lint——内嵌于Android Studio的代码优化工具

    Android Lint工具是Android Studio 自带的静态代码工模具,Android Lint是专门针对Android 定制的检查规则,因此可以检查出很多Android特有的代码缺陷.建议 ...

  7. 编写高质量代码改善C#程序的157个建议——建议117：使用SSL确保通信中的数据安全

    建议117:使用SSL确保通信中的数据安全 SSL(Secure Socket Layer)最初是由NetScape公司设计的,用于Web安全的网络协议.目前它已经广泛应用到各类网络传输通信中了.SS ...

  8. 关于Markdown格式转PDF格式

    Markdown转PDF格式 个人使用的Markdown编辑平台:有道云笔记网页版 当我们编辑好自己的随笔以后,在网页的[客户端下载]下面有一个[更多]的圆形图标选项,点击后在菜单中有一处[打印]选项 ...

  9. IT技术公众号推荐

    获取二维码方法:http://open.weixin.qq.com/qr/code/?username=公众账号,例如:cjscwe_2015   目录 全栈 编程语言 前端开发 移动开发 数据库 操 ...

  10. Android-自定义RadioButton

    1.控件RadioButton需要用RadioGroup包裹起来,才能使用2.RadioButton必须设置ID才能实现单选功能3.RadioGroup有方向(垂直方向 和 水平方向)默认是垂直方向 ...