Python开发【前端】：DOM

时间：2020-12-12 22:56:24

DOM（文档对象模型(Document Object Model)）

　　文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作

1、查找元素

①  直接查找

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 id = "i1">我是i1</div>

    <a>aaaaa</a>

    <a>bbbbb</a>

    <a>ccccc</a>

</body>

</html>

1、直接查找练习.html

　　　　　　//获取ID

>document.getElementById('i1');

< <div id=​"i1">​我是i1​</div>​

　　　　　　//获取内容

>document.getElementById('i1').innerText

<"我是i1"

　　　　　　//重新赋值

>document.getElementById('i1').innerText = '新内容'

<"新内容"

　　　　　　//获取tagname集合

>document.getElementsByTagName('a');

<[<a>​aaaaa​</a>​, <a>​bbbbb​</a>​, <a>​ccccc​</a>​]

　　　　　　//获取集合指定索引元素

>document.getElementsByTagName('a')[1]

< <a>​bbbbb​</a>​

　　　　　　//对单个元素重新赋值

>document.getElementsByTagName('a')[1].innerText = 66666;

<66666

　　　　　　//对集合中所有文件赋值

>tags = document.getElementsByTagName('a');

<[<a>​aaaaa​</a>​, <a>​66666​</a>​, <a>​ccccc​</a>​]

>for(var i=0;i<tags.length;i++){tags[i].innerText=99999;}

<99999

>tags

<[<a>​99999​</a>​, <a>​99999​</a>​, <a>​99999​</a>​]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <div>c1Sibling</div>

        <div>c1</div>

    </div>

    <div>

        <div>c2Sibling</div>

        <div id="i1">c2</div>

    </div>

    <div>

        <div>c3Sibling</div>

        <div>c3</div>

    </div>

</body>

</html>

2、间接查找练习.html

    //获取ID

>tag = document.getElementById('i1');

< <div id=​"i1">​c2​</div>​

    //获取ID的父项

>tag.parentElement

<   <div>​

        <div>​c2Sibling​</div>​

        <div id=​"i1">​c2​</div>​

    </div>​

    //获取父项的子节点

>tag.parentElement.children

< [<div>​c2Sibling​</div>​,<div id=​"i1">​c2​</div>​]

    //获取父项的大兄弟

>tag.parentElement.previousElementSibling

>   <div>​

    <div>​c1Sibling​</div>​

    <div>​c1​</div>​

    </div>​

　　

2、内容操作

①  内容

innerText   文本

outerText

innerHTML   HTML内容

innerHTML

value       值

②  属性　　

attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性

getAttribute(key)         // 获取指定标签属性

/*

var atr = document.createAttribute("class");

atr.nodeValue="democlass";

document.getElementById('n1').setAttributeNode(atr);

*/
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="button" value="全选"  onclick="CheckAll();"/>

    <input type="button" value="取消" onclick="CancelAll();"/>

    <input type="button" value="反选" onclick="ReverseCheck();"/>

    <table border="1" >

        <thead>

        </thead>

        <tbody id="tb">

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

        </tbody>

    </table>

    <script>

        function CheckAll(ths){

            var tb = document.getElementById('tb');

            var trs = tb.childNodes;

            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];

                if(current_tr.nodeType==1){

                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                    inp.checked = true;

                }

            }

        }

        function CancelAll(ths){

            var tb = document.getElementById('tb');

            var trs = tb.childNodes;

            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];

                if(current_tr.nodeType==1){

                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                    inp.checked = false;

                }

            }

        }

        function ReverseCheck(ths){

            var tb = document.getElementById('tb');

            var trs = tb.childNodes;

            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];

                if(current_tr.nodeType==1){

                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                    if(inp.checked){

                        inp.checked = false;

                    }else{

                        inp.checked = true;

                    }

                }

            }

        }

    </script>

</body>

</html>

Demo

Demo

Demo

3、Class操作

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

简单练习：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <div>c1Sibling</div>

        <div>c1</div>

    </div>

    <div>

        <div>c2Sibling</div>

        <div id="i1">c2</div>

    </div>

    <div>

        <div>c3Sibling</div>

        <div>c3</div>

    </div>

</body>

</html>

class简单操作.html

        //获取ID

>document.getElementById('i1');

< <div id=​"i1">​c2​</div>​

        //赋值变量

>tag = document.getElementById('i1');

< <div id=​"i1">​c2​</div>​

        //设置class样式

>tag.className = 'c1';

> "c1"

        //设置成功

>tag

< <div id=​"i1" class=​"c1">​c2​</div>​

        //修改class样式

>tag.className = 'c2';

< "c2"

>tag

< <div id=​"i1" class=​"c2">​c2​</div>​

        //获取样式列表

>tag.classList

< ["c2"]

        //样式列表集合中添加样式

>tag.classList.add('c3')

< undefined

>tag

< <div id=​"i1" class=​"c2 c3">​c2​</div>​

        //样式列表集合中删除样式

>tag.classList.remove('c2');

< undefined

>tag

< <div id=​"i1" class=​"c3">​c2​</div>​

做完上面例子发现不得了了，我们直接可以对样式进行添加修改了，而且现在就可以做动态模块框了，点击按钮可以触发一系列动态效果，吊炸天了呼~，开搞开搞！！！

做之前还得了解这个知识点：

<div onclick="func();">点我</div>

<script>

     function func() {

      }

</script>

上面表示当鼠标点击到div后，执行func()函数

做个模态对话框：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1 {

            position: fixed;

            background-color: #423A3A;

            right: 0;

            left: 0;

            top:0;

            bottom: 0;

            opacity: 0.6;

            z-index: 9;

        }

        .c2 {

            position: fixed;

            background-color: white;

            height: 400px;

            width: 500px;

            top:50%;

            left: 50%;

            z-index: 10;

            margin-top: -200px;

            margin-left: -250px;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

    <div>

        <input type="button" value="打开" onclick="ShowModel();"/>

    </div>

    <div id="i1" class="c1 hide"></div>

    <div id="i2" class="c2 hide">

        <input type="button" value="取消" onclick="HideModel();"/>

    </div>

    <script>

        function ShowModel() {

            document.getElementById('i1').classList.remove('hide');

            document.getElementById('i2').classList.remove('hide');

        }

        function HideModel() {

            document.getElementById('i1').classList.add('hide');

            document.getElementById('i2').classList.add('hide');

        }

    </script>

</body>

</html>

模态对话框.html

页面效果：点击打开后，出现弹出，点击取消，弹出关掉

再做个选项框吧-全选、反选、取消：

<body>

    <div>

        <table>

            <thead>

                <tr>

                    <td>选择</td>

                    <td>IP地址</td>

                </tr>

            </thead>

            <tbody id="tb">

                <tr>

                    <td><input type="checkbox"/></td>

                    <td>192.168.2.201</td>

                </tr>

                <tr>

                    <td><input type="checkbox"/></td>

                    <td>192.168.2.202</td>

                </tr>

                <tr>

                    <td><input type="checkbox"/></td>

                    <td>192.168.2.203</td>

                </tr>

            </tbody>

        </table>

        <input type="button" value="全选" onclick="ChooseAll();"/>

        <input type="button" value="取消" onclick="CancleAll();"/>

        <input type="button" value="反选" onclick="ReverseAll();"/>

    </div>

    <script>

        function ChooseAll() {

            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.checked = true

            }

        }

        function CancleAll() {

            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.checked = false

            }

        }

         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];

                if(checkbox.checked ){

                    checkbox.checked=false

                }else {

                     checkbox.checked=true

                }

            }

        }

    </script>

</body>

页面效果：点击全选所有选项框选上；点击取消后恢复；点击反选，只选择未选上的选项框；一个字叼叼叼！！

根本停不下来，后台管理左侧菜单-点击菜单显示选项，其他菜单关闭

<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="width: 300px">

        <div class="item">

            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单一</div>

            <div class="content hide">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单二</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');">菜单三</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</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>

页面效果：点击菜单一、菜单一展开，其他菜单关闭；点击其他菜单亦可

　

Python开发【前端】：HTML--》》http://www.cnblogs.com/lianzhilei/p/6038646.html

Python开发【前端】：CSS--》》http://www.cnblogs.com/lianzhilei/p/6046131.html

Python开发【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html

相关文章