你的分享就是我们的动力 ---﹥

Python开发【前端】:DOM

时间:2016-11-18 18:28来源:www.chengxuyuans.com 点击:

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

 

转载注明地址:http://www.chengxuyuans.com/Python/104693.html

推荐文章