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. js闭包原理与例子[转]

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.闭包原理: 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域 ...

  2. 开源项目spring-shiro-training思维导图

    写在前面 终于完成了一个开源项目的思维导图解读.选spring-shiro-training这个项目解读是因为它开源,然后涉及到了很多我们常用的技术,如缓存,权限,任务调度,ssm框架,Druid监控 ...

  3. jdk1.7 环境变量配置

    Windows系统中设置环境变量如下图右击“我的电脑”,选择“属性”. 点击“高级”选项卡,选择“环境变量”.  在“系统环境变量”中设置上面提到的3个环境变量,如果变量已经存在就选择“编辑”,否则选 ...

  4. MVC错误（一）

    目录规范后将相应的文件放到该放的地方后,应修改require_once();中的路径 调试php代码时先打开WampServer,再在浏览器中输入localhost/文件夹名/index.php

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

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

  6. HTTP Debugger Pro使用教程

    相关链接:HTTP Debugger Pro安装教程 1.设置过滤器,只监控指定地址的数据   选择仅显示匹配的记录   输入监控地址   控件传输的数据   服务器返回的数据

  7. 使用#include消除重复代码

    消除重复代码代码很多种,比如: 1)提炼成函数复用 2)使用宏 3)继承 4)使用闭包(boost::bind.boost::function) 上述是最为常用的,对于C++程序,闭包可能用得相对少一 ...

  8. Swift & Objc 在同一个项目中的使用

    在WWDC大会中发布了Swift让人眼前一亮.终于加了很多的现代编程语言该有的东西.很早年以前玩C#3.0+的时候这些差不多类似的 已经用的烂熟的东西终于一点一点的在看Swift Programmin ...

  9. javascript事件坐标

    clientX 鼠标在页面显示区域的坐标 screenX鼠标在显示屏幕上的坐标 layerX 鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从bo ...

  10. scala文件流操作，生成sparkpv，uv作业文件

    package com.bjsxt.scalaspark.core.examples.pvAnduv import java.io.Fileimport java.text.SimpleDateFor ...