什么是HTML DOM？
1.HTML Document Object Model（文档对象模型）
2.HTML DOM定义了访问和操作HTML的标准方法
3.HTML DOM把HTML文档呈现为带有元素，属性和文本的树结构（树节点）
一。获取元素节点 （当获取多个元素时，存为数组）
1.直接查找：
<div class="c1">
<div id="i1">
<a href="" class="c2-1" name="XXX"></a>
<a href="" class="c2-2" name="XXX"></a>
</div>
</div>
document.getElementById(“i1”) id document.getElementsByTagName(“a”) 标签 document.getElementsByName(“XXX”) name document.getElementsByClassName(“c2-1”) class
2.间接查找
<div>
<div id="i1">
<a href="" class="c1-1">aaaaa</a>
<a href="" class="c1-2">bbbbb</a>
</div>
</div>
<div>
<div id="i2">
<a href="" class="c2-1">ccccc</a>
<a href="" class="c2-2">ddddd</a>
</div>
</div>
parentElement // 父节点标签元素
var i1=document.getElementById(“i1”)
i1.parentElement
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二。属性节点的操作
1.对节点的类进行操作： 12.6
tag.className => 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
2.获取文本节点的值：
innerText innerHtml value获取当前选中的value值 1.input value获取当前标签中的值 2.select （selectedIndex） 3.textarea innerHTML 给节点添加html代码： 该方法不是w3c的标准，但是主流浏览器支持 tag.innerHTML = “<p>要显示内容</p>”;
=====================================================================
表格案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="selectALL();"/>
<input type="button" value="取消" onclick="cancelALL();"/>
<input type="button" value="反选" onclick="ReverseALL();"/>
<table border="1">
<thead>
<tr>
<th>操作</th>
<th>IP</th>
<th>端口</th>
</tr>
<tbody id="info">
<tr>
<td><input type="checkbox"/></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</thead></table>
</body>
<script>
function selectALL() {
var myTodby = document.getElementById("info");
var myTrs = myTodby.children;
for(var i=0;i<myTrs.length;i++){
var myInput=myTrs[i].children[0].children[0];
myInput.checked = true;
}
}
function cancelALL() {
var myTodby = document.getElementById("info");
var myTrs = myTodby.children;
for (var i = 0; i < myTrs.length; i++) {
var myInput = myTrs[i].children[0].children[0];
myInput.checked = false;
}
}
function ReverseALL() {
var myTodby = document.getElementById("info");
var myTrs = myTodby.children;
for (var i = 0; i < myTrs.length; i++) {
var myInput = myTrs[i].children[0].children[0];
if(myInput.checked){
myInput.checked = false;
}else {
myInput.checked = true;
}
}
}
</script>
</html>
=====================================================================
模态框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
position: fixed;
top:0;
left: 0;
right: 0;
bottom:0;
background-color:black;
opacity: 0.6;
}
.info{
position: fixed;
top: 50px;
left: 400px;
right: 400px;
background-color: white;
height: 100px;
200px;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div>
<input type="button" value="点击" onclick="showModel()">
</div>
<!--遮罩层-->
<div class="one hide"></div>
<div class="info hide">
<p>
<input type="text"/>
<input type="text"/>
<input type="button" value="确定">
<input type="button" value="取消" onclick="hideModel()">
</p>
</div>
</body>
<script>
function showModel() {
var myone = document.getElementsByClassName("one")[0];
var info = document.getElementsByClassName("info")[0];
myone.classList.remove("hide");
info.classList.remove("hide");
}
function hideModel() {
var myone = document.getElementsByClassName("one")[0];
var info = document.getElementsByClassName("info")[0];
myone.classList.add("hide");
info.classList.add("hide");
}
</script>
</html>