dom操作

Posted leiwenbin627

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了dom操作相关的知识,希望对你有一定的参考价值。

s19.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">我是i1</div>
    <a>adsf</a>
    <a>909</a>
    <a>ksdsd</a>
</body>
</html>
document.getElementsByTagName(‘span‘) 通过标签种类来获取标签
document.getElementsByClassName(‘c1‘) 通过css种类来获取标签

tag=document.getElementById(‘i1‘) #通过id 来获取标签
tag.innerText  获取标签内容
tag.innertext="新内容" 修改标签内容
document.getElementsByTagName(‘a‘)[1].innerText=666 a标签的第1个a标签的内容改成666

批量修改标签
tage=document.getElementsByTagName(‘a‘)
for(var i=0;i<tage.length;i++){tage[i].innerText=999;}

 

 

 

s20.html

<!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>

tag=document.getElementById(‘i1‘); 通过i1来查找其他标签
tag.parentElement i1对应标签的父标签
tag.parentElement,children i1对应标签的父标签的子标签
tag.parentElement.previousElementSibling 父标签的前一个标签
tag.parentElement.previousElementSibling.children[1] 父标签的前一个标签的子标签下的第1个标签
tag.parentElement.previousElementSibling.children[1].innerText 获取父标签的前一个标签的子标签下的第1个标签的标签内容
tag.parentElement.previousElementSibling.children[1].innerText="c1_1" 修改父标签的前一个标签的子标签下的第1个标签的标签内容


tag.className="c1"  添加class 整体操作
tag.className="c2"  修改class 整体操作

tag.classList 以列表的展现形式找出该标签所有的class
tag.classList.add(‘c3‘) 添加class 样式
tag.classList.remove(‘c2‘) 移除指定class 样式

<div onclick="func();">点击执行</div> 点这个div 就会执行func()  javascript函数
<script>
    function func() {
    }

</script>

 

 

 

s21.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: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -300px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
<div>
    <input type="button" value="添加" onclick="ShowMode();">
    <input type="button" value="全选" onclick="ChooseAll();">
    <input type="button" value="取消" onclick="CancleAll();">
    <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>1.1.1.1</td>
            <td>90</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.2</td>
            <td>92</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.3</td>
            <td>93</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="HideMode();"/>
        <input type="button" value="确定"/>
    </p>
</div>
<!--弹出框结束-->

<script>

    function ShowMode() {
        document.getElementById(‘i1‘).classList.remove(‘hide‘);
        document.getElementById(‘i2‘).classList.remove(‘hide‘);
    }
    function HideMode() {
        document.getElementById(‘i1‘).classList.add(‘hide‘);
        document.getElementById(‘i2‘).classList.add(‘hide‘);
    }
    function ChooseAll() {
        var tbody = document.getElementById(‘tb‘);
        //获取所有的tr
       
var tr_list = tbody.children;

        for (var i = 0; i < tr_list.length; i++) {
            //循环所有的current_tr
           
var current_tr = tr_list[i];

            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = true;
        }}
    function CancleAll() {
        var tbody = document.getElementById(‘tb‘);
        //获取所有的tr
       
var tr_list = tbody.children;

        for (var i = 0; i < tr_list.length; i++) {
            //循环所有的current_tr
           
var current_tr = tr_list[i];

            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = false;
        }}
    function ReverseAll() {
        var tbody = document.getElementById(‘tb‘);
        //获取所有的tr
       
var tr_list = tbody.children;

        for (var i = 0; i < tr_list.length; i++) {
            //循环所有的current_tr
           
var current_tr = tr_list[i];

            var checkbox = current_tr.children[0].children[0];
            if(checkbox.checked){
                checkbox.checked=false;
            }else {checkbox.checked=true;}
        }}
</script>
</body>
</html>

 

 

s22.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            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);
            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‘);
            }
            current_header.nextElementSibling.classList.remove(‘hide‘);
        }
    </script>
</body>
</html>

以上是关于dom操作的主要内容,如果未能解决你的问题,请参考以下文章

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

DOM操作

JavaScript单行代码,也就是代码片段

dom操作

实用代码片段将json数据绑定到html元素 (转)

更改页面javascript代码(TamperMonkey)以将键盘笔触发送到父DOM