DOM读取和修改节点对象属性

一、获取和修改元素间的内容(3种)

　　1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文

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

　　　　　　　　　2.批量替换父元素下所有子元素：parent.innerHTML="所有子元素标签组成的html"

　　2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签)

　　　　textContent 是DOM标准；innerText 是IE8；

　　3.文本节点内容

　　　　nodeValue

　　示例：读取并修改元素内容

window.onload=function(){
//获得ul下所有li
var lis=document.querySelectorAll("ul li");
var nums=[];
//反复生成随机数，nums.length<lis.length
//    在1到lis.length之间取1个随机正数n
//    利用nums的indexOf方法，查找是否包含n
//    如果不包含，将n压入nums中
while (nums.length<lis.length)
{
var n=parseInt(Math.random()*(lis.length-1+1)+1);
if(nums.indexOf(n)==-1){
nums.push(n);
}
}
console.log(nums);
//将nums中的数字，保存到每个li的data-i自定义属性中
//遍历nums
//    将nums中当前的数字，设置到相同位置的li中的data-i特性上
for (var i=0; i<nums.length; i++)
{
lis[i].setAttribute("data-i",nums[i]);803490
}

//将类数组最想转化为标准数组对象
lis=Array.prototype.slice.call(lis);
//尽让li的data-i特性相减
lis.sort(function(a,b){
return a.getAttribute("data-i")-b.getAttribute("data-i");
//return a.dataset.i-b.dataset.i;//HTML5中读取自定义属性; "data-xxx"-->dataset的集合中，属性名xxx
});

//清空所有旧li
ul=document.querySelector("ul");
ul.innerHTML="";

for (var i=0; i<lis.length; i++)
{
//将li追加到ul中
ul.appendChild(lis[i]);
}
console.log(lis);
}

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.属性名