DOM讀取和修改節點對象屬性

本文轉載自查看原文 2015-10-25 17:43 5250 DOM

一、獲取和修改元素間的內容(3種)

　　1.innerHTML 獲得/設置元素開始標簽和結束標簽之間的html原文

　　　　固定套路：1.刪除父元素下所有子元素：parent.innerHTML="";

　　　　　　　　　2.批量替換父元素下所有子元素：parent.innerHTML="所有子元素標簽組成的html"

　　2.textContent/innerText: 獲得開始標簽和結束標簽之間的文本(去除標簽)

　　　　textContent 是DOM標准；innerText 是IE8；

　　3.文本節點內容

　　　　nodeValue

　　示例：讀取並修改元素內容

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <title>讀取並修改元素的內容</title>
 5 <meta charset="utf-8" />
 6 <style>
 7     select{width:100px;height:85px;}
 8     div{display:inline-block;width:50px}
 9 </style>
10 <script src="js/2_2.js"></script>
11 </head>
12 <body>
13     <!--假設兩個select元素，分別保存備選地區列表和選中地區列表
14 實現兩選擇框之間選項的交換：
15     包括：當個選中項左右移動
16               多個選中項左右移動
17               全左移和全右移
18 要求：兩個select中的地區都要按照名稱首字母排序
19 -->
20     <select id="unsel" size="5" multiple>
21         <option>Argentina</option>
22         <option>Brazil</option>
23         <option>Canada</option>
24         <option>Chile</option>
25         <option>China</option>
26         <option>Cuba</option>
27         <option>Denmark</option>
28         <option>Egypt</option>
29         <option>France</option>
30         <option>Greece</option>
31         <option>Spain</option>
32     </select>
33     <div>
34 <button onclick="move(this)">&gt;&gt;</button>
35 <button onclick="move(this)">&gt;</button>
36 <button onclick="move(this)">&lt;</button>
37 <button onclick="move(this)">&lt;&lt;</button>
38     </div>
39     <select id="sel" size="5" multiple>
40     </select>
41 </body>
42 </html>

View Code

 1 //定義兩個數組：
 2 //    unsel:存所有未選中的國家(左邊的)
 3 //    sel:存所有選中的國家(右邊)
 4 var unsel=null;
 5 var sel=null;
 6 
 7 //封裝$
 8 window.$=function(selector){
 9     return document.querySelectorAll(selector);
10 }
11  //當頁面加載后
12 window.onload=function(){
13     /*初始化unsel  "</option>"*/
14     unsel=$("#unsel")[0].innerHTML.trim().slice(8,-9).split(/<\/option>\s*<option>/);
15     //console.log(unsel);
16     sel=[];
17 
18 }
19 /**/
20 function move(btn){
21     //如果btn的內容是>>
22     if (btn.innerHTML=="&gt;&gt;") //btn.textContent==">>" textContent會對字符進行轉義
23     {
24         //將unsel中的所有元素，拼入sel，對新數組排序
25         sel=sel.concat(unsel);
26         sel.sort();
27         unsel=[];
28         //console.log(sel);
29     }else if (btn.innerHTML=="&lt;&lt;")
30     {//如果btn的內容是<<
31         unsel=unsel.concat(sel);
32         unsel.sort();
33         sel=[];
34         //console.log(unsel);
35     }else if (btn.innerHTML=="&gt;")
36     {//如果btn的內容是>
37         var opts=$("#unsel option");
38         //option對象的selected屬性==>true/false
39         //獲得unsel下的所有option對象
40         console.log(opts.length);
41         //遍歷所有的option
42         for (var i=opts.length-1; i>=0; i--)
43         {
44             //只要當前option的selected有效
45             if (opts[i].selected)
46             {
47                 //使用splice刪除unsel中的相同位置的元素，將刪除的元素壓入sel中
48                 sel.push(unsel.splice(i,1)[0]);
49                 //如果在遍歷過程中會影響到下標，建議從后向前遍歷
50             }
51         }
52         //遍歷結束，對sel進行排序
53         sel.sort();
54 
55     }else if (btn.innerHTML=="&lt;")
56     {//如果btn的內容是<
57         var opts=$("#sel option");
58         //console.log(opts.length);
59         for(var i=opts.length-1; i>=0; i--){
60             if(opts[i].selected){
61                 unsel.push(sel.splice(i,1)[0]);
62             }
63         }
64         unsel.sort();
65     }
66     //更新界面 
67     updateSel();
68 }
69 function updateSel(){
70     //專門跟新兩個select元素的內容
71     //
72     $("#unsel")[0].innerHTML="<option>"+unsel.join("</option><option>")+"</option>";
73     $("#sel")[0].innerHTML="<option>"+sel.join("</option><option>")+"</option>";
74 }

View Code

二、獲取、添加、刪除、修改元素屬性

　　getAttribute("屬性名")　　獲取元素對象指定特性的值

　　setAttribute(name, value)　　設置元素對象指定特性的值

　　removeAttribute('屬性名')　　刪除元素對象上的指定特性

　　hasAttribute('屬性名')　　判斷元素對象是否包含指定特性

　　attributes()　　獲取元素對象指定特性的集合

　　1.讀取屬性(4種)

　　　　element.attributes[下標].value

　　　　var value=element.attributes['屬性名']

　　　　element.getAttributeNode('屬性名').value

　　　　var value=element.getAttribute("屬性名")

　　2.修改屬性(2種)

　　　　element.setAttribute(name, value);//IE8不支持只能：element.attributes['屬性名']=value

　　　　element.setAttributeNode(attrNode);//屬性可以是屬性節點

　　3.移除屬性(2種)

　　　　element.removeAttribute('屬性名');

　　　　element.removeAttributeNode(attrNode);

　　4.判斷元素是否包含屬性(2種)　

　　　　element.hasAttribute('屬性名') //true或false

　　　　element.hasAttributes( );

　　5.Property(屬性) vs Attribute(HTML特性)

　　　　Property: 對象在內存中存儲的屬性可以用 . 訪問

　　　　Attribute: 元素對象在開始標簽中定義的HTML屬性和自定義屬性

　　　　訪問HTML標准屬性時，二者完全一致。如果訪問自定義屬性時，只能用Attribute。

　　示例：修改元素屬性模擬搖號排序

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <title>修改元素的屬性</title>
 5 <meta charset="utf-8" />
 6 <script src="js/3_1.js"></script>
 7 </head>
 8 <body>
 9     <!--1. 使用自定義屬性實現搖號排名-->
10     <ul>
11         <li>Eric</li>
12         <li>Scott</li>
13         <li>Jerry</li>
14         <li>Tom</li>
15         <li>Rose</li>
16         <li>John</li>
17         <li>Smith</li>
18         <li>Andy</li>
19     </ul>
20 </body>
21 </html>

View Code

 1 window.onload=function(){
 2     //獲得ul下所有li
 3     var lis=document.querySelectorAll("ul li");
 4     var nums=[];
 5     //反復生成隨機數，nums.length<lis.length
 6     //    在1到lis.length之間取1個隨機正數n
 7     //    利用nums的indexOf方法，查找是否包含n
 8     //    如果不包含，將n壓入nums中
 9     while (nums.length<lis.length)
10     {
11         var n=parseInt(Math.random()*(lis.length-1+1)+1);
12         if(nums.indexOf(n)==-1){
13             nums.push(n);
14         }
15     }
16     console.log(nums);
17     //將nums中的數字，保存到每個li的data-i自定義屬性中
18     //遍歷nums
19     //    將nums中當前的數字，設置到相同位置的li中的data-i特性上
20     for (var i=0; i<nums.length; i++)
21     {
22         lis[i].setAttribute("data-i",nums[i]);803490
23     }
24     
25     //將類數組最想轉化為標准數組對象
26     lis=Array.prototype.slice.call(lis);
27     //盡讓li的data-i特性相減
28     lis.sort(function(a,b){
29         return a.getAttribute("data-i")-b.getAttribute("data-i");
30         //return a.dataset.i-b.dataset.i;//HTML5中讀取自定義屬性; "data-xxx"-->dataset的集合中，屬性名xxx
31         });
32 
33     //清空所有舊li
34     ul=document.querySelector("ul");
35     ul.innerHTML="";
36     
37     for (var i=0; i<lis.length; i++)
38     {
39         //將li追加到ul中
40         ul.appendChild(lis[i]);
41     }
42     console.log(lis);
43 }

View Code

三、獲取和修改元素的樣式

　　1.獲取或修改內聯樣式：style對象

　　　　設置：style.屬性名="值";　　　

　　　　移出(2種)：
　　　　　　style.屬性名="";
　　　　　　style.removeProperty("CSS屬性名")

　　　　//僅能操作style屬性中定義的內聯樣式,無法獲取或設置樣式表中的樣式

　　2.獲取或修改內聯樣式表中的屬性(3步)

　　　　1. 獲得要修改的樣式表對象：

　　　　var sheet=document.styleSheets[i];//styleSheets:獲得當前網頁的所有樣式表對象

　　　　2. 獲得要修改的cssRule：

　　　　cssRule：樣式表中一個大括號就是一個cssRule對象

　　　　var cssRule=sheet.cssRules[i];//cssRule可能嵌套。

　　　　3. 獲得cssRule中的屬性

　　　　cssRule.style.屬性名

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 rapidxml修改節點的值 XML修改節點值 Dom4j向XML中指定位置添加、刪除、修改節點——（五） Redis集群之修改節點IP zTree異步加載修改節點圖標方法 WinForm------TreeList修改節點圖標和按鈕樣式 DOM節點的修改 js Dom對象的屬性與方法 HTML DOM-->獲取屬性節點 jsp獲取dom節點以及節點的文本值和參數屬性值