JavaScript的DOM节点操作

DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
查看元素节点:

使用getElement系列方法.

通过ID来查看元素属性
var li = document.getElementById("first");  
通过类名来查看元素属性
var lis1 = document.getElementsByClassName("cls");
通过名字来查看元素属性
var lis2 = document.getElementsByName("name");
通过标签名来查看元素属性
var lis3 = document.getElementsByTagName("li");

通过querySelector系列方法
传入一个选择器名称，返回第一个找到的元素。 通常用于查找ID：
var dq1 = document.querySelector("#id");
 传入一个选择器名称，返回所有找到的元素，无论找到几个，都返回数组格式。这种方法比较全能，不管什么属性都可以准确地找到。 
var dqs1 = document.querySelectorAll("#div1 li");
 

JS修改CSS的多种方式
 使用setAttribute设置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");

使用.className添加一个class选择器
document.getElementById("first").className = "class1";

使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
document.getElementById("first").style.fontSize = "18px";

使用.style 或 .style.cssText 添加一串行级样式：
document.getElementById("first").style.cssText = "color:red;";

查看/设置文本节点
.innerHTML: 取到或设置一个节点中的HTML代码。
.innerText: 取到或设置一个节点中的文本，不能设置HTML代码。