dojo 七 DOM dojo/dom

官方教程:Dojo DOM Functions
對dom的使用,需要引用包dojo/dom。
1.獲取節點,dom.byId
byId中既可以傳遞一個字符串,也可以傳遞一個節點對象

require(["dojo/dom", "dojo/domReady!"], function(dom) {
?????
????function setText(node, text){
????????node = dom.byId(node);//通過已有對象
????????node.innerHTML = text;
????}
????var one = dom.byId("one");//通過字符串
????setText(one, "One has been set");
????setText("two", "Two has been set as well");
?????
});


2.創建節點,domConstruct.create,創建一個新的節點
domConstruct需要引用包dojo/dom-construct,包括4個參數。
第一個:
節點名,如"li""a"
第二個:屬性對象,可以設置需要創建節點的各個屬性、樣式、內容和值
第三個:一個父節點或同級節點對象,可選
第四個:一個插入點標志字符串,由此決定是將第三個參數做為父節點附加到其內部,或是做為同級節點插入,可選,默認為"last"表示附加到父節點最后,"first"表示附加到父節點最前,"before"表示插入到同級節點前,"after"表示插入到同級節點后

require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],
????function(dom, domConstruct) {
?????
????????var list = dom.byId("list"),
????????????three = dom.byId("three");
????????domConstruct.create("li", {
????????????innerHTML: "Six"
????????}, list);
????????domConstruct.create("li", {
????????????innerHTML: "Seven",
????????????className: "seven",
????????????style: {
????????????????fontWeight: "bold"
????????????}
????????}, list);
????????domConstruct.create("li", {
????????????innerHTML: "Three and a half"
????????}, three, "after");
?????
});


3.放置節點,domConstruct.place,改變已存在的一個節點的位置
domConstruct.place包括三個參數。
第一個:目標節點,是一個id字符串或節點對象,即需要放置的節點
第二個:關聯節點,是一個id字符串或節點對象,即目標節點將附加到該父節點最前或最后,或者,插入到該同級節點前或后
第三個:一個插入點標志字符串,由此決定是將第二個參數做為父節點附加到其內部,或是做為同級節點插入其前后,可選,默認為"last"表示附加到父節點最后,"first"表示附加到父節點最前,"before"表示插入到同級節點前,"after"表示插入到同級節點后

require(["dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"],
????function(dom, domConstruct, on){
?????????
????????function moveFirst(){
????????????var list = dom.byId("list"),
????????????????three = dom.byId("three");
????????????domConstruct.place(three, list, "first");
????????}
????????function moveBeforeTwo(){
????????????var two = dom.byId("two"),
????????????????three = dom.byId("three");
????????????domConstruct.place(three, two, "before");
????????}
????????function moveAfterFour(){
????????????var four = dom.byId("four"),
????????????????three = dom.byId("three");
????????????domConstruct.place(three, four, "after");
????????}
????????function moveLast(){
????????????var list = dom.byId("list"),
????????????????three = dom.byId("three");
????????????domConstruct.place(three, list);
????????}????????
});

4.毀滅節點,
domConstruct.destroy,徹底刪除一個已存在的節點及其子節點。
如果僅需清空該節點下的子節點,而保留該節點則用domConstruct.empty。
參數都是一個id字符串或節點對象。
function destroyFirst(){
????var list = dom.byId("list"),
????????items = list.getElementsByTagName("li");
?????????
????if(items.length){
????????domConstruct.destroy(items[0]);//刪除list下第一個li子節點
????}
}
function destroyAll(){
????domConstruct.empty("list");//清空list下所有子節點
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/449811.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/449811.shtml
英文地址,請注明出處:http://en.pswp.cn/news/449811.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

quantaxis中使用docker安裝,出現的問題

本人在使用docker安裝quantaxis時,經常發生docker報錯,原因是與 wsl2沖突。之前不知道原因,直接就是卸載重裝,累死我了。現在知道后,將解決方案記下,幫助后來者繼續前行。 管理員打開cmd,輸入 …

并發編程(多進程1)

一 multiprocessing模塊介紹 python中的多線程無法利用多核優勢,如果想要充分地使用多核CPU的資源(os.cpu_count()查看),在python中大部分情況需要使用多進程。Python提供了multiprocessing。 multiprocessing模塊用來開啟子進…

LInux 下文件包的使用

1 .deb   http://wiki.ubuntu.org.cn/MySQL%E5%AE%89%E8%A3%85%E6%8C%87%E5%8D%97 2 .rpm

@RequiresPermissions 注解說明

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 RequiresAuthentication 驗證用戶是否登錄,等同于方法subject.isAuthenticated() 結果為true時。 RequiresUser 驗證用戶…

千位分隔符轉換為數字

最近下載了akshare里面的數據,然后發現有些數據格式為1,300這種格式,為str格式,但是又無法直接強制轉換之類方式,特地尋求答案,并做筆記,留待自己與后來者一起避坑。 from locale import * atof(123,456)…

一本通1629聰明的燕姿

1629:聰明的燕姿 時間限制: 1000 ms 內存限制: 524288 KB【題目描述】 城市中人們總是拿著號碼牌,不停尋找,不斷匹配,可是誰也不知道自己等的那個人是誰。 可是燕姿不一樣,燕姿知道自己等的人是誰,…

IT職場人生系列之二十四:程序員如何增加收入

這是IT職場人生系列的第二十四篇。(序言,專欄目錄) 程序員的收入是廣受關注的問題,很多人從業3~5年之后就會遇到這個收入瓶頸。盡管物價不斷上漲,程序員尤其是初、中級程序員的收入不升反降。即使上次在某…

ASP 代碼當前記錄集不支持更新問題的解決辦法。

錯誤類型:ADODB.Recordset (0x800A0CB3)當前記錄集不支持更新。這可能是提供程序的限制,也可能是選定鎖定類型的限制。 /Model/manage/Admin_Admin.asp, 第 35 行 找到放在數據庫文件的--- 右鍵--》屬性---》安全----》添加IIS來賓用戶---》權限為&#…

@PathVariable 注解 說明

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 PathVariable 映射 URL 綁定的占位符 帶占位符的 URL 是 Spring3.0 新增的功能,該功能在SpringMVC 向 REST 目標挺進發展過…

數據清洗,篩選

本人在私募,負責數據收集以及清洗,就是包括收集數據,按照領導要求,選出滿足條件的數據,用于校驗策略是否正確。 現在就在這進行代碼上傳,即用于自己總結整理,也用于供大家學習了解,實…

JS媒體查詢

樣式的改變使用C3的媒體查詢 行為和功能的改變使用JS的媒體查詢 matchMedia()方法參數可寫任何一個CSSmedia規則,返回的是新的MediaQueryList對象,該對象有兩個屬性 media:查詢語句的內容matches:檢查查詢結果,返回boo…

Ruby初步介紹

Ruby是腳本語言,與傳統的C, Java不同的是,它不需要經過編譯,而是直接可以被執行 Ubuntu下執行第一個ruby腳本 print("Hello David, This is your first Ruby script.\n") davidubuntu:~/RubyTrain/Basic$ ruby Hello.rb 運行結果: Hello David, This is your first R…

C/C++ main用法總結

今天看到一篇很好的文章,詳細的講解了C、C中的main函數,以及returne的用法。轉載過來大家一起分享下。轉自:http://www.cnblogs.com/ct6816678/archive/2012/10/26/2741824.htmlreturn是C預定義的語句,當return語句提供了一個值時…

如何將數據寫入excel中,而不覆蓋原有數據

之前直接用pandas庫,然后to_excel(),結果直接將原始數據直接覆蓋,幸虧有備份。(友善提醒,做數據處理之前,先將數據本地備份一份,確認完全沒有問題,然后還是備…

對List集合中的元素進行排序

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 ollections對List集合中的數據進行排序 有時候需要對集合中的元素按照一定的規則進行排序,這就需要用到 Java中提供的對集合…

Jmeter----5.1 設置中文

注意:JMeter5需要Java8 以上,本文環境是Win7 64位 設置永久默認漢化:在Jmeter的安裝目錄下的bin目錄中找到 jmeter.properties這個文件,用文本編輯器打開。在#languageen下面插入一行languagezh_CN 這樣,再次打開Jmete…

pandas計算移動平均值

本人今天遇到遇到一個任務,計算同月份合約當天各合約總持倉量的移動平均值。立刻寫下了這個函數: group df.groupby([合約系列,date]) f pd.DataFrame(group[持倉量].sum().rolling(20).mean()) 上交后,提出要求,不行&#xff…

一個優美的架構需要考慮的幾個問題

隨著公司的架構逐步發展,越來越多的問題被提出來,也發現一個良好的技術架構需要考慮的問題 1 架構的可擴展性 這里面又包括以下幾個方面 水平垂直可拆分服務無狀態數據可緩存可異步處理(提高性能)可復制(提高效率&…

HSTS的來龍去脈

前言 安全經常說“云、管、端”,“管”指的是管道,傳輸過程中的安全。為了確保信息在網絡傳輸層的安全,現在很多網站都開啟了HTTPS,也就是HTTPTLS,在傳輸過程中對信息進行加密。HTTPS使用了對稱加密、非對稱加密、消息…

利用XShell上傳、下載文件(使用sz與rz命令) 超實用!

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 rz、sz 安裝方式:sz/rz命令安裝方式 借助XShell,使用linux命令sz可以很方便的將服務器上的文件下載到本地&#…