dojo1.7翻译处理DOM(Dojo DOM Functions)[DOJO]

所属分类：[界面编程] | 创建时间：2013-01-13 | 文章属性：翻译 | 文章来源：http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/ | 作者：windfly

&#21407;&#25991;&#22320;&#22336;&#65306;<a href="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/">http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/</a>
 
 
 &#38590;&#24230;&#65306;&#20302;
 
 
 &#29256;&#26412;&#65306;1.7
 
 
 &#160;
 
 
 &#22312;&#36825;&#20010;&#25945;&#31243;&#20013;&#65292;&#20320;&#23558;&#23398;&#21040;&#22914;&#26524;&#20351;&#29992;DOJO&#26469;&#26041;&#20415;&#30340;&#25805;&#20316;DOM&#23545;&#35937;&#12290;&#25805;&#20316;DOM&#21482;&#26159;DOJO&#30340;&#30340;&#19968;&#23567;&#37096;&#20998;&#21151;&#33021;&#65292;&#36890;&#36807;&#23427;&#65292;&#20320;&#21487;&#20197;&#39640;&#25928;&#30340;&#21462;&#20540;&#65292;&#26356;&#26032;&#65292;&#22686;&#21152;&#21644;&#21024;&#38500;&#39029;&#38754;&#20803;&#32032;&#12290;
 
 
 &#160;
 
 <h2>
 &#24320;&#22987;
 </h2>
 
 javascript&#26159;&#22522;&#20110;&#27983;&#35272;&#22120;&#30340;&#65292;DOM&#21017;&#26159;&#25105;&#20204;&#24819;&#35201;&#21435;&#23637;&#29616;&#32473;&#29992;&#25143;&#25152;&#30475;&#30340;&#30028;&#38754;&#12290;&#22914;&#26524;&#25105;&#20204;&#24819;&#22312;&#39029;&#38754;&#24050;&#32463;&#34987;&#21152;&#36733;&#23436;&#25104;&#21518;&#20877;&#36827;&#34892;&#32452;&#32455;&#20462;&#25913;&#39029;&#38754;&#65292;&#21017;&#23601;&#35201;&#20351;&#29992;javascript&#26469;&#20462;&#25913;DOM&#20102;&#12290;dojo&#30340;&#30446;&#26631;&#23601;&#26159;&#25552;&#20379;&#19968;&#31181;&#21151;&#33021;&#65292;&#33021;&#24456;&#26041;&#20415;&#30340;&#25805;&#20316;DOM&#23545;&#35937;&#65292;&#24182;&#33021;&#20860;&#23481;&#21508;&#31181;&#27983;&#35272;&#22120;&#65292;&#32780;&#19988;&#21482;&#20351;&#29992;&#24456;&#23569;&#37327;&#30340;&#20195;&#30721;&#23601;&#33021;&#23454;&#29616;&#12290;
 
 
 &#19979;&#38754;&#26159;&#19968;&#20010;&#25105;&#20204;&#24456;&#24120;&#30475;&#30340;&#19968;&#32452;&#39029;&#38754;&#32467;&#26500;
 
 
 &#160;
 
 <pre class="js" name="code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot;&gt;
 &lt;title&gt;Demo: DOM Functions&lt;/title&gt;
 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js&quot;
 data-dojo-config=&quot;async: true&quot;&gt;
 &lt;/script&gt;
 &lt;script&gt;
 require([&quot;dojo/domReady!&quot;], function() {
 
 });
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ul id=&quot;list&quot;&gt;
 &lt;li id=&quot;one&quot;&gt;One&lt;/li&gt;
 &lt;li id=&quot;two&quot;&gt;Two&lt;/li&gt;
 &lt;li id=&quot;three&quot;&gt;Three&lt;/li&gt;
 &lt;li id=&quot;four&quot;&gt;Four&lt;/li&gt;
 &lt;li id=&quot;five&quot;&gt;Five&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>
 
 &#160;
 
 
 &#160;&#20195;&#30721;&#20013;&#24050;&#32463;&#21253;&#21547;&#20102;dojo&#30340;&#26631;&#31614;&#65292;&#32780;&#19988;&#29616;&#22312;&#20320;&#20063;&#24212;&#35813;&#35748;&#35782;require&#36825;&#19968;&#22359;&#30340;&#24847;&#24605;&#20102;&#12290;&#22312;require&#36825;&#20010;&#22359;&#37324;&#26159;&#25972;&#20010;&#39029;&#38754;&#21152;&#36733;&#23436;&#25104;&#21518;&#23558;&#35201;&#25191;&#34892;&#30340;&#35821;&#21477;&#30340;&#22320;&#26041;&#12290;
 
 
 &#160;
 
 <h2>
 &#26816;&#32034;
 </h2>
 
 &#39318;&#20808;&#65292;&#20026;&#20102;&#25805;&#20316;&#23427;&#20204;&#65292;&#25105;&#20204;&#35201;&#20808;&#23398;&#20064;&#22914;&#20309;&#26469;&#21462;&#24471;&#39029;&#38754;&#30340;DOM&#23545;&#35937;&#12290;&#26368;&#31616;&#21333;&#30340;&#26041;&#27861;&#26159;&#20351;&#29992;dojo/dom&#30340;byId&#26041;&#27861;&#26469;&#21462;&#36164;&#28304;&#12290;&#24403;&#20320;&#20256;&#20837;&#19968;&#20010;ID&#20540;&#32473;dojo.byId&#26102;&#65292;&#20320;&#23558;&#20250;&#24471;&#21040;&#19968;&#20010;&#21547;&#26377;&#35813;ID&#20540;&#30340;DOM&#23545;&#35937;&#33410;&#28857;&#30340;&#36820;&#22238;&#20540;&#65292;&#22914;&#26524;&#25214;&#19981;&#21040;&#26377;&#35813;ID&#20540;&#30340;&#20803;&#32032;&#65292;&#21017;&#36820;&#22238;null.
 
 
 &#160;
 
 
 &#36825;&#20010;&#21151;&#33021;&#31561;&#21516;&#20110;&#20351;&#29992;document.getElementById&#65292;&#20294;&#26377;&#20004;&#20010;&#19981;&#21516;&#22788;&#12290;&#31532;&#19968;&#65292;&#20182;&#27604;&#36739;&#30701;&#65292;&#32780;&#19988;&#33021;&#20860;&#23481;&#19981;&#21516;&#27983;&#35272;&#22120;&#12290;&#21478;&#19968;&#20010;&#29305;&#28857;&#26159;&#65292;&#20320;&#21487;&#20197;&#20256;&#20837;&#19968;&#20010;DOM&#33410;&#28857;&#30340;ID&#20540;&#65292;&#20063;&#21487;&#20197;&#30452;&#25509;&#20256;&#20837;&#19968;&#20010;dojo&#23545;&#35937;&#33410;&#28857;&#12290;&#22914;&#26524;&#20256;&#20837;&#30340;&#26159;&#19968;&#20010;dojo&#23545;&#35937;&#33410;&#28857;&#65292;&#23558;&#20250;&#25226;&#37027;&#20010;&#23545;&#35937;&#31435;&#21363;&#36820;&#22238;&#65292;&#36825;&#26377;&#21033;&#20110;&#21462;&#20540;&#30340;&#26041;&#20415;&#12290;&#30475;&#20010;&#20363;&#23376;&#12290;
 
 
 &#160;
 
 <pre class="js" name="code">// Require the DOM resource
require([&quot;dojo/dom&quot;, &quot;dojo/domReady!&quot;], function(dom) {
 
 function setText(node, text){
 node = dom.byId(node);
 node.innerHTML = text;
 }
 
 var one = dom.byId(&quot;one&quot;);
 setText(one, &quot;One has been set&quot;);
 setText(&quot;two&quot;, &quot;Two has been set as well&quot;);
 
});</pre>
 
 &#160;
 
 
 <a href="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/byid.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/byid.html">&#160;&#36816;&#34892;&#31034;&#20363;</a>
 
 
 &#160;
 
 
 setText&#26041;&#27861;&#23558;&#20250;&#35774;&#32622;&#33410;&#28857;&#65292;&#22240;&#20026;&#20351;&#29992;&#30340;&#26159;dojo.byId&#25152;&#20197;&#65292;&#20256;&#20837;&#30340;&#21442;&#25968;&#26159;ID&#20540;&#25110;&#33410;&#28857;&#25928;&#26524;&#37117;&#26159;&#19968;&#26679;&#30340;&#12290;
 
 
 &#160;
 
 <h2>
 &#21019;&#24314;
 </h2>
 
 &#25105;&#20204;&#32463;&#24120;&#20250;&#21435;&#21019;&#24314;&#39029;&#38754;&#20803;&#32032;&#12290;dojo&#24182;&#19981;&#38459;&#27490;&#20320;&#21435;&#20351;&#29992;docement.createElement&#26041;&#27861;&#26469;&#21019;&#24314;&#20803;&#32032;&#65292;&#20294;&#29992;&#36825;&#31181;&#26041;&#27861;&#21019;&#24314;&#21644;&#35774;&#32622;&#33410;&#28857;&#30340;&#23646;&#24615;&#23558;&#35201;&#20889;&#20986;&#22823;&#37327;&#30340;&#20195;&#30721;&#12290;dojo&#25552;&#20379;&#20102;&#19968;&#20010;&#20860;&#23481;&#27983;&#35272;&#22120;&#30340;&#26032;&#26041;&#27861;&#65292;&#20351;&#29992;dojo/dom-construct&#30340;&#21019;&#24314;&#26041;&#27861;&#12290;
 
 
 &#160;
 
 
 domConstruct.create&#26377;&#20197;&#19979;&#20960;&#20010;&#21442;&#25968;&#12290;&#33410;&#28857;&#21517;&#65292;&#23646;&#24615;&#65292;&#23376;/&#29238;&#33410;&#28857;&#65292;&#25918;&#32622;&#30340;&#20301;&#32622;(&#40664;&#35748;&#26159;last)&#65292;&#36820;&#22238;&#20540;&#20026;&#21019;&#24314;&#30340;&#26032;&#30340;&#20803;&#32032;&#12290;&#30475;&#19968;&#20010;&#20363;&#23376;
 
 
 &#160;
 
 <pre class="js" name="code">require([&quot;dojo/dom&quot;, &quot;dojo/dom-construct&quot;, &quot;dojo/domReady!&quot;], 
 function(dom, domConstruct) {
 
 var list = dom.byId(&quot;list&quot;),
 three = dom.byId(&quot;three&quot;);
 
 domConstruct.create(&quot;li&quot;, {
 innerHTML: &quot;Six&quot;
 }, list);
 
 domConstruct.create(&quot;li&quot;, {
 innerHTML: &quot;Seven&quot;,
 className: &quot;seven&quot;,
 style: {
 fontWeight: &quot;bold&quot;
 }
 }, list);
 
 domConstruct.create(&quot;li&quot;, {
 innerHTML: &quot;Three and a half&quot;
 }, three, &quot;after&quot;);
 
});</pre>
 
 &#160;
 
 
 <a href="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/create.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/create.html">&#160;&#36816;&#34892;&#31034;&#20363;</a>
 
 
 &#160;
 
 
 &#19968;&#20010;&#21015;&#34920;&#20013;&#30340;&#36873;&#39033;&#34987;&#21019;&#24314;&#65292;&#35774;&#32622;&#20854;&#20869;&#23481;&#20026;&quot;Six&quot;&#24182;&#21152;&#20837;&#20110;&#21015;&#34920;&#20013;&#12290;&#19979;&#19968;&#27493;&#65292;&#21478;&#19968;&#20010;&#36873;&#39033;&#34987;&#21019;&#24314;&#65292;&#35774;&#32622;&#20869;&#23481;&#20026;&quot;Seven&quot;&#65292;&#35774;&#32622;className&#20540;&#20026;&quot;seven&quot;&#65292;&#35753;&#20854;&#26377;&#20102;&#19968;&#20010;&#21152;&#31895;&#30340;&#26679;&#24335;&#65292;&#24182;&#23558;&#20854;&#25918;&#32622;&#20110;&#21015;&#34920;&#20013;&#12290;&#26368;&#21518;&#21019;&#24314;&#19968;&#20010;&#36873;&#39033;&#65292;&#35774;&#32622;&#20869;&#23481;&#20026;&quot;Three 
 and a half&quot;&#25226;&#23427;&#25918;&#32622;&#20110;&#21015;&#34920;&#30340;&#21518;&#38754;&#65292;&#24182;&#32473;&#23450;ID&#20540;&#20026;&quot;three&quot;&#12290;
 
 
 &#160;
 
 
 &#24403;&#20320;&#20351;&#29992;&#36825;&#31181;&#26041;&#27861;&#21019;&#24314;&#20803;&#32032;&#26102;&#65292;&#30456;&#23545;&#20110;innerHTML&#26469;&#35828;&#20250;&#24590;&#20040;&#26679;&#65311;&#22914;&#26524;&#20320;&#24050;&#32463;&#26377;&#20102;&#20869;&#23481;&#65292;&#37027;&#20040;&#20351;&#29992;innerHTML&#26469;&#35774;&#32622;&#26159;&#26368;&#24555;&#30340;&#65292;&#20294;&#26159;&#65292;&#22914;&#26524;&#20320;&#24182;&#19981;&#26159;&#39532;&#19978;&#23601;&#35201;&#35774;&#32622;&#20854;&#20869;&#23481;&#24182;&#25918;&#20837;&#21040;DOM&#20013;&#65292;&#37027;&#20040;&#23601;&#20351;&#29992;domConstruct.create
 
 
 &#160;
 
 <h2>
 &#25918;&#32622;
 </h2>
 
 &#22914;&#26524;&#20320;&#22312;&#39029;&#38754;&#20013;&#24050;&#32463;&#26377;&#19968;&#20010;&#33410;&#28857;&#20102;&#24182;&#24819;&#31227;&#21160;&#23427;&#65292;&#37027;&#20040;&#20320;&#23601;&#35201;&#20351;&#29992;domConstruct.place&#36825;&#20010;&#26041;&#27861;&#12290;&#36825;&#20010;&#26041;&#27861;&#30340;&#21442;&#25968;&#26377;&#65306;DOM&#33410;&#28857;&#25110;ID&#20540;&#65292;&#35201;&#20851;&#32852;&#30340;DOM&#33410;&#28857;&#25110;ID&#20540;&#65292;&#35201;&#25918;&#32622;&#30340;&#20301;&#32622;&#65292;&#40664;&#35748;&#20026;last&#12290;&#36825;&#24456;&#20687;domConstruct.create&#26041;&#27861;&#65292;&#20107;&#23454;&#19978;&#65292;domConstruct.create&#26159;&#20351;&#29992;&#20102;domConstruct.place&#26041;&#27861;&#12290;&#22914;
 
 
 &#160;
 
 <pre class="html" name="code">&lt;button id=&quot;moveFirst&quot;&gt;The first item&lt;/button&gt;
&lt;button id=&quot;moveBeforeTwo&quot;&gt;Before Two&lt;/button&gt;
&lt;button id=&quot;moveAfterFour&quot;&gt;After Four&lt;/button&gt;
&lt;button id=&quot;moveLast&quot;&gt;The last item&lt;/button&gt;</pre>
 
 &#160;
 
 
 &#160;&#20363;&#23376;&#20013;&#23450;&#20041;&#20102;&#19968;&#20010;&#26041;&#27861;&#29992;&#26469;&#31227;&#21160;&#31532;&#19977;&#20010;&#33410;&#28857;
 
 
 &#160;
 
 <pre class="js" name="code">require([&quot;dojo/dom&quot;, &quot;dojo/dom-construct&quot;, &quot;dojo/on&quot;, &quot;dojo/domReady!&quot;],
 function(dom, domConstruct, on){
 
 function moveFirst(){
 var list = dom.byId(&quot;list&quot;),
 three = dom.byId(&quot;three&quot;);
 
 domConstruct.place(three, list, &quot;first&quot;);
 }
 
 function moveBeforeTwo(){
 var two = dom.byId(&quot;two&quot;),
 three = dom.byId(&quot;three&quot;);
 
 domConstruct.place(three, two, &quot;before&quot;);
 }
 
 function moveAfterFour(){
 var four = dom.byId(&quot;four&quot;),
 three = dom.byId(&quot;three&quot;);
 
 domConstruct.place(three, four, &quot;after&quot;);
 }
 
 function moveLast(){
 var list = dom.byId(&quot;list&quot;),
 three = dom.byId(&quot;three&quot;);
 
 domConstruct.place(three, list);
 }
 
 // Connect the buttons
 on(dom.byId(&quot;moveFirst&quot;), &quot;click&quot;, moveFirst);
 on(dom.byId(&quot;moveBeforeTwo&quot;), &quot;click&quot;, moveBeforeTwo);
 on(dom.byId(&quot;moveAfterFour&quot;), &quot;click&quot;, moveAfterFour);
 on(dom.byId(&quot;moveLast&quot;), &quot;click&quot;, moveLast);
 
});</pre>
 
 &#160;
 
 
 <a href="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/place.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/place.html">&#160;&#36816;&#34892;&#31034;&#20363;</a>
 
 
 &#160;
 
 
 &#35774;&#32622;&#20301;&#32622;&#30340;&#21442;&#25968;&#26377;&quot;before&quot;,&quot;after&quot;,&quot;replace&quot;,&quot;only&quot;,&quot;first&quot;,&quot;last&quot;
 
 
 &#160;
 
 <h2>
 &#21024;&#38500;
 </h2>
 
 &#36825;&#37324;&#26377;&#20004;&#31181;&#26041;&#27861;&#26469;&#21024;&#38500;&#19968;&#20010;&#33410;&#28857;&#12290;&#20351;&#29992;domConstruct.destroy&#21024;&#38500;&#33410;&#28857;&#24182;&#21024;&#38500;&#20854;&#25152;&#25317;&#26377;&#30340;&#25152;&#26377;&#23376;&#33410;&#28857;&#12290;domConstruct.empty&#23558;&#21482;&#20250;&#21024;&#38500;&#20854;&#23376;&#33410;&#28857;&#12290;&#20004;&#31181;&#26041;&#27861;&#37117;&#21482;&#25509;&#25910;ID&#20540;&#25110;&#33410;&#28857;&#23545;&#35937;&#21442;&#25968;&#12290;
 
 
 &#160;
 
 <pre class="html" name="code">&lt;button id=&quot;destroyFirst&quot;&gt;Destroy the first list item&lt;/button&gt;
&lt;button id=&quot;destroyAll&quot;&gt;Destroy all list items&lt;/button&gt;</pre>
 
 &#160;function destroyFirst(){
 
 
 &#160;
 
 <pre class="js" name="code"> var list = dom.byId(&quot;list&quot;),
 items = list.getElementsByTagName(&quot;li&quot;);
 
 if(items.length){
 domConstruct.destroy(items[0]);
 }
}
function destroyAll(){
 domConstruct.empty(&quot;list&quot;);
}
 
// Connect buttons to destroy elements
on(dom.byId(&quot;destroyFirst&quot;), &quot;click&quot;, destroyFirst);
on(dom.byId(&quot;destroyAll&quot;), &quot;click&quot;, destroyAll);</pre>
 
 <a href="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/destroy.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/demo/destroy.html">&#36816;&#34892;&#31034;&#20363;</a>
 
 
 &#160;
 
 
 &#31532;&#19968;&#20010;&#25353;&#38062;&#23558;&#21024;&#38500;&#31532;&#19968;&#20010;&#36873;&#39033;&#65292;&#31532;&#20108;&#20010;&#25353;&#38062;&#23558;&#21024;&#38500;&#20840;&#37096;&#30340;&#21015;&#34920;
 
 
 &#160;
 
 <h2>
 &#32467;&#35770;
 </h2>
 
 &#33267;&#27492;&#65292;&#25105;&#20204;&#24050;&#32463;&#23398;&#20102;DOM&#23545;&#35937;&#20027;&#35201;&#30340;&#21019;&#24314;&#65292;&#31227;&#21160;&#65292;&#35835;&#21462;&#31561;&#25805;&#20316;&#65292;&#20294;&#20182;&#20204;&#37117;&#26159;&#19968;&#27425;&#21482;&#33021;&#25805;&#20316;&#19968;&#20010;&#23545;&#35937;&#12290;&#22914;&#26524;&#20320;&#24819;&#25805;&#20316;&#22810;&#20010;&#33410;&#28857;&#65292;&#20320;&#21487;&#20197;&#20351;&#29992;dojo/query&#26041;&#27861;

文章分类

dojo1.7翻译 处理DOM(Dojo DOM Functions)[DOJO]

dojo1.7翻译处理DOM(Dojo DOM Functions)[DOJO]