javaScript 操作节点(Element)、设置css样式

操作节点(Element)：

firstElementChild跟firstChild的区别在于， 有Element代表元素，firstElementChild是元素选择器，非元素他是不会选择到的，如文本节点之类的。而firstChild是所有都选择所有节点，包括文本。IE8以上的不支持元素选择器。

下面是节点的类型↓

元素节点-1   属性节点-2  文本节点-3  注释节点-8  document-9   DocumentFragment-11
这个可以通过节点类型(nodeType)来获取，后期一般用这个来判断该对象是什么类型

节点的常用四个属性：
nodeName  → 元素的标签名，以大写形式表示，只读。

nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。

入股节点是属性节点，则 nodeName 属性返回属性的名称。

对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

nodeValue  → 获取Text节点或Comment节点的文本内容，可读写
nodeType  该节点的类型，只读。返回的会根据不同类型返回不同的数值（数值在上面有写）

设置CSS样式：

当我们获取到当前标签或对象时， 可以通过.style后再点出其需要设置的样式，如
div. style. backgroundColor="#fff000"  
上面这个代表着 直接在页面内设置样式
还可以 通过更改其所属的class来更改其样式(等于直接换了一个css的类选择器一样)
div .className="类选择器的名称";

获取CSS样式：

var catchCSS= div.style.backgroundColor；    ←这代表获取当前div的背景颜色，注意：这 只能获取到内联样式的，外部样式无法获取。
若是出现IE8以前的版本上面的获取方法会有 兼容性问题。所以可以采用下面的方法进行获取
var catchCSS=div. currentStyle.backgroudColor;  

CSS样式中的 display除了可以改变元素为行内元素或者块元素以外，还能将该 对象隐藏(none)

下面是代码例子：