DOM常用的一些属性及案例

最新推荐文章于 2022-10-11 20:53:25 发布

Dragon Prince

最新推荐文章于 2022-10-11 20:53:25 发布

阅读量133

点赞数 1

本文链接：https://blog.csdn.net/wangzilong_2019/article/details/102848286

版权

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>