JavaScript DOM杂知识(value/innerHTML/innerText/textContent对比、nodeType/nodeName/nodeValue区别、获取任意类型的属性)

1、value / innerHTML / innerText / textContent

value 是带有value属性的标签拥有的值，一般是单闭合标签的属性(可赋值，也可获取)

innerHTML 是双闭合标签两个标签之间的内容（识别标签）(可赋值，也可获取)

innerText 是双闭合标签两个标签之间的内容（不识别标签）(可赋值，也可获取)(老版本的火狐不支持)

textContent 与innerText属性类似，老版本的火狐支持该属性(可赋值，也可获取)(IE678不支持)

2、nodeType / nodeName / nodeValue

//获取元素节点
var ele = document.getElementById("box");
//获取属性节点
var attr = ele.getAttributeNode("id");
//获取文本节点
var txt = ele.firstChild;
console.log("我是nodeType值");
console.log(ele.nodeType);//1
console.log(attr.nodeType);//2
console.log(txt.nodeType);//3
console.log("我是nodeName值");
console.log(ele.nodeName);//div
console.log(attr.nodeName);//id
console.log(txt.nodeName);//#text
console.log("我是nodeValue值");
console.log(ele.nodeValue);//null
console.log(attr.nodeValue);//box
console.log(txt.nodeValue);//我是文本

3、获取任意类型的CSS样式的属性值

div.style.width; //只能获取行内样式
div.currentStyle.width; //旧版本IE浏览器中
window.getComputedStyle(div,null).width; //所有属性都可以获取

用中括号的形式也可以，这样写的好处是可以在中括号里传变量

div.style[“width”];
div.currentStyle[“width”];
window.getComputedStyle(div,null)[“width”];

currentStyle 和 getComputedStyle 获取到的都是一个保存了很多计算后样式属性的对象，且有兼容问题。

currentStyle 属于元素对象：HTMLElement.prototype.currentStyle