基础知识：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
text-indent: 20px;
}
</style>
</head>
<body>
<div id="i1">documnent 练习！！</div>
<div id="i2">dom element:元素</div>
<div>1、找到标签</div>
<li>获取单个元素：documnent.getElementById('id')</li>
<li>获取多个元素（列表）：document.getElementsByClassNname('c1')</li>
<li>获取多个元素（列表）：document.getElementsByTagNname('div')</li>
<div>a. 直接找</div>
<li>document.getElementById 根据id获取标签</li>
<li>document.getElementByName 根据name属性获取标签集合</li>
<li>document.getElementByClassName 根据class属性获取标签集合</li>
<li>document.getElementByTagName 根据标签名称获取标签集合</li>
<br/>
<div >b、间接找</div>
<li>parentElement //父节点标签元素</li>
<li>children //所有子标签</li>
<li>firstElementChild //第一个子标签元素</li>
<li>nextElemenSibling //下一个兄弟标签元素</li>
<li>perviousElementSibling //上一个兄弟标签元素</li>
<li></li>
<li></li>
<br/>
<div>2、操作标签</div>
<div>a、innerText</div>
<li>获取标签中的文本内容。格式：标签.innerText</li>
<li>对标签内部文本进行重新复制。格式：标签.innerText = "" </li>
<br/>
<div>b、 className 样式</div>
<li>tag.className 直接整体做操作</li>
<li>tag.classList.add('样式名') 添加指定样式</li>
<li>tag.classList.remove('样式名') 删除指定样式</li>
<script>
//创建一个函数 function fun（）{}
function f1(){
//根据ID获取指定标签的内容，定于局部变量接收
var tag = document.getElementById('i1');//var代表局部变量
// 获取标签内部的内容
var content=tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content
// console.log(content);
}
//创建一个定时器,每两秒执行一次
setInterval("f1();",1000)
function fun1(){
// 定义一个数组
var array = [11,11,12,13,14,15]
// 字典
var dic = {'k1':'v1','k2':"v2"}
alert(array)
}
setInterval("fun1()",2000)
</script>
</body>
</html>模态对话框实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 300px;
height: 150px;
background-color: white;
position: fixed;
left: 50%;
top: 75%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style="margin: 0;">
<div>
<input type="button" value="添加" onclick="show()">
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>端口号</th>
</tr>
</thead>
<tbody>
<tr>
<td>0.0.0.0</td>
<td>800</td>
</tr>
<tr>
<td>1.0.0.0</td>
<td>810</td>
</tr>
</tbody>
</table>
</div>
<!-- 遮罩层 --->
<div id="i1" class="c1 hide" ></div>
<!-- end-->
<!-- 弹出框-->
<div id="i2" class="c2 hide" >
<p>host:<input type="text" name="host"></p>
<p>port:<input type="text" name="port"></p>
<input type="button" value="取消" onclick="hide()">
<input type="button" value="提交" onclick="hide()">
</div>
<!-- end -->
<script>
function show() {
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
}
function hide() {
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
</script>
</body>
</html>