Python全栈开发之15、DOM

  文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。这里我们主要是讲用javascript操作DOM

一、查找元素

  如果我们想用js操作文档,首先要做的便是要找到要操作的元素,查找元素有直接查找和间接查找,下面来看一下这两类查找,

// 直接查找

document.getElementById             根据ID获取一个标签   获取的是单个标签
document.getElementsByName          根据name属性获取标签集合 注意获取的是一个 ******数组********
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

// 间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

二、操作 

1、内容 

  操作内容主要是 innerText,innerHTML和value其中前两种比较简单,主要是第三种在操作表单的时候,用得最多,text,password和textarea的value可以分为一类,checkbox,radio和select的value可以分为一类,下面来看下表单中操作value的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1"  type="text" value="123"/>
    <input  id="i2" type="password" value="111" />
    <textarea id="i3">666</textarea>
    <h1>爱好</h1>
    <div id="i4">
        <ul>
            <li> <input type="checkbox" value="1" /> 篮球 </li>
            <li> <input type="checkbox" value="2"/> 足球 </li>
            <li> <input type="checkbox" value="3"/> 去球 </li>
        </ul>
    </div>
    <div id="i5">
        <ul>
            <li> <input type="radio" name="interesting" value="11" /> 篮球 </li>
            <li> <input type="radio" name="interesting" value="22"/> 足球 </li>
            <li> <input type="radio" name="interesting" value="33"/> 去球 </li>
        </ul>
    </div>
    <select id="i6">
        <option value="11">上海</option>
        <option value="22">北京</option>
    </select>
    <script>
        // 下面三项的value值为用户输入的值,也可以通过value给其设置值
        var vtext = document.getElementById('i1');
        console.log(vtext.value);

        var vpasswd = document.getElementById('i2');
        console.log(vpasswd.value);

        var vtextarea = document.getElementById('i3');
        console.log(vtextarea.value);
        
        // 下面三项的 value 为选中后提交到后台value
        var vcheck = document.getElementById('i4');
        var vli = vcheck.getElementsByTagName('input');
        console.log(vli);
        vli[1].checked = true; //选中复选框的第二项
        console.log(vli[1].value);  //选中之后值为2

        var vradio = document.getElementsByName('interesting');
        console.log(vradio);
        vradio[1].checked = true; //选中单选框的第二项
        console.log(vradio[1].value);


        var vselect = document.getElementById('i6');
        console.log(vselect.value);      // 默认为第一项上海,value为 11
        var voption = vselect.children; //选中之后值为22
        voption[1].selected = true;  //选中第二项北京


    </script>
</body>
</html>  

 下面再来看一个用单选框做的全选,反选,取消的小例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="btn">
        <!--<input type="button" value="全选" onclick="SAll();">-->
        <!--<input type="button" value="反选" onclick="RAll();">-->
        <!--<input type="button" value="取消" onclick="CAll();">-->
        <input type="button" value="全选" onclick="Fun('S');">
        <input type="button" value="反选" onclick="Fun('R');">
        <input type="button" value="取消" onclick="Fun('C');">
    </div>

    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
                 <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
                 <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
                 <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        function SAll() {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByTagName('input');
            for(var i=0;i<inp.length;i++){
                inp[i].checked = true;
            }
        }
        function CAll() {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByClassName('inp');
            for(var i=0;i<inp.length;i++){
                inp[i].checked = false;
            }
        }
        function RAll() {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByClassName('inp');
            for(var i=0;i<inp.length;i++){
                if(inp[i].checked){
                    inp[i].checked = false;
                } else{
                    inp[i].checked = true;
                }
            }
        }

        // 用一个函数加上switch函数解决
        function Fun(arg) {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByTagName('input');
            switch(arg){
                case 'S':
                    for(var i=0;i<inp.length;i++){
                        inp[i].checked = true;
                    }
                    break;
                case 'C':
                    for(var i=0;i<inp.length;i++){
                        inp[i].checked = false;
                    }
                    break;
                case 'R':
                    for(var i=0;i<inp.length;i++){
                        if(inp[i].checked){
                            inp[i].checked = false;
                        }else{
                            inp[i].checked = true;
                        }
                    }
                    break;
                default:
                    break;
            }
        }
    </script>
</body>
</html>

2、操作属性

除了操作内容,还可以操作标签属性,主要用到下面几个方法

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性

下面来看一下示例  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="btn">
        <input type="button" onclick="Func();" value="点击" />
        <div id="i1" >
            <div class="c1" alex="gg" jason="hh">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1">123</div>
        </div>
    </div>
    <script>
       function Func() {
           var d = document.getElementById('i1');
           var dchild = d.children;
           for(var i=0;i<dchild.length;i++){
               if(dchild[i].getAttribute('alex')=='kk'){
                   dchild[i].innerText = 456;

                   dchild[i].setAttribute('ko',666);  // 设置属性
                   console.log(dchild[i].attributes); // 获取所有属性
               }
           }
       }
    </script>
</body>
</html>

下面来看一个更加实用的小例子,点击不同的菜单显示不同的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            margin: 0 auto;
            width: 300px;
            border: 1px solid chocolate;
        }
        ul{
            list-style: none;
            background-color: #cccccc;
        }
        ul li{
            float: left;
            display: block;
            background-color: #2459a2;
            padding:0 10px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
        }
        .clearfix:after{
            display: block;
            content: '';
            height: 0;
            visibility: hidden;
            clear: both;
        }
        #info{
            min-height: 200px;
            width: 300px;
        }
        .hide{
            display: none;
        }
        .active{
            background-color: white;
            color: black;
        }
    </style>
</head>
<body>
    <div class="content">
        <ul class="clearfix">
            <li tg="1" class="active" onclick="Func(this)">价格走势</li>
            <li tg="2" onclick="Func(this)">市场分布</li>
            <li tg="3" onclick="Func(this)">其他</li>
        </ul>

        <div id="info">
            <div targ="1" >conten1</div>
            <div targ="2" class="hide">conten2</div>
            <div targ="3" class="hide">conten3</div>
        </div>
    </div>

    <script>
        function Func(ths) {
            var bot = ths.parentElement.children;
            for(var i=0;i<bot.length;i++){
                bot[i].classList.remove('active')
            }
            ths.classList.add('active');

            var vtg = ths.getAttribute('tg');
            var divs = document.getElementById('info').children;
            for(var i=0;i<divs.length;i++){
                if(divs[i].getAttribute('targ') == vtg){
                    divs[i].classList.remove('hide');
                }else{
                    divs[i].classList.add('hide');
                }
            }

        }
    </script>
</body>
</html>

3、操作标签    

下面主要演示一下如何操作标签,添加标签有两种方式,一种是以字符串,另外一种是以添加标签对象下面来简单的看一下例子,向列表中添加一项内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="btn">
        <input type="text">
        <input type="button" value="add" onclick="Addlist(this);">
    </div>

    <h2 id="h">sss</h2>
    <div id="di">
        <ul id="list">
            <li>123</li>
            <li>123</li>
            <li>123</li>
        </ul>
    </div>
    <script>
        function Addlist(ths) {
            var v = ths.previousElementSibling.value;
            ths.previousElementSibling.value = '';
            var li = document.getElementById('list');

            //方式1
//            var str= '<li>' + v +'</li>';
//            li.insertAdjacentHTML('beforeEnd',str);

            var tag = document.createElement('li');
            if(v.trim().length>0){
                tag.innerText = v;
                li.appendChild(tag);
                li.insertBefore(tag,li.children[1]);
            }
        }

        var h = document.getElementById('h');
        var d = document.getElementById('di');
        var neh_h= h.cloneNode(true);         // 不clone的话,以前的会移除
        d.appendChild(neh_h);
    </script>

</body>
</html>

4、高度  

高度主要有以下几种情况

  1. scrollTop: 滚动条距离顶部高度
  2. scrollHeight 文档高度:自身+padding
  3. clientTop 边框高度
  4. clientHeight 可见范围的高度:自身+padding
  5. offsetTop 当前标签距离“顶部”的高度
  6. 当前标签距离“上部”定位标签的高度
  7. offsetHeight 可见范围的高度:自身+padding+border

首先来看一个返回顶部的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .head{
            height: 1500px;
        }
        .hide{
            display: none;
        }
        #d1{
            position: fixed;
            width: 40px;
            height: 40px;
            right: 20px;
            bottom: 20px;
            background-color: chocolate;
            color: white;
        }
    </style>
</head>
<body onscroll="F1();">
    <div class="head">
        <h1>he</h1>
    </div>
    <div id="d1" class="hide">
        <a onclick="Func();">返回顶部</a>
    </div>
    <script>
        function Func() {
            document.body.scrollTop = 0;
        }
        function F1() {
            var h = document.body.scrollTop;
            var d = document.getElementById('d1');
            if(h>100){
                d.classList.remove('hide');
            }else{
                d.classList.add('hide');
            }

        }
    </script>
</body>
</html>

下面在来看一个比较重要的布局,随着页面内容相应的菜单内容也跟着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            height: 50px;
            width: 100%;
            background-color: black;
        }

        .menu{
            position: absolute;
            min-height: 300px;
            background-color: azure;
            width: 200px;
            left:150px;
        }
        #article{
            position: absolute;
            min-height: 700px;
            width: 700px;
            background-color: burlywood;
            left: 350px;
        }
        ul{
            list-style: none;
        }
        ul li{
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        #article .artc{
            height: 900px;
            background-color: lavenderblush;
        }
        .fixed{
            position: fixed;
            top: 0;
        }
        .active{
            background-color: #2459a2;
        }

    </style>

</head>
<body onscroll="Hua();">
    <div class="header">

    </div>
    <div class="body">
        <div class="content ">
            <div class="menu" id="menu">
                <ul>
                    <li>第一章</li>
                    <li>第二章</li>
                    <li>第三章</li>
                </ul>
            </div>
            <div id="article">
                <div  class="artc">
                    <p>content</p>
                </div>
                <div  class="artc">
                    <p>sontent</p>
                 </div>
                <div  style="height: 300px" class="artc">
                    <p>sontent</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function Hua() {
            var huaHeight = document.body.scrollTop;
            var menu = document.getElementById('menu');

            if(huaHeight>50){
                menu.classList.add('fixed');
            }else{
                menu.classList.remove('fixed');
            }

            var articles = document.getElementById('article').children;
            var menuitem = menu.getElementsByTagName('li');

            for(var i=0;i<articles.length;i++){
                var artofftop = articles[i].offsetTop;
                var artoffheight = articles[i].offsetHeight;
//                console.log(huaHeight,artofftop,artoffheight,i,clienthight);
                if(huaHeight-48>=artofftop){
                    for(var j=0;j<articles.length;j++){
                        menuitem[j].classList.remove('active')
                    }
                    menuitem[i].classList.add('active');
                }
            }

            var clienthight =document.documentElement.clientHeight;
            if(huaHeight+clienthight == artofftop+artoffheight+50){
                 for(var j=0;j<articles.length;j++){
                    menuitem[j].classList.remove('active')
                 }
                 menuitem[articles.length-1].classList.add('active');
            }
        }
    </script>
</body>
</html>

五、其他操作  

document.geElementById('form').submit()  //表单提交

console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

下面来看一下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >

<input type="button" value="确出框" onclick="Confirm();">
<input type="button" value="定时器" onclick="Interval();">
<input type="button" value="取消定时器" onclick="Uninterval();">
<input type="button" value="单次定时器" onclick="Mytimeout();">
<input type="button" value="取消单次定时器" onclick="Unmytimeout();">


<div id="btns">
    <input type="button" value="点我">
    <input type="button" value="点我">
    <input type="button" value="点我">
</div>

<div id="i1">

</div>

</body>

<script>

        //location.href               获取URL
        //location.href = "url"       重定向
        //location.reload()           重新加载

    function Confirm() {
        var ret = confirm('xxxxxxx');
        console.log(ret);
    }

    function f1() {
        console.log(123);
    }
    function Interval() {
        t1 = setInterval(f1,1000);
//        t1 = setInterval(function () {
//            console.log(2222)
//        },1000)
    }
    
    function Uninterval() {
        clearInterval(t1);
    }

    function Mytimeout() {
        document.getElementById('i1').innerText = 'xxxxxx';
        t2 = setTimeout(function () {
            document.getElementById('i1').innerText = '';
        },2000)
    }

    function Unmytimeout() {
        clearTimeout(t2);
    }



// 下面的代码是两个特殊的示例,需要特别的注意下 function f2() { for (var i=0;i<3;i++){ setInterval((function (arg) { //立即执行,函数没有返回值 console.log(arg); })(i),1000) } } f2(); var btns = document.getElementById('btns').children; for(var j=0;j<btns.length;j++){ btns[j].onclick = function () { alert(j); } } </script> </html>

六、事件 

对于事件需要注意的要点:

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签,event封装了当前事件的内容。

posted @ 2016-07-18 21:43  赤木晴子梦  阅读(616)  评论(0编辑  收藏  举报