DOM常用的一些属性及案例
一、classname
①给tag标签新加c2属性
tag.className='c2'
②给tag标签再加一个c3
tag.classList.add('c3')
③将c3属性去除
tag.classList.remove('c3')
二、绑定函数
<div onclick="f();">点我</div> //点击此标签执行此函数
<script>
function f() {
}
</script>
三、DOM选择器
innerText //只是获取内部内容仅仅文本，忽略标签//
innerHTML //获取标签内部所有东西//
innerText="内容" //赋值时也相同，innerText赋值时把内容当作字符串来处理，innerHTML则为其中内容
value 对于input生效，用来获取其中的值
对于select生效，用来获取value值 注意此时id写在select中
对于textarea生效，用来获取值
selectedindex 通过修改此值来修改选项
checkbox.checked //查看按钮勾选状态
checkbox.checked=true;//勾选
四、全选反选取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.back_color{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 10;
}
.windows_color{
background-color: red;
width: 500px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 11;
}
</style>
</head>
<body style="margin: 0">
<div>
<input type="button" value="添加" onclick="hide_1();">
<input type="button" value="全选" onclick="ChooseAll();">
<input type="button" value="取消" onclick="CancelAll();">
<input type="button" value="反选" onclick="ReverseAll();">
<table>
<thead>
<tr>
<th>选择</th>
<th>服务器</th>
<th>地址</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>主机</td>
<td>100.99990.000</td>
</tr>
<tr>
<td><input type="checkbox" id="text"></td>
<td>屏幕</td>
<td>100.888888.000</td>
</tr>
</tbody>
</table>
</div>
<div id="i1" class="back_color hide"></div>
<div id="i2" class="windows_color hide">
<p><input type="text"></p>
<p><input type="text"></p>
<p> <input type="button" value="确定">
<input type="button" value="取消" onclick="hide_2();">
</p>
</div>
<script>
function hide_1() {
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function hide_2() {
document.getElementById('i2').classList.add('hide');
document.getElementById('i1').classList.add('hide');
}
function ChooseAll() {
var tbody=document.getElementById('tb');
var tr_list=tbody.children; //获取所有的tr
for(var i=0;i<tr_list.length;i++){
var current_tr=tr_list[i];//当前循环的每一个tr
var checkbox=current_tr.children[0].children[0];
checkbox.checked=true;
}
}
function CancelAll() {
var tbody=document.getElementById('tb');
var tr_list=tbody.children; //获取所有的tr
for(var i=0;i<tr_list.length;i++){
var current_tr=tr_list[i];//当前循环的每一个tr
var checkbox=current_tr.children[0].children[0];
checkbox.checked=false;
}
}
function ReverseAll() {
var tbody=document.getElementById('tb');
var tr_list=tbody.children; //获取所有的tr
for(var i=0;i<tr_list.length;i++) {
var current_tr=tr_list[i];//当前循环的每一个tr
var checkbox=current_tr.children[0].children[0];
if(checkbox.checked) {
checkbox.checked = false;
}
else {
checkbox.checked = true;
}
}
}
</script>
</body>
</html>
