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)">>></button> 35 <button onclick="move(this)">></button> 36 <button onclick="move(this)"><</button> 37 <button onclick="move(this)"><<</button> 38 </div> 39 <select id="sel" size="5" multiple> 40 </select> 41 </body> 42 </html>
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==">>") //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=="<<") 30 {//如果btn的内容是<< 31 unsel=unsel.concat(sel); 32 unsel.sort(); 33 sel=[]; 34 //console.log(unsel); 35 }else if (btn.innerHTML==">") 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=="<") 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 }
二、获取、添加、删除、修改元素属性
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>
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 }
三、获取和修改元素的样式
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.属性名
