DOM 属性操作

1 属性节点

2 attribute操作

3 value获取值操作

4 class的操作

5 指定CSS操作

---

1、属性节点

//获取文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
 
//设置文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText="1"   // innerText不识别html节点
divEle.innerHTML="<p>2</p>" //innerHTML识别html节点

2、attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") //赋值
divEle.getAttribute("age") //取值
divEle.removeAttribute("age") //删除属性
 
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

3、value获取值操作

//语法：
elementNode.value
//适用于以下标签：
.input
.select
.textarea
 
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

4、class的操作

className //获取所有样式类名(字符串)
 
classList.remove(cls) // 删除指定类
classList.add(cls)  //添加类
classList.contains(cls)  //存在返回true，否则返回false
classList.toggle(cls)  //存在就删除，否则添加

5、指定CSS操作

//JS操作CSS属性的规律：
 
//1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
 
//2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily