DOM树节点：
分为三大类，分别为元素节点、文本节点、属性节点
文本节点、属性节点为元素节点的子节点，通过getElement系列方法可以取到元素节点
所有节点属性命名使用驼峰法则
HTML代码：
<button id="btn1" onclick="getById()">通过id修改</button>
<button id="btn2" onclick="getByName()">通过class修改</button>
<button id="btn3" onclick="getByTagName()">通过tagname修改</button>
<button id="btn4" onclick="getByClassName()">通过name修改</button>
<div id="div1" class="div1" name="div1">div文字</div>
<!--<div id="div1" class="div1" name="div1">div文字</div>
<div id="div1" class="div1" name="div1">div文字</div>
<div id="div1" class="div1" name="div1">div文字</div> -->
访问指定节点的方法：
document.getElementById(); //通过id获取唯一的节点,多个同名id只会取第一个
var a=1;
function getById(){
if (a==1){
var div1Style = document.getElementById("div1");
div1Style.style.backgroundColor="royalblue"; //修改属性节点
var div1 = document.getElementById("div1");
div1.innerHTML="哈哈哈"; //重置修改div中的HTML代码
a=2;
}else if(a==2){
var div1Style = document.getElementById("div1");
div1Style.style.backgroundColor="red"; //修改属性节点
a=1;
}
}
document.getElementsByClassName(); //通过ClassName取到一个数组，包含1到多个（元素）节点
使用方式:通过循环，取到每一个节点，循环次数：从0开始，到数组.length-1
function getByClassName(){
var div1Style = document.getElementsByClassName("div1");
div1Style[0].style.backgroundColor="royalblue"; //修改属性节点
var div1 = document.getElementsByClassName("div1");
div1[0].innerHTML="哈哈哈"; //重置修改div中的HTML代码
console.log(div1);
}
document.getElementsByName(); // 通过name取到一个数组，包含1到多个（元素）节点
function getByName(){
var div1Style = document.getElementsByName("div1");
div1Style[0].style.backgroundColor="royalblue"; //修改属性节点
var div1 = document.getElementsByName("div1");
div1[0].innerHTML="哈哈哈"; //重置修改div中的HTML代码
console.log(div1);
// var a=document.getElementsByName("div1").length;
// for (i=0;i<a;i++) {
// var div1Style = document.getElementsByName("div1");
// div1Style[i].style.backgroundColor="royalblue";
// }
}
document.getElementsByTagName(); // 通过Tagname取到一个数组，包含1到多个（元素）节点
function getByTagName(){
var div1Style = document.getElementsByTagName("div");
div1Style[0].style.backgroundColor="royalblue"; //修改属性节点
var div1 = document.getElementsByTagName("div");
div1[0].innerHTML="哈哈哈"; //重置修改div中的HTML代码
console.log(div1);
}
除了getElementById，其他三个都是elements（即复数形式）：getElementsByClassName、getElementsByName、getElementsByTagName，取到的是一个数组，包含多个元素；使用方式:通过循环，取到每一个节点，循环次数：从0开始，到数组.length-1（循环遍历）；例：
<input type="checkbox" name="input" value="苹果"/><span onclick="func0(0)">苹果</span> <input type="checkbox" name="input" value="菠萝" /><span onclick="func0(1)">菠萝</span> <input type="checkbox" name="input" value="香蕉" /><span onclick="func0(2)">香蕉</span> <input type="checkbox" name="input" value="西瓜" /><span onclick="func0(3)">西瓜</span> <button id="btna" onclick="checkbox()">选中的水果</button>
function checkbox(){ var input = document.getElementsByName("input"); var choose=""; for (i=0;i<input.length;i++) { if (input[i].checked==true) { choose+=input[i].value+" "; } } if (choose=="") { alert("未选择"); return; } alert(choose); }
JS修改样式总结：
1、classname:为元素设置一个新的class名字
div1.className="div2";
2、.style：为元素设置一个新的样式，注意驼峰命名法
div1Style.style.backgroundColor="royalblue";
3、.style(.cssText) ：为元素同时修改多个样式
div1.style..cssText="200px; height:200px; ";
以上都是修改行内样式表，获取到的也是行内样式表
document.styleSheets[0].rules[0].style.cssText="" //获取样式表中的样式
通过修改classname修改元素的样式:（最常用）
function getByClassName(){
var div1Style = document.getElementsByClassName("div1");
div1[0].className="div2";
}
<button id="btn1" onclick="getById()">通过id修改</button>
<div id="div1" class="div1" name="div1">div文字</div>
.div1{
100px;
height: 100px;
background-color: red;
}
.div2{
200px;
height: 200px;
background-color: yellowgreen;
}
getAttribute() 方法：
document.getElementsByTagName("a")[0].getAttribute("target");
setAttribute() 方法：两个值：属性名称，属性值
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
function getAttr(){
var img1= document.getElementById("img1");
alert(img1.getAttribute("src"));
}
function setAttr(){
var img1= document.getElementById("img1");
img1.setAttribute("src","../../img/mask_text_bg.png");
img1.setAttribute("title","通过setAttribute设置了title");
img1.setAttribute("style"," 100px; height: 100px;");
}
<button id="btn5" onclick="getAttr()">通过getAttr</button>
<button id="btn6" onclick="setAttr()">通过name修改</button>
<img src="../../img/HBuilder.png" id="img1" />
查看元素节点：
tagName属性：获取节点的标签名
innerHTML:设置或者获取节点内部的所有HTML代码
innerText：设置或者获取节点内部的所有文字
获取层次节点的常用属性：
1、.childNodes:获取元素的所有子节点，返回一个数组，包括元素节点、文本节点
2、.firstChild：获取元素的第一个子节点
3、.lastChild：获取元素的最后一个子节点
4、.ownerDocument：获取当前文档根节点，在HTML文档中为document节点
5、.parentNode:获取当前节点的父节点
6、.previousSibling：获取当前节点的前一个兄弟节点
7、.nextSibling：获取当前节点的后一个兄弟节点
注：上述属性均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应element属性，
例如：firstChild→firstElementChild
8、.attribute：获取当前元素节点的所有属性节点
创建和增加一个节点的方法：
1、.createElement("标签名") ：创建一个新节点，需配合setAttribute()方法设置节点的相关属性
2、.appendChild(节点名) ：在某元素的最后追加一个新节点
3、.insertBefore(新节点名，目标节点名) ：将新节点插入到目标节点之前
4、.cloneChild(true/false) ：克隆节点，需要克隆哪个就用哪个去调用克隆对象，
括号内传递参数为true或false，true表示为克隆当前节点及所有子节点，false表示只克隆当前节点，不克隆子节点
<ul id="ul1">
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
<ul id="ul2">
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
<button onclick="appendImg()">在最后插入一个图片</button>
<button onclick="insertImg()">在两个ul之间插入一个图片</button>
<button onclick="copyUl()">copy一个ul2 </button> <br />
function appendImg(){
var img = document.createElement("img"); //创建一个图片节点
img.setAttribute("src","../../img/HBuilder.png"); //给img节点设置属性
document.body.appendChild(img); //将设置好的img节点追加到body最后
}
function insertImg(){
var img = document.createElement("img");
img.setAttribute("src","../../img/HBuilder.png");
var ul2 = document.getElementById("ul2");
document.body.insertBefore(img,ul2); //在两个ul之间插入图片
}
function copyUl(){
var ul2 = document.getElementById("ul2");
var ul2Clone = ul2.cloneNode(true);
var btn = ul2.nextElementSibling;
document.body.insertBefore(ul2Clone,btn);
// console.log(ul2Clone);
}
删除和替换节点的方法：
1、.removeChild() 从父容器中删除指定节点
2、.replaceChild() 用新节点替换指定节点，
如果新节点为页面中已有节点会将此节点删除后替换到指定节点
<ul id="ul1">
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
<ul id="ul2">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<button onclick="delUl1()">删除ul1</button>
<button onclick="repUl2()">ul1替换ul2</button>
function delUl1(){
var ul1 = document.getElementById("ul1");
if (ul1) {
document.body.removeChild(ul1);
} else{
alert("UL1已经被删除");
}
}
function repUl2(){
var ul1 = document.getElementById("ul1");
var ul2 = document.getElementById("ul2");
document.body.replaceChild(ul1,ul2);
}
table 表格对象：
rows[] 返回表格中的所有行的一个数组
insertRow(index) 在表格的第index+1行插入一个新行
deleteRow(index) 删除表格的第index+1行
表格的行对象：
cells 属性：返回当前行中的所有单元格的一个数组
rowIndex ：返回当前行在表格中索引顺序，从0开始
insertCell() ：在当前行的第index+1处插入一个单元格
deleteCell() ：删除当前行第index+1处的一个单元格
表格的单元格对象：
cellIndex ：返回单元格在该行的索引顺序，从0开始
innerHTML属性：返回或设置当前单元格中的HTML代码
align 属性：设置当前单元格的水平对齐方式
className ：设置单元格的class名称
<table id="t1">
<tr>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>嘿嘿嘿</td>
<td>111</td>
</tr>
<tr>
<td>哈哈哈</td>
<td>222</td>
</tr>
<tr>
<td>呵呵呵</td>
<td>333</td>
</tr>
<tr>
<td>合计</td>
<td></td>
</tr>
</table> <br />
<button onclick="addRow()">增加一行</button>
<button onclick="delRow()">删除最后一行</button>
<button onclick="changeTitle()">修改标题样式</button>
<button onclick="copyRow()">复制最后一行</button>
<button onclick="sum()">合计</button>
function addRow(){
var table = document.getElementById("t1");
var newRow = table.insertRow(table.rows.length-1); //在表格最后一个行之前增加一个新行
var cell0 = newRow.insertCell(0);
cell0.innerHTML = "hhh";
var cell1 = newRow.insertCell(1);
cell1.innerHTML = "555";
// for (i=0;i<5;i++) {
// var celli = newRow.insertCell(i);
// celli.innerHTML = "hhh";
// }
sum();
}
function delRow(){
var table = document.getElementById("t1");
if (table.rows.length>2) {
var delRow = table.deleteRow(table.rows.length-2);
} else{
alert("删没了");
}
sum();
}
function changeTitle(){
var table = document.getElementById("t1");
var color = prompt("输入颜色：");
table.rows[0].style = "background-color:"+color;
}
function copyRow(){
var table = document.getElementById("t1");
var copyRow = table.rows[table.rows.length-2].cloneNode(true);
var heji = table.rows[table.rows.length-1];
if (table.rows.length>2) {
table.getElementsByTagName("tbody")[0].insertBefore(copyRow,heji);
//由于浏览器自动将表格的tr包裹在tbody中，所以tr实际并非table的子节点，故需取到tbody进行插入
}else{
alert("没有可复制的行");
}
sum();
}
function sum(){
var table = document.getElementById("t1");
var rows = table.rows;
if (rows.length<=2) {
alert("没有可计算的行");
return;
}
var sum = 0;
for (i=1;i<=rows.length-2;i++) {
var cells = rows[i].cells;
sum += parseFloat(cells[cells.length-1].innerText);
}
rows[rows.length-1].cells[1].innerHTML= sum.toFixed(2) +"元";
}