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代码。