标签：enter HERE har reverse 示例 文件的 mod city lower
Dom的使用document用于调用并操作标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是i1</div>
<a>909</a>
<a>abcdef</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是i1</div>
<a>909</a>
<a>abcdef</a>
<a>123456</a>
</body>
</html>
代码：定义几个标签
上图：
通过TagName获取的是数组，所以后面要根据下标获取标签。
可以使用innerText来获取标签中的文本内容并对其修改。
上图：for循环多个a标签，并将其文本内容修改为777。
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div></div>
<div>
c1
</div>
</div>
<div>
<div></div>
<div id="i1">
c2
</div>
</div>
<div>
<div></div>
<div>
c3
</div>
</div>
</body>
</html>
上图：获取指定id标签数据； 并且使用parentElement获取其父标签
上图：
prentElement.children 获取父标签的子标签
prentElement.previousElementSibling 获取父标签的上一个兄弟标签。
上图：修改标签的className =‘c1‘，默认为空相当于新设定； 部位空，就将className修改成c2。
上图：将其className内容用列表的形式展现
上图：add 新增class名； remove 删除class名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none; /*默认让其隐藏*/
}
.c1{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: cornflowerblue;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style="margin: 0;">
<div>
<input type="button" value="添加" onclick="ShowModel();"> <!--点击添加后，触发函数-->
<table>
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<div id="i1" class="c1 hide"></div>
<div id="i2" class="c2 hide">
<p><input type="text"></p>
<p><input type="text"></p>
<p>
<input type="button" value="取消" onclick="HideModel();">
<input type="button" value="确定">
</p>
</div>
<script>
function ShowModel() {
document.getElementById(‘i1‘).classList.remove(‘hide‘); /*将hide删除，这样就取消效果隐藏*/
document.getElementById(‘i2‘).classList.remove(‘hide‘);
}
function HideModel() {
document.getElementById(‘i1‘).classList.add(‘hide‘); /*将hide添加，隐藏*/
document.getElementById(‘i2‘).classList.add(‘hide‘);
}
</script>
</body>
</html>
上2图：点击添加就会弹出弹框，点击取消就会隐藏。
function ReverseAll() {
var tbody = document.getElementById(‘tb‘);
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0]; /*当前的值是checkbox*/
if(checkbox.checked){
checkbox.checked = false;
}else {
checkbox.checked = true;
}
}
}
代码：
上面的代码占用了多行，其实可以将多行的代码放在一行，这样就可以节省代码空间，使代码文件更小。
代码文件小在网络当中就会传输的快，同时在电脑上加载的也快。
这时为了区分代码，就需要使用分号将不同的代码区分开。
上图：图中标记部分，就是将多行代码放到一行，然后用分号来区分开来，这样就可以节省代码文件的大小空间了。
我们在编码的时候，可以将代码分为多行，这样逻辑上那看来更方便和整洁，但我们也要用分号来区分，因为最后代码在上线的时候会使用上线工具将多行代码自动放在一行，如果没有使用分号的话，将会导致代码异常。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: cornflowerblue;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px;"></div>
<div style="width: 300px">
<div class="item">
<div id="i1" class="header" onclick="ChangeMenu(‘i1‘);">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id="i2" class="header" onclick="ChangeMenu(‘i2‘);">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div id="i3" class="header" onclick="ChangeMenu(‘i3‘);">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id="i4" class="header" onclick="ChangeMenu(‘i4‘);">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid) {
var current_header = document.getElementById(nid); /*点击哪个标签，就会相关标签字符串给传过来*/
/*得到所有item标签*/
var item_list = current_header.parentElement.parentElement.children;
for(var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add(‘hide‘); /*将每个content标签 加上hide标签，这样会全部隐藏*/
}
/*这里将当前传进来的标签移出 hide 标签，这样就将内容展开了*/
current_header.nextElementSibling.classList.remove(‘hide‘);
}
</script>
</body>
</html>
上图：点击哪个菜单，就会展开其内容。
标签：enter HERE har reverse 示例 文件的 mod city lower
原文地址：https://blog.51cto.com/daimalaobing/2445606
