1.直接查找元素
document.getElementById #根据ID获取一个标签
document.getElementsByName #根据name属性获取标签集合
document.getElementsByClassName #根据class属性获取标签集合
document.getElementsByTagName #根据标签名获取标签集合
2.间接查找元素
parentElement # 父节点标签元素
children # 所有子标签
firstElementChild # 第一个子标签元素
lastElementChild # 最后一个子标签元素
nextElementtSibling # 下一个兄弟标签元素
previousElementSibling # 上一个兄弟标签元素
3.操作DOM 3.1 innerText修改标签页面上的内容
<div id="d1">d1</div>
<script>
var tag=document.getElementById('d1');
var content=tag.innerText;
console.log(content);
</script>
3.2className修改标签的class样式
<div id="d1" class="c1">d1</div>
<script>
var tag=document.getElementById('d1');
var content=tag.className;
tag.className='c2'
console.log(tag.className);
</script>
3.3classList修改标签的class样式
<div id="d1" class="c1">d1</div>
<script>
var tag=document.getElementById('d1');
var content=tag.classList;
//class增加一个c2
content.add('c2');
console.log(content);
//class减掉一个c1
content.remove('c1');
console.log(content);
</script>
4.选择菜单
主界面
弹出框
<style>
.hide{
display: none;
}
.c1{
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
position: fixed;
width: 500px;
height: 300px;
background-color:white ;
z-index: 10;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -300px;
}
</style>
</head>
<body>
<!--页面内容开始-->
<div class="t_body">
<input type="button" value="添加" onclick="show_model()"/>
<input type="button" value="全选" onclick="choose_all()"/>
<input type="button" value="取消" onclick="cancle_all()"/>
<input type="button" value="反选" onclick="reverse_all()"/>
<table>
<thead>
<tr>
<th>选择</th><th>姓名</th><th>密码</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>mxm</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>ytm</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>wwqe</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
<!--页面内容结束-->
<!--遮罩开始-->
<div id="i1" class="c1 hide"></div>
<!--遮罩结束-->
<!--弹出框开始-->
<div id="i2" class="c2 hide">
<p>添加人员</p>
<p><span>用户名：</span><input type="text" /></p>
<p><span>密码：</span><input type="text" /></p>
<p><span>确认密码：</span><input type="text" /></p>
<p><input type="button" value="取消" onclick="hide_model()"><input type="button" value="确认"></p>
</div>
<!--弹出框结束-->
<script>
//显示弹出框
function show_model() {
document.getElementById("i1").classList.remove("hide");
document.getElementById("i2").classList.remove("hide");
}
//隐藏弹出框
function hide_model() {
document.getElementById("i1").classList.add("hide");
document.getElementById("i2").classList.add("hide");
}
//全选
function choose_all() {
//获取tbody标签
var tbody=document.getElementById("tb");
//获取tbody下的所有tr
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
//便利tbody下的所有tr
var current_tr=tr_list[i];
//取得tr下的td标签下的input标签
var checkbox=current_tr.children[0].children[0];
//设置选中checked为真
checkbox.checked=true;
}
}
//取消
function cancle_all() {
//获取tbody标签
var tbody=document.getElementById("tb");
//获取tbody下的所有tr
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
//便利tbody下的所有tr
var current_tr=tr_list[i];
//取得tr下的td标签下的input标签
var checkbox=current_tr.children[0].children[0];
//设置选中checked为假
checkbox.checked=false;
}
}
//反选
function reverse_all() {
//获取tbody标签
var tbody=document.getElementById("tb");
//获取tbody下的所有tr
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
//便利tbody下的所有tr
var current_tr=tr_list[i];
//取得tr下的td标签下的input标签
var checkbox=current_tr.children[0].children[0];
//设置选中checked为假
if(checkbox.checked){
checkbox.checked=false;
}else {
checkbox.checked=true;
}
}
}
</script>
5.左侧菜单栏
<head>
<style>
.hide{
display: none;
}
.title{
background-color:#ff6600;
width: 120px;
height: 35px;
line-height: 35px;
}
</style>
</head>
<body>
<div class="11">
<div class="c">
<div id="i1" class="title" onclick="change('i1');">菜单1</div>
<div class="content">
<div>子菜单</div>
<div>子菜单</div>
<div>子菜单</div>
</div>
</div>
<div class="c">
<div id="i2" class="title" onclick="change('i2');">菜单2</div>
<div class="content hide">
<div>子菜单</div>
<div>子菜单</div>
<div>子菜单</div>
</div>
</div>
<div class="c">
<div id="i3" class="title" onclick="change('i3');">菜单3</div>
<div class="content hide">
<div>子菜单</div>
<div>子菜单</div>
<div>子菜单</div>
</div>
</div>
<div class="c">
<div id="i4" class="title" onclick="change('i4');">菜单4</div>
<div class="content hide">
<div>子菜单</div>
<div>子菜单</div>
<div>子菜单</div>
</div>
</div>
</div>
<script>
function change(pid) {
//取得当前点击的元素标签
var title=document.getElementById(pid);
//取得所有上级的上级的子标签<div class="c">
var list_c=title.parentElement.parentElement.children;
//取得<div class="content hide">
for(var i=0;i<list_c.length;i++){
var current_item=list_c[i];
//设置所有list_hide的class添加hide
current_item.children[1].classList.add('hide');
}
//设置点击元素的同级div去掉hide样式
title.nextElementSibling.classList.remove('hide');
}
</script>
