DOJO操作DOM

对于Dom( Document Object Model )的操作是浏览器器端JavaScript 要做的一个工作,dojo 提供了一些方便 精巧的方法,当我们需要来 扩充 、替换、增加 到html 当浏览器加载的时候,我们就可以利用这些 简便的、高效的、浏览器兼用的方法来实现这样的目的。
一.检索
下面我们来看一个例子:
<!DOCTYPE html>
<html>
    <head>
        <metacharset="utf-8">
        <title>Demo: DOM Functions</title>
        <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
            data-dojo-config="async: true">
        </script>
        <script>
            require(["dojo/domReady!"],function() {
               
            });
        </script>
    </head>
    <body>
        <ulid="list">
            <liid="one">One</li>
            <liid="two">Two</li>
            <liid="three">Three</li>
            <liid="four">Four</li>
            <liid="five">Five</li>
        </ul>
    </body>
</html>
dojo 的标签已经写好了,你要识别出 require 块
所有要操作的DOM的代码都要等到DOM加载完成之后才能执行。我们可能最先想要知道的是我们如何从文档对象模型中的道文档对象。最简单的方法就是通过 dojo/dom 资源的byId()方法  当我们传递 一个 id 给dom.byId() 方法 你将接收到相应的文档节点对象,如果找不到匹配的对象将返回null 值。
此方法和 document.getElementById 是等价的   
但用byId 的好处是 :
1.他更短.
2.浏览器兼容性更好
3.当传递给给他的是一个文本对象的时候他将立即返回自身。

例如
// Require the DOM resource
require(["dojo/dom","dojo/domReady!"],function(dom) {  
    functionsetText(node, text){
        node = dom.byId(node);
        node.innerHTML = text;
    }

时间: 2025-01-24 00:04:29

DOJO操作DOM的相关文章

Javascript教程:如何操作dom

文章简介:前两章讲了获取DOM元素.这章就开始讲如何操作dom.1.针对页面上有的DOM元素操作,无非就是对这个dom元素的样式进行操作.如果这个DOM元素没有样式也就谈不上操作了.2.我们也可以直接用JS动态的向html里写入DOM元素. 前两章讲了获取DOM元素.这章就开始讲如何操作dom.1.针对页面上有的DOM元素操作,无非就是对这个dom元素的样式进行操作.如果这个DOM元素没有样式也就谈不上操作了.2.我们也可以直接用JS动态的向html里写入DOM元素.今天这章我们就讲这两个应用(

JavaScript框架操作DOM改变网页元素的内容和外观

DOM操作 在此之前,你已经看到JavaScript框架使用选择器和DOM遍历可以很容易的获得特定的元素.但是,为了改变网页上特定元素的内容和外观,你需要操作DOM并应用改变.使用纯粹的JavaScript将是一件繁重的工作,但幸运的是,大多数JavaScript框架提供有用的函数,可以很容易地做到这些. 假设你有一个ID为the-box的盒子. <div id="the-box">Message goes here</div> 使用jQuery将其文本改变为&

Ajax实战:使用JavaScript操作DOM

在任何应用中,我们都需要在用户的使用过程中改变用户界面,为用户执行 的操作和完成的进度提供反馈.这些反馈包括修改单个元素的标签或颜色.弹出 临时的对话框.使用一组全新的UI组件替换大部分的屏幕内容等等.到目前为止 ,最常见的方式就是,通过提供给浏览器一段声明式的HTML来构造DOM树(换句话 说,也就是编写HTML页面). 我们在代码清单2-2和图2-3中显示的文档有点太大和太复杂了,还是从小的 步骤开始做DOM操作吧.假设我们要向用户显示友好的问候.当页面第一次加载 的时候,我们并不知道他的名

你所不了解的javascript操作DOM的细节知识点(一)

这篇文章主要介绍了你所不了解的javascript操作DOM的细节知识点的相关资料,需要的朋友可以参考下 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文

同域jQuery(跨)iframe操作DOM

 本篇文章主要是对同域jQuery(跨)iframe操作DOM进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面.   代码如下: <iframe src="a.php" id="aa"></iframe>  <ifr

JavaScript操作DOM的那些坑

js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的"坑". DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容. PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异. Node 接口 firstChild 相当于 childNodes[0];lastChild 相当于childNodes[box.childN

Javascript操作DOM常用API总结

转载自:http://www.cnblogs.com/lrzw32/p/5008913.html Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现

jQuery操作DOM元素

原文:jQuery操作DOM元素 jQuery操作DOM元素 HTML DOM常见操作: 查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 关于节点的查找,是利用选择器完成的. 在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 首先看一个例子,用原生的JavaScript如何创建并添加元素: <!DOCTYPE html> <html> <head>

javascript-js里操作DOM节点性能损失最低的方式是什么?

问题描述 js里操作DOM节点性能损失最低的方式是什么? 可能这个标题不太合适,如下有个例子,一种是用原生js里的创建节点.文本节点.插入父节点内的方式,一种是用数据格式化字符串的方式 // 方式1: var a = document.createElement('a'); a.href = 'http://www.baidu.com'; a.target ='_blank'; var text = document.createTextNode('this is baidu homepage'