8. WebAPI文档对象模型之DOM基础
WebAPI文档对象模型之DOM基础
GL
0 • 97

DOM简介

DOM(Document Object Model,文档对象模型)将XML/HTML文档构造成一个层次化的节点树,并提供了一系列的应用程序编程接口,以允许程序或脚本动态的访问和修改文档的内容、结构和样式。

内容结构

DOM由W3C进行了标准化,W3C DOM标准中立于平台和语言,分为以下3个部分：

  1. 核心DOM：针对结构化文档的标准模型
  2. XML DOM： 针对XML文档的标注模型
  3. HTML DOM：针对HTML文档的标准模型

标准化历史

DOM标准化的历史如下:

  • 规范化前版本  由各个浏览器自行实现,这个阶段的DOM经常被称为DHTML(Dynamic HTML,动态HTML)
  • DOM级别1规范  发布于1998年10月1日,专注于HTML和XML文档模型
  • DOM级别2规范  发布于2000年11月13日,对DOM级别1添加了样式表对象模型和事件处理模型
  • DOM级别3规范  从2004年开始陆续发布,对DOM级别2作了系列扩展

核心DOM

核心DOM定义了一个通用性的,以节点为基础的结构化文档模型,DOM文档模型中的所有内容都是节点,整个文档是一个文档根节点。

基本属性

节点的基本属性如下:

  • nodeType  获取节点的类型。例如 1代表元素节点,2代表属性节点,3代表文本节点,通常这三类节点使用的最为普遍.
  • nodeName  获取节点的名称。如果节点是元素节点，则 nodeName属性返回标签名;如果节点是属性节点，则nodeName属性返回属性的名称;其他节点类型,nodeName属性将返回不同节点类型的不同名称。
  • nodeValue  设置或返回节点的值。如果节点是元素节点或文档节点，nodeValue属性值为null;如果节点是属性节点，nodeValue代表属性的值;如果节点是文本节点，nodeValue代表节点的内容;如果节点是注释节点，nodeValue代表注释的内容

节点类型

核心DOM规范中定义了以下节点类型:

类型说明Type值子节点
Document(文档节点)表示整个文档(DOM树的根节点)9Element(max.one) ProcessingInstruction Comment DocumentType
Element(元素节点)表示标签元素1Text ProcessingInstruction Comment CDATASection EntityReference
Attribute(属性节点)表示元素的属性2Text EntityReference
Text(文本节点)表示元素或属性中的文本内容3无
CDATASection(CDATA区段节点)表示文档中的 CDATA 区段4无
DocumentFragment(文档片段节点)表示轻量级的Document 对象11Text ProcessingInstruction Comment CDATASection EntityReference
Comment(注释节点)表示注释8无

其他还有几个，但一般不太用到，在此暂不列出。

节点层次

节点树中的节点彼此拥有层级关系:父节点(parent),子节点(child)和同胞节点(sibling)等。父节点拥有子节点,同级的子节点被称为同胞节点。 另外一部分节点如元素节点拥有属性节点. DOM规范为节点提供了以下诸多属性,以用于获取节点的层次关联信息。

属性说明
childNodes获取当前节点的所有子节点(※1)
firstChild获取当前节点的第一个子节点(※1)
lastChild获取当前节点的最后一个子节点(※1)
ownerDocument获取该节点的文档根节点，相当与document
parentNode获取当前节点的父节点
previousSibling获取当前节点的前一个同级节点
nextSibling获取当前节点的后一个同级节点
attributes获取当前元素节点的所有属性节点集合(※2)
  • ※1 部分类型的节点如文本节点等没有子节点.
  • ※2 仅部分类型的节点如元素节点拥有属性

创建节点

方法说明
document.write()这个方法可以把任意字符串插入到文档中
document.createElement()创建一个元素节点
node.appendChild()将新节点追加到子节点列表的末尾
document.createTextNode()创建一个文本节点
node.insertBefore()将新节点插入在前面
node.replaceChild()将新节点替换旧节点
node.cloneNode()复制节点
node.removeChild()移除节点

HTML DOM

HTML DOM定义了一个HTML文档的文档对象模型。

HTML文档首先是一个XML文档,为简单起见,XML DOM部分也包含在HTML DOM里一并说明。

HTML文档的主要构成元素是各类HTML标签,HTML文档中的标签对应着元素节点。

元素属性

HTML元素的属性有attribute与property两个概念，这两个通常都被翻译成属性，但含义完全不一样。

  • attribute是HTML标签属性，设计期在文档中直接记述，运行期可以通过Node的接口方法getAttribute(name)和setAttribute(name,value)进行访问。attribute值只存在文字列类型。
  • 而property是JS对象属性，运行期象一般的JS对象访问一样直接元素进行操作。property值拥有各自不同的数据类型。

通常每个attribute都有一个同名的property，property可以看成是attribute的包装器，同时也对attribute值进行必要的类型转换。

HTML:
<input id="input1" type="checkbox" checked= "checked"/>
<input id="input2" type="checkbox" checked= "true"/>
JavaScript:
console.log(document.getElementById("input1").getAttribute("checked")); // checked
console.log(document.getElementById("input1").checked); // true
console.log(document.getElementById("input2").getAttribute("checked"); // true

元素事件

事件阶段(Event Phases)

当一个DOM事件被触发的时候，它并不只是在它的起源对象上触发一次，而是会经历以下三个不同的阶段:

  1. 捕获阶段  事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。
  2. 目标阶段  捕获阶段结束,即当事件到达目标节点后，事件就进入了目标阶段,事件在目标节点上被触发。
  3. 冒泡阶段  事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，直到到达最外层的根节点。

事件处理

TODO:待编辑

事件分类

TODO:待编辑

元素样式

TODO:待编辑

视口

TODO:待编辑

0 • 97
() 全部评论
所有回复 (0)

推荐总结

  • Web API 97 0 1 发布

    Blob 对象是包含有只读原始数据的类文件对象。Blob 对象中的数据并不一定得是JavaScript 中的原生形式。File 接口基于 Blob，继承了 Blob 的功能,并且扩展支持用户计算机上的本地文件。

    创建 Blob 对象的方法有几种，可以调用 Blob() 构造函数，还可以使用一个已有Blob对象上的 slice() 方法切出另一个 Blob 对象。想要从用户的文件里获取一个Blob对象，请参考File文档。

      Blob() 继承层次

    Object.prototype 　
        Function.prototype 
    　　Blob

    构造函数

    Blob(blobParts[, options])

    返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

    语法 var b1 = new new Boolean(value) 参数 value 可选的Boolean对象的初始值.。 属性列表 名称语法説明sizeBlob.sizeBlob 对象中所包含数据的大小（字节）。typeBlob.type一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。 方法列表 名称语法説明sliceBlob.slice([start[, end[, contentType]]])返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。 Blob.prototype 属性列表

    无相应成员。

    方法列表

    无相应成员。

    Blob实例 继承层次

    Object.prototype 　Blob.prototype 　　Blob 实例

    Blob构造函数用法举

    Blob() 构造函数 允许用其它对象创建一个 Blob 对象。比如，用字符串构建一个 blob：

    var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); 使用类型数组和 Blob 创建一个 URL var typedArray = GetTheTypedArraySomehow(); // 传入一个合适的MIME类型 var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 // 你可以像使用一个普通URL那样使用它，比如用在img.src上。 var url = URL.createObjectURL(blob); 从 Blob 中提取数据 var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob);
  • Web API 36 0 1 发布

    消息事件接口，这一章其实是对后续章节的一个总括介绍，因为后续章节，基本上都需要使用本章节所介绍的接口—MessageEvent。简而言之，无论是跨文档通信，通道通信，服务推送还是WebSocket都会用到MessageEvent，触发message事件的执行。

    MessageEvent源码 [Constructor(DOMString type, optional MessageEventInit eventInitDict), Exposed=(Window,Worker)] interface MessageEvent : Event { readonly attribute any data; readonly attribute USVString origin; readonly attribute DOMString lastEventId; readonly attribute MessageEventSource? source; readonly attribute FrozenArray<MessagePort> ports; void initMessageEvent(DOMString type, boolean bubbles, boolean cancelable, any data, USVString origin, DOMString lastEventId, MessageEventSource? source, sequence<MessagePort> ports); }; dictionary MessageEventInit : EventInit { any data = null; USVString origin = ""; DOMString lastEventId = ""; MessageEventSource? source = null; sequence<MessagePort> ports = []; }; typedef (WindowProxy or MessagePort or ServiceWorker) MessageEventSource; 说明 event.data：消息中的返回数据，包含任意字符串的数据，由原始脚本发送event.origin：包含原始文档、域名以及端口的字符串，一般用于跨文档通信和服务推送event.lastEventId：包含当前消息事件唯一标识符的字符串，一般用于服务推送event.source：原始文件窗口的引用，比如WindowProxy对象，一般用于跨文档通信event.ports：包含MessagePort对象发送消息的数组，一般用于跨文档通信和通道通信到 注意

    MessageEvent继承于DOM Event API且属性共享，但是，通信事件没有冒泡而且不能取消，同时也没有默认行为。

  • Web API 51 0 1 发布

    XMLHttpRequestEventTarget是一个描述事件处理程序的接口，你可以在一个用于处理XMLHttpRequest事件的对象中使用到该事件处理程序。

    XMLHttpRequestEventTarget() 继承层次

    Object.prototype
    　Function.prototype
    　　EventTarget
    　　　XMLHttpRequestEventTarget

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- XMLHttpRequestEventTarget.prototype 继承层次

    Object.prototype  　EventTarget.prototype  　　XMLHttpRequestEventTarget.prototype

    属性列表

    从其父级继承的属性请查阅: EventTarget。

    属性说明onabort当请求失败时调用该方法。onerror当请求发生错误时调用该方法onload当一个HTTP请求正确加载出内容后返回时调用。onloadstart当一个HTTP请求开始加载数据时调用。onprogress间歇调用该方法用来获取请求过程中的信息。ontimeout当时间超时时调用；只有通过设置XMLHttpRequest对象的timeout属性来发生超时时，这种情况才会发生。onloadend当内容加载完成，不管失败与否，都会调用该方法 方法列表

    从其父级继承的方法请查阅: EventTarget.

    语法说明 XMLHttpRequestEventTarget实例

    Object.prototype
      　EventTarget.prototype
      　　XMLHttpRequestEventTarget.prototype
    　　　XMLHttpRequestEventTarget 实例

    参考

    相关链接

    ObjectEventTarget

    外部链接

    XMLHttpRequestEventTarget API-MDN
  • Web API 91 0 1 发布

    使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象。

      FileReader() 继承层次

    Object.prototype 　Function.prototype  　　EventTarget  　　　FileReader

    构造函数 语法 new FileReader(); 参数 length  指定数组缓冲区的大小，以字节为单位返回值 一个实例化的拥有特定字节数的ArrayBuffer对象。它的每一个字节的值都是0。 属性列表 属性说明-- 方法列表 语法说明-- FileReader.prototype 继承层次

    Object.prototype  　EventTarget.prototype  　　FileReader.prototype

    属性列表

    从其父级继承的属性请查阅: EventTarget。

    属性说明error只读，在读取文件时发生的错误。readyState表明FileReader对象的当前状态. 值为State constants中的一个. 只读result读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读. 方法列表

    从其父级继承的方法请查阅: EventTarget.

    语法说明abort()中止该读取操作.在返回时,readyState属性的值为DONE.readAsArrayBuffer()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.readAsBinaryString()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.readAsDataURL()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.readAsText()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容. FileReader实例

    Object.prototype  　EventTarget.prototype  　　FileReader.prototype 　　　FileReader 实例

    参考

    相关链接

    ObjectEventTarget

    外部链接

    FileReader-MDN
  • Web API 82 0 1 发布

    对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

      File() 继承层次

    Object.prototype
     　Function.prototype
      　　Blob
      　　　File

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- File.prototype 继承层次

    Object.prototype  　Blob.prototype  　　File.prototype

    属性列表

    从其父级继承的属性请查阅: Blob。

    属性说明lastModifiedDate只读，jsval类型，当前File对象所引用文件最后修改时间。name只读，当前File对象所引用文件的文件名。size只读，当前File对象所引用文件的文件大小,单位为字节。type只读，当前File对象所引用文件的文件类型(MIME类型)。 方法列表

    从其父级继承的方法请查阅: Blob.

    语法说明-- File实例

    Object.prototype  　Blob.prototype  　　File.prototype 　　　File 实例

    参考

    相关链接

    ObjectBlob

    外部链接

    File-MDN
  • Web API 61 0 1 发布

    XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

    XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议.

      XMLHttpRequest() 继承层次

    Object.prototype
     　Function.prototype
      　　EventTarget
      　　　XMLHttpRequestEventTarget
      　　　　XMLHttpRequest

    构造函数 语法 new XMLHttpRequest(); 属性列表 属性说明-- 方法列表 语法说明-- XMLHttpRequest.prototype 继承层次

    Object.prototype  　EventTarget.prototype  　　XMLHttpRequestEventTarget.prototype  　　　XMLHttpRequest.prototype

    属性列表

    从其父级继承的属性请查阅: XMLHttpRequestEventTarget.prototype。

    属性说明onreadystatechange一个JavaScript函数对象，当readyState属性改变时会调用它。回调函数会在user interface线程中调用。readyState请求的状态response响应实体的类型由 responseType 来指定， 可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 “json”)， 或者是字符串。如果请求未完成或失败，则该值为 null。responseText此次请求的响应为文本，或是当请求未成功或还未发送时为 null。只读。responseType设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。responseXML本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为“document”，并且请求为异步的，则响应会被当做 text/html 流来解析。只读.status该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.statusText该请求的响应状态信息,包含一个状态码和原因短语 (例如 “200 OK”). 只读.upload可以在 upload 上添加一个事件监听来跟踪上传过程。withCredentials表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。 默认为 false。 方法列表

    从其父级继承的方法请查阅: XMLHttpRequestEventTarget.prototype.

    语法说明abort()如果请求已经被发送,则立刻中止请求.getAllResponseHeaders()返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回nullgetResponseHeader()返回指定的响应头的值, 如果响应头还没被接受,或该响应头不存在,则返回null.open()初始化一个请求. 该方法用于JavaScript代码中;如果是本地代码, 使用 openRequest()方法代替.overrideMimeType()重写由服务器返回的MIME type。这个可用于, 例如，强制把一个响应流当作“text/xml”来处理和解析,即使服务器没有指明数据是这个类型。注意，这个方法必须在send()之前被调用。send()发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.setRequestHeader()给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 open() 方法打开了一个url. XMLHttpRequest实例

    Object.prototype
      　EventTarget.prototype
      　　XMLHttpRequestEventTarget.prototype
      　　　XMLHttpRequest.prototype
    　　　　XMLHttpRequest 实例

    参考

    相关链接

    ObjectEventTarget

    外部链接

    XMLHttpRequest-MDN
  • Web API 54 0 1 发布

    Image() 继承层次

    Object.prototype 　Function.prototype  　　Image

    构造函数 语法 var image = new Image(200, 300); image.src = 'picture.jpg'; console.log(image); 参数 unsigned long width 无符号长整数的宽unsigned long height 无符号长整数的高 属性列表 方法列表 Image.prototype

    Object.prototype 　EventTarget.prototype 　　Node.prototype 　　　Element.prototype 　　　　HTMLElement.prototype 　　　　　HTMLImageElement.prototype 　　　　　　Image.prototype

    属性列表 语法说明-- 方法列表 语法说明-- Image实例

    Object.prototype 　EventTarget.prototype 　　Node.prototype 　　　Element.prototype 　　　　HTMLElement.prototype 　　　　　HTMLImageElement.prototype 　　　　　　Image.prototype 　　　　　　　Image实例

    参考

    相关页面

    HTMLImageElement <img> 元素

    外部链接 

    Image-MDN
  • Web API 59 0 1 发布

    Storage是一个简单的客户端数据库, 允许用户以键/值对的形式保存数据。

    它有一个相当简单的 api 来检索/写入到本地存储器中的数据。它可以存储多达10MB 的每个域的数据。与 cookie 不同, 存储的数据不包括在每个 http 请求中。

      继承层次

    Object.prototype
     　Function.prototype
      　　Storage

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明length获取storage中的个数 方法列表 语法说明-- Storage.prototype 继承层次

    Object.prototype 　Storage.prototype

    属性列表 属性说明-- 方法列表 语法说明setItem()将数据存储到storage中，以键和值作为参数。getItem()获取键值key对应的值removewItem()移除键值为key的数据key()获取storage中第n个元素对的键值clear()清除所有数据 Storage实例

    Object.prototype
      　Storage.prototype
      　　window.localStorage 
    　　window. sessionStorage 

    参考

    相关页面

    Object

    外部链接

    Storage-MDN

热门总结

  • HTML5 路 17052 0 1 发布

    本目录收录的是电子邮件相关的应用软件。


    定义

    电子邮件(Email)又称电子邮箱，简称电邮，是指一种由一寄件人将数字信息发送给一个人或多个人的信息交换方式，目的是达成发信人和收信人之间的信息交互。

    电子邮件系统是以存储与转发的模型为基础,邮件服务器接受、转发、提交及存储邮件。寄信人、收信人及他们的电脑都不用同时在线。寄信人和收信人只需在寄信或收信时简短的连接到邮件服务器即可。

    范围

    本目录收录的软件仅限于以电子邮件为主要功能(或之一)的应用软件。

    列表

    本目录收录了以下软件：

     RainLoop

    简单的、 现代的 & 快速、 基于 WEB 的电子邮件客户端。

    以下是 RainLoop 各相关链接及授权信息的介绍：

    官网(HP)
    https://www.rainloop.net/源代码(Source)
    https://github.com/RainLoop/rainloop-webmail授权(License)
    AGPL 3.0范例(Example)
    https://mail.rainloop.net/#/mailbox/INBOX

  • HTML5 路 16647 0 1 发布

    本目录收录的是即时通信相关的应用软件。

     定义

    即时通信(Instant Messaging,IM)是一种通过网络进行实时通信的系统，允许两人或多人使用网络即时的传递文字消息、文件、语音与视频交流。

    即时通信不同于电子邮件在于它的交谈是即时（实时）的。大部分的即时通信服务提供了状态信息的特性──显示联系人名单，联系人是否在在线与能否与联系人交谈等等。

    范围

    本目录收录的软件仅限于以即时通信为主要功能(或之一)的应用软件。

    列表

    本目录收录了以下软件：

    CandyConverse.jsKaiwaRocket.Chat

    Candy

    Candy是一个支持XMPP协议的多用户即时聊天客户端软件。

    以下是 Candy 各相关链接及授权信息的介绍：

    官网(HP)
    http://candy-chat.github.io/candy源代码(Source)
    https://github.com/candy-chat/candy授权(License)
    MIT范例(Example)

    Converse.js

    Converse.js是一个支持XMPP/JABB的多用户即时聊天客户端软件。

    以下是 Converse.js各相关链接及授权信息的介绍：

    官网(HP)
    http://conversejs.org源代码(Source)
    https://github.com/jcbrand/converse.js授权(License)
    MPL范例(Example)
    https://conversejs.org/demo/anonymous.html

    Kaiwa

    Kaiwa 是一个支持XMPP的即时聊天客户端软件。

    以下是 Kaiwa 各相关链接及授权信息的介绍：

    官网(HP)
    http://getkaiwa.com源代码(Source)
    https://github.com/digicoop/kaiwa授权(License)
    MPL范例(Example)

    Rocket.Chat

    WebChat平台。

    以下是 Rocket.Chat 各相关链接及授权信息的介绍：

    官网(HP)
    https://rocket.chat/源代码(Source)
    https://github.com/RocketChat/Rocket.Chat授权(License)
    MIT范例(Example)
    https://demo.rocket.chat/home

  • HTML5 路 16278 0 1 发布

    本目录收录的是流程图相关的应用软件。


    定义

    流程图(Flowchart Diagram)是表示算法、工作流或流程的一种框图表示，它以不同类型的框代表不同种类的步骤，每两个步骤之间则以箭头连接。

    流程图大致可以分为以下四种类型：

    文件流程图数据流程图系统流程图程序流程图范围

    本目录收录的软件仅限于以流程图实现为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    Diagramo

    Diagramo是一个流程图模型编辑工具

    以下是Diagramo各相关链接及授权信息的介绍：

    官网(HP)
    http://diagramo.com源代码(Source)
    https://github.com/ssshow16/diagramo授权(License)
    GPL范例(Example)
    http://diagramo.com/editor/editor.php

  • HTML5 路 13434 0 1 发布

    ERD

    本目录收录的是ERD模型相关的应用软件。

    定义

    ERD(Entity-relationship Diagram，实体关系图)是概念数据模型的高层描述所使用的数据模型或模式图。

    ERD由实体和实体之间的关系定义而成，实体（Entity）表示一个离散对象，可以被（粗略地）认为是名词，如人、交易等。关系(Relationship)描述了两个或更多实体相互如何关联，联系可以被（粗略地）认为是动词。

    范围

    本目录收录的软件仅限于以ERD模型实现为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    WWWSqlDesigner

    WWWSqlDesigner是一个ER图形工具，允许用户创建数据库设计，可以保存/加载并导出到SQL脚本。 支持各种数据库和语言，能够导入现有的数据库设计。

    以下是WWWSqlDesigner各相关链接及授权信息的介绍：

    官网(HP)
    https://github.com/ondras/wwwsqldesigner源代码(Source)
    https://github.com/ondras/wwwsqldesigner授权(License)
    BSD范例(Example)
    http://ondras.zarovi.cz/sql/demo/?keyword=default

  • PHP 峰 9403 0 1 发布

    Bootstrap3是一个高度可定制的基于Bootstrap的DokuWiki模板，具有响应性，适用于所有设备（移动设备，平板电脑，台式机等）。

    功能和特点HTML5和CSS3基于Bootstrap 3.xGlyphicons 和 FontAwesome图标AnchorJS支持可高度定制丰富的HTML和DokuWiki钩子侧边栏支持（左侧和右侧）主题切换器插件统合Bootstrap Wrapper PluginDiagram PluginDiscussion PluginEdittable PluginExplain PluginInlinetoc PluginLinkback PluginMove PluginOverlay PluginPublish PluginRack PluginTagging PluginTags PluginTranslation PluginUser Home-Page PluginWrap Plugin - TabsTplInc Plugin设定主题项目名项目说明值类型缺省值可选值bootstrapThemeBootstrap主题multichoicedefaultdefault
    optional
    custom
    bootswatchbootswatchTheme从Bootswatch.com选择主题multichoiceyeticerulean
    cosmo
    cyborg
    darkly
    flatly
    journal
    lumen
    paper
    readable
    sandstone
    simplex
    solar
    slate
    spacelab
    superhero
    united
    yeticustomTheme插入自定义主题的URLstringnullshowThemeSwitcher在导航栏中显示Bootswatch.com主题切换器onoff0hideInThemeSwitcher在主题切换器中隐藏主题multicheckboxnullcerulean
    cosmo
    cyborg
    darkly
    flatly
    journal
    lumen
    paper
    readable
    sandstone
    simplex
    solar
    slate
    spacelab
    superhero
    united
    yetithemeByNamespace按名字空间指定主题onoff0侧边栏项目名项目说明值类型缺省值sidebarPositionDokuWiki Sidebar position (left or right)multichoiceleftleft
    rightrightSidebarThe Right Sidebar page name, empty field disables the right sidebar.
    The Right Sidebar is displayed only when the default DokuWiki sidebar is enabled and is on the left position (see the sidebarPosition configuration). If do you want only the DokuWiki sidebar on right position, set the sidebarPosition configuration with right valuestringrightsidebarleftSidebarGridLeft sidebar grid classes col-{xs,sm,md,lg}-x (see Bootstrap Grids documentation)stringcol-sm-3 col-md-2rightSidebarGridRight sidebar grid classes col-{xs,sm,md,lg}-x (see Bootstrap Grids documentation)stringcol-sm-3 col-md-2sidebarOnNavbarDisplay the sidebar contents inside the navbar (useful on mobile/tablet devices)onoff0sidebarShowPageTitleDisplay Sidebar page titleonoff1导航栏项目名项目说明值类型缺省值inverseNavbarInverse navbaronoff0fixedTopNavbarFix navbar to toponoff0showTranslationDisplay translation toolbar (require Translation Plugin)onoff0showToolsDisplay Tools in navbarmultichoicealwaysnever
    logged
    alwaysshowHomePageLinkDisplay Home-Page link in navbaronoff0homePageURLUse custom URL for home-page linksstringnullshowUserHomeLinkDisplay User Home-Page link in navbaronoff1hideLoginLinkHide the login button in navbar. This option is useful in “read-only” DokuWiki installations (eg. blog, personal website)onoff0showEditBtnDisplay edit button in navbarmultichoicenevernever
    logged
    alwaysindividualToolsSplit the Tools in individual menu in navbaronoff0showIndividualToolEnable/Disable individual tool in navbarmulticheckboxsite,pageuser
    site
    pageshowSearchFormDisplay Search form in navbarmultichoicealwaysnever
    logged
    alwaysshowAdminMenuDisplay Administration menuonoff0useLegacyNavbarUse legacy and deprecated navbar.html hook (consider in the future to use the :navbar hook)onoff0showNavbarDisplay navbar hookmultichoicealwayslogged
    alwaysnavbarLabelsShow/Hide individual labelmulticheckboxlogin,registerlogin
    register
    admin
    tools
    user
    site
    page
    themes
    expand
    profileshowAddNewPageEnable the Add New Page plugin in navbar (require Add New Page Plugin)multichoicenevernever
    logged
    alwaysnotifyExtensionsUpdateNotify extensions update (for Admin users)onoff0Semantic项目名项目说明值类型缺省值semanticEnable semantic dataonoff1schemaOrgTypeSchema.org type (Article, NewsArticle, TechArticle, BlogPosting, Recipe)multichoiceArticleArticle
    NewsArticle
    TechArticle
    BlogPosting
    RecipeshowSemanticPopupDisplay a popup with an extract of the page when the user hover on wikilink (require Semantic Plugin)onoff0布局项目名项目说明值类型Default ValuefluidContainerEnable the fluid container (full-width of page)onoff0fluidContainerBtnDisplay a button in navbar to expand containeronoff0pageOnPanelEnable the panel around the pageonoff1tableFullWidthEnable 100% full table width (Bootstrap default)onoff1tableStyleTable stylemulticheckboxstriped,condensed,responsivestriped
    bordered
    hover
    condensed
    responsiveshowLandingPageEnable the landing page (without a sidebar and the panel around the page)onoff0landingPagesLanding page name (insert a regex)regex(intro)showPageToolsEnable the DokuWiki-style Page Toolsmultichoicealwaysnever
    logged
    alwaysshowPageIdDisplay the DokuWiki page name (pageId) on toponoff1showBadgesShow badge buttons (DokuWiki, Donate, etc)onoff1showLoginOnFooterDisplay a “little” login link on footer. This option is useful when hideLoginLink is ononoff0showWikiInfoDisplay DokuWiki name, logo and tagline on footeronoff1文章目录 项目名项目说明值类型缺省值tocAffixAffix the TOC during page scrollingonoff1tocCollapseSubSectionsCollapse all sub-sections in TOC to save spaceonoff1tocCollapseOnScrollCollapse TOC during page scrollingonoff1tocCollapsedCollapse TOC on every pagesonoff0tocLayoutTOC layoutmultichoicedefaultdefault
    navbarg钩子HTML钩子

    所有文件必须位于模板目录（lib / tpl / bootstrap3 /）或conf /目录中。

    文件名插入到页面HTML中的位置meta.html <head>和</head>之间topheader.html紧接着<body>标签之后header.htmlAbove the upper blue bar, below the pagename and wiki titlenavbar.htmlDEPRECATED (see the note below) - Inside the navbar, use this to add additional links (e.g. <li><a href=“/foo”>Foo</a></li>)pageheader.htmlbreadcrumbs下面，页面实际内容的上方pagefooter.htmlAbove the lower blue bar, below the last changed Datefooter.html在页面的最后，位于</ body>标记之前sidebarheader.html边侧栏上方sidebarfooter.html边侧栏下方social.htmlBelow the header.html, use this to add a social buttons (eg. Google+, Twitter, LinkedIn, etc)rightsidebarheader.html右边侧栏上方rightsidebarfooter.html
    右边侧栏下方
    Dokuwiki钩子

    可以通过创建简单的DokuWiki“钩子”页面来自定义页面的各个部分。 bootstrap3模板会将这些钩子页面内容插入到页面的总体布局中。

    钩子页面名说明名字空间单位:sidebarThe sidebarYES:rightsidebarThe right-sidebarYES:navbarNavbar with sub-menusYES:pageheaderHeader of the Wiki articleYES:pagefooterFooter of the Wiki articleYES:footerFooter of the pageYES:cookie:bannerCookie-Law bannerNO:cookie:policyCookie-Law policyNO:helpHelp page for “Help Page Icon”YES:headerHeader of page below the navbarYES:topheaderTop Header of page (on top of navbar if fixedTopNavbar is off)YES

  • PHP 峰 1211 0 1 发布
    CSS文件

    DokuWiki本体的CSS文件位于lib / styles目录中，不过DokuWiki本体仅定义了一些最基础的CSS，更多的CSS存在于模板和各个插件里面。
    所有CSS文件都是通过lib/exe /css.php程序获取的。该程序还处理缓存，模式替换，LESS预处理和优化，由tpl_metaheaders（）函数调用。

    加载CSS的顺序如下： 在CSS中，如果为同一属性指定了不同的值，并且样式冲突，则稍后加载的样式将优先，并且属性值将被覆盖，因此首选样式是从后面开始。

    基本样式：lib /styles/*.css插件样式：lib / plugins / <插件名称> / *。css模板样式：在lib / tpl / <模板名称> /style.ini中定义用户样式：conf / user * .css

    如果要通过自定义CSS添加样式，则基本上应将其添加到用户样式（conf / user * .css）中。

    媒体类型

    样式表支持五种媒体类型：

    screen：用于显示器print：用于打印all：用于所有的媒体设备rtl：feed：外部链接Dokuwiki官方说明

  • HTML5 路 799 0 1 发布

    本目录收录的是电子表格相关的应用软件。

     定义

    电子表格（Spreadsheet），指的是类似于Micfosoft Excel的办公文档。它会显示由一系列行与列构成的网格,称为单元格，单元格之间可以合并成一个跨多行多列的大单元格。

    单元格内可以存放数值、计算式、或文本，单元格的边框和文本颜色字体通常可以个别设置。

    范围

    本目录收录的软件仅限于以电子表格为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    EtherCalc

    EtherCalc是一个实时多人协作的电子表格处理器,后台需NodeJS服务器

    以下是 EtherCalc各相关链接及授权信息的介绍：

    官网(HP)
    https://ethercalc.net/源代码(Source)
    https://github.com/audreyt/ethercalc授权(License)
    Apache 2范例(Example)

    https://ethercalc.net/

    截图

  • HTML5 路 413 0 1 发布

    本目录收录的是PDF相关的应用软件。

     定义

    PDF(Portable Document Format:便携式文档格式)是一种用独立于应用程序、硬件、操作系统的方式呈现文档的文件格式。

    每个PDF文件包含固定布局的平面文档的完整描述，包括文本、字形、图形及其他需要显示的信息，通常在任何设备和环境下都能获得同样的展现。

    范围

    本目录收录的软件仅限于以PDF为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    laddu-reader

    Laddu 是一个PDF阅读器,基于Mozilla的pdf.js。

    以下是 laddu-reader 各相关链接及授权信息的介绍：

    官网(HP)
    源代码(Source)
    https://github.com/iraycd/laddu-reader授权(License)
    MIT范例(Example)
    截图