Dom 实例

最新推荐文章于 2023-04-27 19:13:37 发布
最新推荐文章于 2023-04-27 19:13:37 发布
阅读量183 收藏 1
点赞数
文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34060299/article/details/85077546
版权

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="请输入关键字" οnfοcus="Focus();" οnblur="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="点我" οnclick="ShowModal();" />
    </div>
    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">
        <a href="javascript:void(0);" οnclick="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="全选" οnclick="CheckAll()" />
    <input type="button" value="取消" οnclick="CancleAll()"/>
    <input type="button" value="反选" οnclick="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" οnclick="AddEle1();" value="+" />
    <input type="button" οnclick="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" οnclick="showView()">
<input type="button" value="SelectAll" οnclick="selectAll()">
<input type="button" value="CancelAll" οnclick="cancelAll()">
<input type="button" value="ReverseAll" οnclick="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" οnclick="hideView()">
<input type="button" value="Submit" οnclick="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 οnclick="Favor(this);">赞1</a>
    </div>
    <div class="item">
        <a οnclick="Favor(this);">赞2</a>
    </div>
    <div class="item">
        <a οnclick="Favor(this);">赞3</a>
    </div>
    <div class="item">
        <a οnclick="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" οnclick="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 οnscrοll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="back" class="back hide" οnclick="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 οnclick="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="提交" οnclick="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

Vincen??
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dom实例的运用
09-15
Dom实例的运用，对xml的学习的实例,以及对sax的理解！
AngularJS 入门教程之HTML DOM实例详解
10-21
本文主要介绍AngularJS HTML DOM,这里帮大家整理了详细的资料,并附实例代码详细讲解,有需要的小伙伴可以参考下
dom实例
Superman_Qsir的博客
04-20 281
目录 ##拖动效果## ##滚动对象的位置## ##window的滚动## ##指定滚动条滚动到某一个位置## ##固定导航## ##返回顶部## ##触底加载更多## ##二级联动## ##三级联动## 拖动效果 <div class="box"></div> var box = document.querySelector('.box') // 1:在box上
HTML DOM 实例
huangxiaochun2006的专栏
02-22 422
  Anchor 对象更改一个链接的文本、URL 以及 target 使用 focus() 和 blur() 向超链接添加快捷键 Document 对象使用 document.write() 向输出流写文本 使用 document.write() 向输出流写 HTML 返回当前文档的标题 返回当前文档的 URL 返回当前文档的 referrer 返回下载当前文档的服务器
DOM实例
u011927449的博客
07-23 168
同一种功能两种方法： 1 　　　　<script type='text/javascript'> 2 <!-- 3 4 var tag = document.creatElement("a"); 5 tag.href = 'http://www.baidu.com'; 6 tag.innerText = '点我啊'; 7 8
DOM例子
u010919331的博客
08-05 320
5个js原生小例子，主要用到了DOM、字符串、模板字符串、数组去重等等
【JS小知识】DOM实例
因为遇见你，我，三生有幸呀
02-15 177
DOM的定义：全称为Document Object Model，即文档对象模型。它是一套用来管理控制html文档的规则。 /** * 节点：构成HTML文档最基本的单元 * 常用节点分为四类 * - 文档节点：整个HTML节点 * - 元素节点：HTML文档中的HTML标签 * - 属性节点：元素的属性 * - 文本节点：HTML标签中的文本内容 * * 浏览器已经为我们提供 文档节点 对象，这个对象是window属性 * 可以在页面中直接使用，文档节点代...
dom-living-examples:一些原生JS操作DOM实例
05-25
dom-living-examples一些原生JS操作DOM实例
javascript DOM的详解及实例代码
10-20
主要介绍了javascript DOM的详解及实例代码的相关资料,需要的朋友可以参考下
jQuery DOM操作实例
10-26
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
Javascript入门学习第七篇 js dom实例操作第1/2页
12-09
直接从方法说起： 1， 删除节点。removeChild(): <body> ”cssrain”> ”a”>a </div> ”b”>b </div> ”c”>c </div> </div> </body> [removed] var msg = document.getElementById(“cssrain”...
vue获取dom元素注意事项
08-28
主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
JavaScript DOM节点添加示例
10-25
本节为大家介绍下JavaScript DOM节点添加，将node里面的str放到h1段落中使之成为h1的新段落
javascript DOM对象的学习实例代码
01-21
DOM对象的学习 java javascript CSS ajax c# c++ 这是第一个节点 innerHTML的使用 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
jQuery中DOM操作实例分析
10-24
主要介绍了jQuery中DOM操作方法,实例分析了dom对象的创建、属性的修改、样式的修改、动态绑定事件等技巧,需要的朋友可以参考下
javaScript DOM方法与属性
简约时尚，突破自我
11-25 108
转自http://dev.21tx.com 网页教学网 1 createElement(element) 创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。 eg) var para = document.createElement("p"); document.body.appendChild(para); 2 createTextNode() ...
DOM常见案例大盘点!
blog_pancc的博客
04-27 482
文章目录DOM案例一.DOM操作元素案例1.DOM修改元素内容案例2.分时问候案例3.仿京东显示隐藏密码明文案例4.仿淘宝关闭二维码案例5.遍历精灵图案例6.显示隐藏文本框内容案例7.密码框验证信息案例8.仿世纪佳缘用户名显示隐藏案例9.排他思想(算法)案例10.百度换肤案例11.表格隔行变色案例12.全选反选案例13.tab栏切换案例14.新浪下拉菜单案例15.简单版留言板案例16.动态生成表格案例二.DOM事件高级案例1.鼠标跟随案例2.仿京东按键输入内容案例3.仿京东快递查询单号案例 DOM案例 ​
Dom 学习总结及其实例
weixin_33857679的博客
04-23 170
1、   重新导航到指定的地址：navigate("http://www.cnblogs.com/daomul/"); 2、  （1、*setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：                 setInterval("alert('hello')",5000); *clearI...
echarts formatter创建dom实例
最新发布
04-29
可以使用 echarts 的 formatter 函数来创建 dom 实例。 在 formatter 函数中，可以使用 document.createElement() 方法创建任何需要的 DOM 元素。例如，下面的代码演示如何在 tooltip 中创建一个包含图片的 div ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值