通过 id 查找 HTML 元素
var x=document.getElementById("intro");
通过标签名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
document.getElementById(id).innerHTML=新的 HTML内容
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值、
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
常见DOM操作
查看节点
创建和增加节点
删除和替换节点
获取属性节点
Attributes[“属性名”]
访查看/修改属性节点
getAttribute("属性名")
setAttribute("属性名","属性值")
创建和增加节点
创建和增加节点 的方法
createElement（）：创建节点
appendChild（）：末尾追加方式插入节点
insertBefore（）：在指定节点前插入新节点
cloneNode（）：克隆节点
删除和替换节点
removeChild（）：删除节点
replaceChild( ) ：替换节点
实现如下效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格的增删改查</title>
<style>
</style>
</head>
<body>
<div class="box">
<table border="1" width="300">
<thead id="mytitle">
<tr>
<td>书名</td>
<td>价格</td>
</tr>
</thead>
<tbody id="myList">
<tr>
<td>看得见风景的房间</td>
<td>￥30.00</td>
</tr>
<tr id="Title2">
<td>我是你爸爸1</td>
<td>￥70.00</td>
</tr>
<tr id="lastTitle">
<td>我是你爸爸2</td>
<td>￥70.00</td>
</tr>
<tr >
<td>我是你爸爸3</td>
<td>￥70.00</td>
</tr>
</tbody>
</table>
<button onclick="increaseFn()">增加一行</NOtton>
<button onclick="deleteFn()">删除第二行</NOtton>
<button onclick="modifyFn()">修改表格样式</NOtton>
<button onclick="copyFn()">复制最后一行</NOtton>
</div>
</body>
<script type="text/javascript">
//增加
function increaseFn(){
var arr=document.getElementById("myList");
var row = arr.insertRow(4);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "亲爱的baba";
cell2.innerHTML = "18.5";
// var arr = document.getElementById("poemDiv1");s
}
//删除 ok
function deleteFn(){
//获取删除的列表
var list=document.getElementById("myList");
//实现从第二行开始删除
list.removeChild(list.childNodes[2]);
}
//修改表格样式
function modifyFn(){
document.getElementById("mytitle").style["background-color"]="#ccc";
document.getElementById("mytitle").style.fontSize="20px";
//居中(textAlign)
document.getElementById("mytitle").style.textAlign="center";
}
//复制最后一行
function copyFn(){
var copya =document.getElementById("lastTitle");
var cln = copya.cloneNode(true);
document.getElementById("myList").appendChild(cln);
}
</script>
</html>
