js中的DOM操作
一、前言
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。
二、DOM节点
DOM节点分为三大类:元素节点、属性节点、文本节点;
由DOM树我们可以看到,文本节点、属性节点属于元素节点的子节点。
文本节点和属性节点就像是这颗DOM树的果子,而元素节点就是树枝,所以,在操作时,一定要要记顺枝摘果:得先取到元素节点!然后再操作子节点!!
要先取到元素节点!要先取到元素节点!要先取到元素节点!重要的事情说三遍!
2.1 获取元素节点
首先,可以用使用getElement系列方法,取到元素节点。
下面列出一些常用的 DOM 对象方法:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1");
console.log(btn1);
var is = 0;
btn1.onclick =function (){
is++;
if(is%2!=0){
var div = document.getElementsByClassName("div");
div[0].style = "background-color:red;color:yellow;"
// div[0].innerText = "hehe";
div[0].innerHTML = "<h2>hehe</h2>";
}else {
var div = document.getElementsByClassName("div");
div[0].style = "background-color:blue;color:white;"
div[0].innerHTML = "<h2>hahaha</h2>";
}
}
}
</script>
</head>
<body>
<button id = "btn1" class = "btn" onclick="but()">这是一个按钮1</button>
<div class="div">hahaha</div>
</body>
</html>
getElementById:通过id取到唯一节点。如果id重名,只能取到第一个。
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn1");
console.log(btn1);
console.log(btn2);
获取元素节点时,一定要注意:获取节点的语句,必须在DOM渲染完成后执行。
可以有两种方式实现:①将JS代码写在body之后;②将代码写到window.onload函数之中;
后面三个getElements,取到的是数组格式。不能直接添加各种属性,而应该取出数组的每一个单独操作。
例:
getElementsByName(“name1”)[0].onclick = function;
2.2 查看设置属性节点
查看和设置属性节点,必须先取到元素节点,才能使用;
1、查看属性节点:getAttribute("属性名");
2、设置属性节点:setAttribute("属性名","新属性值");
var btn1 = document.getElementById("btn1");
var classes = btn1.getAttribute("class“);
btn1.setAttribute("class","btn1");
console.log(classes);
setAttribute();函数在IE浏览器中可能会存在兼容性问题。比如在IE 中不支持试用这个函数设置style/onclick
等样式属性和事件属性。
我们推荐使用符号法替代上述函数:
eg:dom1.style.color="" dom1.οnclick="" dom1.src=""
【总结-js修改DOM节点的样式】
1、使用setAttribute()设置class和style属性,但是存在兼容性问题,不提倡;
div.setAttribute(“class”,“cls1”);
2、使用.className直接设置class类,注意是className而不是.class:
div.className = “cls1”;
3、使用.style设置单个属性,注意属性名要用驼峰命名法:
div.style.backgroundColor = “red”;
4、使用.style或.style.cssText设置多个样式属性:
div.style = “background-color:red;color:yellow;”
div.style = “background - color:red;color:yellow” √
2.3查看设置文本节点
1、.innerText:取到或设置节点里面的文字内容;
.innerHTML:取到或设置节点里面的HTML代码;
.tagName:取到当前结点的标签名。标签名全部大写
var div = document.getElementsByClassName("div");
div[0].style = "background-color:red;color:yellow;"
// div[0].innerText = "hehe";
div[0].innerHTML = "<h2>hehe</h2>";
三、表格元素
【表格对象】
1、rows属性:返回表格中的所有行,是一个数组格式;
2、insertRow(index):在指定位置插入一行,index从0开始;
3、deleteRow(index):删除指定的一行,index从0开始;
【行对象】
1、cells属性:返回这一行中的所有单元格,是一个数组格式;
2、rowIndex属性:返回这一行,是表格中的第几行,从0开始;
3、insertCell(index):在这一行的指定位置,插入一个单元格,index从领开始;
4、deleteCell(index):删除这一行的指定单元格,index从0开始
【单元格对象】
1、cellIndex属性:返回这个单元格是这一行的第几个单元格
2、innerText inner HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 400px;
border-collapse: collapse;
}
td,th{
border: solid 1px black;
}
tr:last-of-type{
color: red;
}
tr:frst-of-type{
background-color: #565656;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>幸福从天而降</td>
<td>18.5</td>
</tr>
<tr>
<td>活在当下</td>
<td>45.5元</td>
</tr>
<tr>
<td>人性的弱点</td>
<td>65.5元</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>88.0元</td>
</tr>
<tr>
<td>合计</td>
<td>100元</td>
</tr>
</table>
<br />
<button onclick="addRow()">增加一行</button>
<button onclick="delRow()">删除最后一行</button>
<button onclick="copyRow()">复制最后一行</button>
<button onclick="changeStyle()">修改标题样式</button>
<button onclick="getSum">求和</button>
<script type="text/javascript">
var table = document.getElementById("table");
function addRow () {
var index = table.rows.length-1;
var newRow = table.insertRow(index);
var name = prompt("请输入书名");
var cell0 = newRow.insertCell(0);
cell0.innerText = name;
var money = parseFloat(prompt("价格"));
var cell1 = newRow.insertCell(1);
cell1.innerText = money.toFixed(1)+"元";
}
function delRow () {
if (table.rows.length>2) {
table.deleteRow(table.rows.length-2);
} else{
alert("没有了");
}
}
function copyRow () {
var cloneRow = table.rows[table.rows.length-2];
if (table.rows.length>2) {
var newRow = table.insertRow(table.rows.length-1);
var cell0 = newRow.insertCell(0);
cell0.innerText = cloneRow.cells[0].innerText;
var cell1 = newRow.insertCell(1);
cell1.innerText = cloneRow.cells[1].innerText;
} else{
alert("没有可复制的行了!!");
}
}
function changeStyle () {
var color = prompt("请输入十六进制颜色值");
table.rows[0].style = "background-color:"+color;
}
function getSum () {
var rows = table.rows;
if (rows.length<=2) {
alert("没有可以计算的和");
rows[rows.length-1].cells[1].innerText = "0元";
return;
} else{
var sum = 0;
for (var i = 1; i<rows.length-1; i++) {
var cells = rows[i].cells;
sum += parseFloat(cells[cells.length-1].innerText);
}
rows[rows.length-1].cells[1].innerText = sum + "元";
}
}
window.onload = function () {
getSum();
}
</script>
</body>
</html>