http://zhidian.wuute.com/html5dev/ 2026-05-26T01:16:33+09:00 http://zhidian.wuute.com/html5dev/ http://zhidian.wuute.com/html5dev/lib/tpl/bootstrap3_1/images/favicon.ico text/html 2017-04-14T00:41:58+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/06?rev=1492098118&do=diff DOM基础 DOM简介 DOM(Document Object Model,文档对象模型)将XML/HTML文档构造成一个层次化的节点树,并提供了一系列的应用程序编程接口,以允许程序或脚本动态的访问和修改文档的内容、结构和样式。 text/html 2017-04-23T15:55:38+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/16?rev=1492930538&do=diff 增删节点 示例代码 创建文本节点 var node = domlib.createTextNode("hello,hudaokeji"); 创建元素节点 var node = domlib.createElemnt("div",{ "style" : "width:100%;height:100%" }); 创建节点块 var node = domlib.createFragment("<div><span>label</span><input type='text'/></div>"); text/html 2017-04-23T14:48:02+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/21?rev=1492926482&do=diff 查找元素 元素节点的查找 通过节点属性查找 通过节点的相关属性可以直接取得对象节点的父子兄弟节点。 属性说明childNodes获取当前元素节点的所有子节点firstChild获取当前元素节点的第一个子节点 text/html 2017-04-23T15:02:43+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/26?rev=1492927363&do=diff 元素的位置 获取元素的位置 Element接口提供了众多属性用于获取元素的各种位置（单位像素），这些属性通常为只读，并且只有元素已经在DOM树中且CSS属性的display不为none时才有效。 偏移位置 text/html 2017-04-23T15:12:12+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/31?rev=1492927932&do=diff 元素的大小 获取元素的大小 Element接口提供了众多属性用于获取元素的各种大小值（单位像素），这些属性通常为只读，并且只有元素已经在DOM树中且CSS属性的display不为none时才有效。 元素的实际大小 text/html 2017-04-23T15:56:50+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/36?rev=1492930610&do=diff 元素的样式 示例代码 获取元素的样式 var backgroundColor = domlib.css(node,"backgroundColor"); 设置元素的样式 domlib.css(node,"backgroundColor","red"); 工具函数列表 uDOMlib所提供的工具函数之中，有一部分与元素样式相关，下面列出部分函数的源代码实现以供参考。 text/html 2017-04-23T15:43:43+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/41?rev=1492929823&do=diff 元素的属性 获取和设置HTML属性文本 var disabled = nodelib.attr(node,"disabled"); nodelib.attr(node,"disabled",""); 获取和设置DOM对象属性 var disabled = nodelib.prop(node,"disabled"); nodelib.prop(node,"disabled",false); text/html 2017-04-23T14:18:51+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/16/start?rev=1492924731&do=diff 文档对象模型 定义 文档对象模型 (Document Object Model，简称 DOM ) 是 HTML 和 XML 文档的编程接口。 概述 DOM给文档元素组织成一个结构树，并且定义了一整套的接口，使程序可以对结构树进行访问，以改变文档的结构，样式和内容。