JavaScript的基本语法已经了解了,直接看Dom的相关例子来学习对document的操作。 Dom的原生使用不是太多,一般情况下使用JQuery更加简单,不过Dom的基本方法还是需要了解一下的。



例1 请输入关键字栏目


知识点:

  • javascript是默认的脚本语言,因此type='text/javascript可有可无;

  • 这里绑定了2个事件,onfocus聚焦,onblur 脱离焦点,他们各自调用一个函数来实现对应的逻辑功能

  • 获取标签的方式有两大类:1)直接获取,比如getElementById, getElementsByTagName, getElementsByClassName; 2) 间接获取,比如通过parentElement,children去搜索父亲节点,兄弟节点等等

  • 文件内容的操作: 对于文件内容,我们可以通过innerText或者innterHTML去获取和赋值,他们的区别在于前者仅仅获取文本,后者是全部内容(比如A标签等等)

  • 对于input的内容,我们可以通过value获取和赋值

  • 这个例子针对的是旧版浏览器,如果是新版的浏览器,我们可以直接使用<input type='text' placeholder=''请输入关键字">



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
    
    <script type="text/javascript">
        function Focus(){
            //console.log('Focus');
            //获取标签,清空
            var  tag = document.getElementById('i1');
            if(tag.value == "请输入关键字"){
                tag.value = "";
            }
        }
        function Blur(){
            //console.log('blur');
            var  tag = document.getElementById('i1');
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>


效果如下 如果光标不在里面,就显示请输入关键字,否则变为空白


wKioL1h-2aiCQOHlAAAmZmCoAUA677.jpg


例2 模拟对话框


知识点:

  1. shade层是在最下面,modal层是上面,因此后者的z-index数值比较大;

  2. 居中表示的方法,top,left各50%之后再移动一半的尺寸;

  3. tag.classlist可以对一个标签的class进行添加或者删除,因此中间那个窗口其实一直在,只不过隐藏起来而已;在dom中,我们可以通过className, classList.add, classList.remove来选择样式;也可以通过 obj.style.fontsize, obj.style.color这种方式来细微条件,还有可以通过getAttribute, setAttribute, removeAttribute来操作属性

  4. windows.onkeydown触发一个按键的事件,他的值keycode可以在console.log里面进行查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none !important;
        }
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            /*background-color: black;*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,.6);
            z-index: 1000;
        }
        .modal{
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: #dddddd;">
        <input type="button" value="点我" onclick="ShowModal();" />
    </div>
    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>
    <script>
        function ShowModal(){
            var t1 = document.getElementById('shade');
            var t2 = document.getElementById('modal');
            t1.classList.remove('hide');
            t2.classList.remove('hide');
        }
        function HideModal(){
            var t1 = document.getElementById('shade');
            var t2 = document.getElementById('modal');
            t1.classList.add('hide');
            t2.classList.add('hide');
        }
        window.onkeydown = function(event){
            //console.log(event);
            if(event.keyCode == 27){
                HideModal();
            }
        }
    </script>
</body>
</html>


按住ESC按键触发的事件,通过console.log查看他所对应的keycode是27

wKiom1h-3OSy9hqrAACnKaAsH1M321.jpg


运行效果,点击按钮居中打开一个新窗口,点击取消之后继续隐藏中间的窗口

wKioL1h-3OTSh9srAAA3-wt0xfk894.jpg

wKiom1h-3OWhQI2xAAB0-_mDJZo753.jpg



例3 全选,取消和反选(Dom版本)


这里用dom实现这3个功能,比较冗余;稍后会有JQuery 的版本,比较精炼


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="p1">
        <p>hhh</p>
    </div>
    <input type="button" value="全选" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancleAll()"/>
    <input type="button" value="反选" onclick="ReverseAll()"/>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
             <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
    
    <script>
        function CheckAll(){
            
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                #ck.setAttribute('checked','checked');
                ck.checked=true
            }
        }
        function CancleAll(){
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                #ck.removeAttribute('checked');
                ck.checked=false
            }
        }
        function ReverseAll(){
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                if(ck.checked){
                    ck.checked = false;
                    ck.removeAttribute('checked');
                }else{
                    ck.checked = true;
                    #ck.setAttribute('checked', 'checked');
                }
            }
        }
    </script>
</body>
</html>

wKioL1h-5czjZ84yAABUTkYvjp8076.jpg


例4:动态的创建标签

知识点:

创建标签有2个方式

第一种直接创建一个html字符串然后插入;第二种利用document.createElement来创建一个对象,然后通过对象的属性来赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+" />
    <input type="button" onclick="AddEle2();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>
    </div>
    <script>
        function AddEle1(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = "<p><input type='text'/></p>";
            // 注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
        function AddEle2(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = document.createElement('input');
            tag.setAttribute('type', 'text');
            tag.style.fontSize = '16px';
            tag.style.color = 'red';
            var p = document.createElement('p');
            p.appendChild(tag);
            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>
</html>

wKiom1kZKZDSltYrAAA-aA5R1UM127.jpg



例5, 把例2-例4整合一下


<HTML>
<head>
<style>
.c1{
position:fixed;
right:0;
left:0;
top:0;
bottom:0;
background-color:black;
z-index:9;
opacity:0.6;
}
.c2{
position:fixed;
width:300px;
height:300px;
background-color:white;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-150px;
margin-top:-150px;
z-index:10;
}
.hide{
display:none
}
.inputtext{
margin:0 auto
}
</style>
</head>
<body>
<div>
<input type="button" value="Add" onclick="showView()">
<input type="button" value="SelectAll" onclick="selectAll()">
<input type="button" value="CancelAll" onclick="cancelAll()">
<input type="button" value="ReverseAll" onclick="reverseAll()">
</div>
<table id='mytable'>
<th> chose</th>
<th> IP</th>
<th> Port </th>
<tr>
<td><input type='checkbox'></td>
<td>10.2.1.1</td>
<td>20</td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>10.2.1.2</td>
<td>20</td>
</tr>
</table>
<div id='i1' class='c1 hide'>
</div>
<div id='i2' class='c2 hide'>
<div>
<p>
<label style="width:25px;display:inline-block">IP</label>
<input class='inputtext' id='i3' type="text">
</p>
<p>
<label style="width:25px;diplay:inline-block">port</label>
<input class='inputtext' id='i4' type="text">
</p>
<input type="button" value="Cancel" onclick="hideView()">
<input type="button" value="Submit" onclick="addValue()">
</div>
</div>
<script>
function showView(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function hideView(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
function addValue(){
var ip=document.getElementById('i3').value;
var port=document.getElementById('i4').value;
console.log(ip);
console.log(port);
        hideView();
var tableRef = document.getElementById('mytable').getElementsByTagName('tbody')[0];
console.log(tableRef);
        // Insert a row in the table at the last row
var newRow   = tableRef.insertRow(tableRef.rows.length);
// Insert a cell in the row at index 0
var  cell0 = newRow.insertCell(0);
var  cell1  = newRow.insertCell(1);
var  cell2  = newRow.insertCell(2);
var newinput  = document.createElement('input');
newinput.type ="checkbox";
cell0.appendChild(newinput);
// Append a text node to the cell
var newText  = document.createTextNode(ip);
cell1.appendChild(newText);
var newText2  = document.createTextNode(port);
    cell2.appendChild(newText2);
}
    function selectAll(){
        var tableRef = document.getElementById('mytable').getElementsByTagName('tbody')[0];
        var tr_list=tableRef.children
        for(var i=1;i<tr_list.length;i++){
            console.log(tr_list[i]);
            var check=tr_list[i].children[0].children[0];
            console.log(check);
            check.checked=true;
        }
    }
    function cancelAll(){
        var tableRef = document.getElementById('mytable').getElementsByTagName('tbody')[0];
        var tr_list=tableRef.children
        for(var i=1;i<tr_list.length;i++){
            console.log(tr_list[i]);
            var check=tr_list[i].children[0].children[0];
            console.log(check);
            check.checked=false;
        }
    }
    function reverseAll(){
        var tableRef = document.getElementById('mytable').getElementsByTagName('tbody')[0];
        var tr_list=tableRef.children
        for(var i=1;i<tr_list.length;i++){
            console.log(tr_list[i]);
            var check=tr_list[i].children[0].children[0];
            console.log(check);
            if(check.checked){
                check.checked=false;
            }else{
                check.checked=true;
            }
        }
    }
</script>
</body>
</HTML>


wKiom1kRZ3Ww_J_cAACCUzUygBQ256.jpg


例7 点赞+1

  • 基本思路,动态地创建一个+1的span标签,定时器每隔50毫秒改变他的位置,大小和透明度,当透明度小于0.2的时候,停止定时器;


  • setinterval(func(),50)表示每隔50毫秒执行函数func,这里使用了匿名函数的方式, clearinterval(interval)表示取消interval定时器;类似的方法还有setTimeout ,他和setInterval的区别是他只执行一次


  • appendchild(tag)添加一个标签;removechild(tag)移除一个标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞2</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞3</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞4</a>
    </div>
    <script>
        function Favor(ths){
            // ths => this => 当前触发事件的标签
            var top = 49;
            var left = 71;
            var op = 1;
            var fontSize = 18;
            var tag = document.createElement('span');
            tag.innerText = '+1';
            tag.style.position = 'absolute';
            tag.style.top = top + "px";
            tag.style.left = left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + 'px';
            ths.parentElement.appendChild(tag);
            
            var interval = setInterval(function(){
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.1;
                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + 'px';
                if(op <= 0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            }, 50);
        }
    </script>
</body>
</html>


wKiom1h-71-hzcWTAAAn0ASDKwc476.jpg


例8. 删除信息5秒后自动消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="status" style="color: red;">
    </div>
    <input type="submit" onclick="DeleteStatus();" value="删除" />
    <script>
        function DeleteStatus(){
            var s = document.getElementById('status');
            s.innerText = '删除成功';
            setTimeout(function(){
                s.innerText = "";
            },5000);
        }
    </script>
</body>
</html>

wKioL1iAM_KzTNIqAAAoFNzK-rM120.jpg



例9. 返回顶部


.back 定义一个固定在右下角的标签,当滚轮位置大于100的时候,不隐藏,否则隐藏;当点击这个标签的时候 滚轮位置置为0,即回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            right: 20px;
            bottom: 20px;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
    <script>
        function BackTop(){
            document.body.scrollTop = 0;
        }
        function BodyScroll(){
            var s = document.body.scrollTop;
            var t = document.getElementById('back');
            if(s >= 100){
                t.classList.remove('hide');
            }else{
                t.classList.add('hide');
            }
        }
    </script>
</body>
</html>

wKioL1iANwfBIKoRAAAv6L8vT1c607.jpg


例7 提交form(submit事件)


form可以通过submit按钮来提交,也可以通过javascript手写一个,他的思路可以用在其他事件上,我们查找到这个标签对象,然后调用这个对象的方法,因此除了submit(),我们还可以使用onclick(),onmouseover()等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="f1">
        <input type="text" />
        <input type="submit" value="提交"/>
        <a onclick="Submit()">提交</a>
    </form>
    <script>
        function Submit(){
            var form = document.getElementById('f1');
            form.submit();
        }
    </script>
</body>
</html>


点击‘提交’的按钮或者a标签,效果是一样的
wKiom1iAP5HzMWfdAAAwtFil7Tw603.jpg



例8 弹出确认框,点击OK返回值是true;点击Cancel返回值是false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        var ret = confirm('是否删除?');
        console.log(ret);
    </script>
</body>
</html>

wKioL1iAUdziAEJFAAA-zr4p20I394.jpg

wKioL1iAUd2gnmZRAABk45eWl_8612.jpg



例9 提交数据不能为空判断

注意JavaScript的函数是在提交这个事件之前执行。这里存在一个事件链条的关系,只有前一个事件返回值为true,下一个事件才会自动进行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="username" />
        <input type="submit" value="提交" onclick="return SubmitForm();" />
    </form>
    <script>
        function SubmitForm(){
            var user = document.getElementById('username');
            if(user.value.length > 0 ){
                // 可以提交
                return true;
            }else{
                // 不可提交,提示错误
                alert('用户名输入不能为空');
                return false;
            }
        }
    </script>
</body>
</html>

wKiom1iBbJyjrE-nAABO3PI0-9k750.jpg