DOM操作练习

最新推荐文章于 2022-11-15 23:21:14 发布
最新推荐文章于 2022-11-15 23:21:14 发布
阅读量246 收藏 2
点赞数
分类专栏： start all over again
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yikenaoguazi/article/details/108775690
版权

day58

练习1:模态框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #f6c2d2;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-color: white;
            /*margin: 0 auto;*/
            /*margin-top: 100px;*/

            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;

            text-align: center;
            line-height: 500px;
            color: red;
        }
        .box3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<script>
    var btn=document.getElementById("btn")
    btn.onclick=function () {
        // alert(123)
        var box1=document.createElement("div")
        var box2=document.createElement("div")
        var box3=document.createElement("div")

        box2.innerText="弹出的模态框"
        box3.innerText="X"


        box1.classList.add("box1")
        box2.classList.add("box2")
        box3.classList.add("box3")

        box1.appendChild(box2)
        box2.appendChild(box3)

        var body=document.getElementsByTagName('body')[0]
        body.appendChild(box1)


        box3.onclick=function () {
            body.removeChild(box1)
        }
    }

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

练习2:模态框扩展

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: pink;
            display: none;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-color: white;
            // 文本水平居中
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;

            // 多行文字垂直居中
           line-height: 30px;
            padding: 141px;
            box-sizing: border-box;
        }
        .box3 {
            width: 80px;
            height: 80px;
            background-color: red;
            position: absolute;
            right: 0;
            top: 0;
            text-align: center;
            line-height: 80px;
            color: white;
        }
    </style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<div class="box1">
    <div class="box2">
        <form action="">
            <p>
                用户名:<input type="text" name="username">
            </p>
            <p>
                密码:<input type="password" name="password">
            </p>
            <p>
                <input type="button" value="提交">
            </p>
            <div class="box3">X</div>
        </form>
    </div>
</div>
<script>
    var btn=document.getElementById("btn")
    var box1=document.getElementsByClassName("box1")[0]
    btn.onclick=function () {
        box1.style.display="block"
    }
    var box3=document.getElementsByClassName("box3")[0]
    box3.onclick=function () {
        box1.style.display="none"
        document.getElementsByName("username")[0].value=""
        document.getElementsByName("password")[0].value=""
    }
</script>
</body>
</html>

练习3:点击有惊喜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: auto;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
<div class="box">
    点击有惊喜！
</div>
<script>
    var box=document.getElementsByClassName("box")[0]
    var count=0
    box.onclick=function () {
        count++
        if (count % 4 == 1){
            this.style.backgroundColor="green"
            this.innerText="继续点击！"
        }else if(count % 4 == 2){
            this.style.backgroundColor="yellow"
            this.innerText="精彩即将揭晓"

        }else if(count % 4 == 3){
            this.style.backgroundColor="pink"
            this.innerText="骗你的傻逼"

        }else {
            this.style.backgroundColor="red"
            this.innerText="点击有惊喜！"
            // count=0

        }

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

练习四 :简易评论框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            background-color: #f6c2d2;
            width: 600px;
        }
        ul>li {
            list-style: none;
            background-color: #f5deb3;
            border: 1px dotted black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>评论区：</p>
    <ul></ul>
</div>
<div class="box2">
    <p>留言内容</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="提交" id="btn">
        <input type="button" value="统计" id="cal">
    </p>
</div>

<script>
    var btn=document.getElementById("btn")
    var count=0
    btn.onclick = function () {
        var content=document.getElementById("content")  // 评论框
        var val=content.value

        if (val.length != 0){
            var ul=document.getElementsByTagName("ul")[0]  // ul表，用于盛放li标签

            var li=document.createElement("li")  // 造了一个li标签，li标签里放评论的内容

            var p1=document.createElement("p") // 楼层信息
            var p2=document.createElement("p") // 评论内容

            // 处理楼层信息
            count=document.getElementsByTagName("li").length+1
            var d=new Date()
            p1.innerHTML="#"+ count + "楼" + "&nbsp;&nbsp;&nbsp;&nbsp;" +d.toLocaleString() + "&nbsp;&nbsp;&nbsp;&nbsp;" +"<span class='del'>删除</span>"

            // 处理评论内容
            p2.innerText=val

            // 把p1、p2放入li
            li.appendChild(p1)
            li.appendChild(p2)

            // 往ul里添加li，并清除评论框的内容
            ul.appendChild(li)
            content.value=""

            var delButtons=document.getElementsByClassName("del")
            var currentButton=delButtons[delButtons.length-1]
            // alert(currentButton)
            currentButton.onclick=function () {
                // console.log(123123213)
                ul.removeChild(this.parentNode.parentNode)
            }

        }

    }


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

练习5:简易评论框改进

方式一:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #comment {
            background-color: #b0b0b0;
            width: 500px;
        }

        #comment ul li {
            list-style: none;
            background-color: wheat;
            border: 1px dashed #000;
            margin: 0px 10px 10px;
            word-break: break-all;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<div id="comment">
    <p>评论内容：</p>
</div>
<div id="box">
    <p>留言内容：</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="提交" id="btn">
        <input type="button" value="统计" id="calculate">
    </p>
</div>
<script>
    var comment = document.getElementById('comment');
    var box = document.getElementById('box');
    var submit = document.getElementById('submit');
    var content = document.getElementById('content');
    var btn = document.getElementById('btn');
    var calculate=document.getElementById('calculate');

    var ul = document.createElement('ul');
    comment.appendChild(ul);

    var count=0;
    btn.onclick = function () {
        var val = content.value;
        if (val.length != 0) {
            var date = new Date();
            var subTime = date.toLocaleString();

            var li = document.createElement('li');
            var p1 = document.createElement('h3');
            var p2 = document.createElement('p');

            var spans = document.getElementsByClassName('del');
            count=spans.length+1;

            p1.innerHTML = '#'+'<span class="num">'+count+'</span>'+'楼'+'    '+subTime + '<span class="del">    删除</span>';
            p2.innerHTML = val;
            li.appendChild(p1);
            li.appendChild(p2);

            ul.appendChild(li);
            content.value = '';
        }

        function aa() {
            var spans = document.getElementsByClassName('del');
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick=function (currentIndex) {
                    function bb() {
                        ul.removeChild(this.parentNode.parentNode);
                        count--;
                        var ss=document.getElementsByClassName('num');
                        for (var j=currentIndex;j<ss.length;j++){
                            ss[j].innerHTML=parseInt(ss[j].innerHTML)-1;
                        }
                        aa();
                    }
                    return bb;

                }(i);
            }
        }
        aa()

    };

    calculate.onclick = function () {
        alert('一共发布了'+count+'条评论');
    }
</script>

</body>
</html>

方式二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            background-color: #f6c2d2;
            width: 600px;
        }
        ul>li {
            list-style: none;
            background-color: #f5deb3;
            border: 1px dotted black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>评论区：</p>
    <ul></ul>
</div>
<div class="box2">
    <p>留言内容</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="提交" id="btn">
        <input type="button" value="统计" id="cal">
    </p>
</div>

<script>
    var btn=document.getElementById("btn")
    var count=0
    btn.onclick = function () {
        var content=document.getElementById("content")  // 评论框
        var val=content.value

        if (val.length != 0){
            var ul=document.getElementsByTagName("ul")[0]  // ul表，用于盛放li标签

            var li=document.createElement("li")  // 造了一个li标签，li标签里放评论的内容

            var p1=document.createElement("p") // 楼层信息
            var p2=document.createElement("p") // 评论内容

            // 处理楼层信息
            count=document.getElementsByTagName("li").length+1
            var d=new Date()
            p1.innerHTML="#"+ "<span class='num'>"+count +"</span>"+ "楼" + "&nbsp;&nbsp;&nbsp;&nbsp;" +d.toLocaleString() + "&nbsp;&nbsp;&nbsp;&nbsp;" +"<span class='del'>删除</span>"

            // 处理评论内容
            p2.innerText=val

            // 把p1、p2放入li
            li.appendChild(p1)
            li.appendChild(p2)

            // 往ul里添加li，并清除评论框的内容
            ul.appendChild(li)
            content.value=""

            var delButtons=document.getElementsByClassName("del")
            var currentButton=delButtons[delButtons.length-1]
            // alert(currentButton)

            currentButton.onclick=function () {
                // console.log(123123213)


                // 把后面的楼层都减1
                var allNum=document.getElementsByClassName("num")
                var currntNum=this.previousElementSibling



                for (var i=0;i<allNum.length;i++) {
                    if (currntNum == allNum[i]) {
                        // alert(i) // 找到当前索引
                        for (var j=i+1;j<allNum.length;j++) {
                            allNum[j].innerText=parseInt(allNum[j].innerText) - 1
                        }
                        break
                    }
                }


                ul.removeChild(this.parentNode.parentNode)
                count--

            }

        }

    }


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

练习六:选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid red;
            margin: auto;

        }

        ul>li {
            list-style: none;
            width: 200px;
            height: 80px;
            background-color: gray;
            text-align: center;
            line-height: 80px;
            float: left;
        }
        ul:after {
            display: table;
            content: "";
            clear: both;
        }

        .content {
            background-color: #f6c2d2;
            width: 600px;
            height: 320px;
            display: none;
        }

        li.active {
            background-color: #55bbbb;
        }
        div.active {
            display: block;
        }

    </style>
</head>
<body>
<div class="box">
    <ul>
        <li class="active">首页</li>
        <li>新闻</li>
        <li>图片</li>
    </ul>

    <div class="content active">
        首页内容
    </div>

    <div class="content ">
        新闻内容
    </div>

    <div class="content">
        图片内容
    </div>
</div>

<script>
    var arr=document.getElementsByTagName('li')
    for (var i=0;i<arr.length;i++) {
        arr[i].n=i
        arr[i].onclick=function () {
            // alert(this.n)

            for (j=0;j<arr.length;j++) {
                arr[j].classList.remove("active")
                document.getElementsByClassName("content")[j].classList.remove("active")
            }

            this.classList.add('active')
            // document.getElementsByClassName("content")[i].classList.add("active") // 错误的做法
            document.getElementsByClassName("content")[this.n].classList.add("active")



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

练习七:用户名和密码校验

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            background-color: red;
        }

    </style>
</head>
<body>
<form>
    <p>
        <input type="text" name="username">
        <span></span>
    </p>

    <p>
        <input type="password" name="password">
        <span></span>

    </p>

    <p>
        <input type="button" value="提交" id="btn">
    </p>
</form>


<script>
    var isOk1=false
    var reg1=new RegExp('(?!^[0-9]+$)(?!^[a-zA-Z]+$)^[0-9A-Za-z]{4}$')
    var inp1 = document.getElementsByName("username")[0]

    inp1.onblur=function () {
        var res=reg1.test(this.value)
        this.style.border="1px solid red"

        if (!res) {
            this.nextElementSibling.innerText="用户名必须由4位字母和数字组成"
            setTimeout(function () {
                inp1.nextElementSibling.innerText=""
                inp1.value=""
            },3000)
        }else {
            this.style.border="1px solid green"
            isOk1=true
        }
    }


    var isOk2=false
    var reg2=new RegExp('(?!^[0-9]+$)(?!^[a-zA-Z]+$)^[0-9A-Za-z]{6}$')
    var inp2 = document.getElementsByName("password")[0]

    inp2.onblur=function () {
        var res=reg2.test(this.value)
        this.style.border="1px solid red"

        if (!res) {
            this.nextElementSibling.innerText="密码必须由6位字母和数字组成"
            setTimeout(function () {
                inp2.nextElementSibling.innerText=""
                inp2.value=""
            },3000)
        }else {
            this.style.border="1px solid green"
            isOk2=true
        }
    }

    var btn=document.getElementById("btn")
    btn.onclick=function () {
        if(isOk1 && isOk2) {
            alert("提交成功")
        }else {
            alert("请重新填写")
        }
    }
</script>
</body>
</html>

参考博客

yikenaoguazi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM操作实例练习
qq_62089165的博客
09-01 964
综合案例-网页轮播图效果案例
DOM操作的案例练习一
weixin_52484792的博客
05-23 131
1.百度换肤 代码如下图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
六、DOM（上） - 章节课后练习题及答案
熊先森的博客
03-28 1万+
第六章DOM（上） - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍
DOM基本操作例题集
weixin_37702998的博客
11-19 398
2.1 parentNode->父节点（最顶端的parentNode为#document） 2.2 childNodes->子节点们 2.3 firstNode->第一个子节点 2.4 lastNode->最后一个子节点 2.5 nextSibling->后一个兄弟节点&previousSibling->前一个兄弟节点 3.1 parentEleme...
DOM操作及事件练习
星河梦~的博客
07-21 352
练习1.编写程序，实现计算器的相关功能2.鼠标经过时背景变色3.设置tab标签栏4.制作信息发布栏5.图片跟随鼠标移动 1.编写程序，实现计算器的相关功能 方法一： <body style="text-align: center;"> <img src="../images/8.png.jpeg" width="500" height="400"> <br> <label> 第一个数： <input
javaScript Dom编程 第五章（最佳实践）笔记
饱：）的博客
04-02 164
本章内容 平稳退化：确保网页在没有JS的情况下也能正常工作。 分离JavaScript：把网页的结构和内容与JavaScript的动作行为分开。 向后兼容性：确保老版本浏览器不会因为JavaScript脚本死掉。 性能考虑：确保脚本执行性能最优。 与HTML相比，JavaScript语言更加严苛。若不符合语法规定，JS解释器将拒绝执行并报错。 只是很少一部分网页能够在JS被禁用时对网页行为做出妥善安排。很多时候，一旦浏览器不支持或者禁用了JavaScript解释功能，质量不好的脚本将会导致用户无法浏览相
DOM全选练习
sinat_33940108的博客
04-26 129
本页面完成全选/全不选，反选按钮。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
js_HTML_Dom操作练习
10-15
本实践项目“js_HTML_Dom操作练习”旨在帮助初学者熟悉DOM的基本操作，包括查找、修改和添加网页元素。在这个过程中，我们将探讨几个关键的DOM接口和方法，以加深对JavaScript与HTML交互的理解。 1. **获取元素**：...
UDACITY-MemoryGame:DOM操作练习项目
04-29
《UDACITY-MemoryGame: DOM操作与JavaScript实现详解》 在编程学习的道路上，实践是检验理论知识的最好方式。UDACITY-MemoryGame项目就是一个很好的例子，它将带你深入理解DOM（Document Object Model）操作以及...
JQuery 选择器、DOM节点操作练习实例
10-19
下面小编就为大家带来一篇JQuery 选择器、DOM节点操作练习实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML DOM的练习
06-15
html当中DOM知识的小练习。 节点练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。html当中DOM知识的小练习。
DOM操作
02-13
DOM操作练习仅使用JavaScript将以下元素添加到容器中-不要添加任何HTML或CSS代码： 红色文字<p> ，上面写着“嘿，我是红色的！” 带有蓝色文字，上面写着“我是蓝色的h3！”。 具有黑色边框和粉红色背景色的<div> ，...
05.DOM 查询练习-节点练习
01-08
这些练习涵盖了DOM操作的基础，包括查找元素、遍历节点树、获取和设置属性值，以及处理元素之间的关系。通过实践这些例子，开发者可以更好地理解和掌握如何在实际项目中使用DOM进行网页交互和动态更新。
DOM案例练习-推荐几个DOM小案例练习有示例代码
m0_71485750的博客
06-04 665
说明: 做一个消息提示, 让消息的内容跟随数据动态发生改变示例代码:CSS部分 HTML结构 JS代码 案例二: 关闭删除消息 说明: 点击叉号将对应导航栏删除示例代码:CSS代码 HTML结构: JS代码: 案例三: 侧边栏的展示 说明: 鼠标经过添加动画将宽度调高-, 案例中的图片使用同一张精灵图, 且精灵图位置是有规律的, 我们选择通过js动态设置background-position示例代码:CSS代码 HTML结构 JS代码 案例四: 登录框
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 1763
整一些可以练着玩的熟悉语法的DOM小例子
JS——初始DOM的相关操作练习
Bonsoir777的博客
08-20 394
前文介绍了初识DOM的相关知识点（感兴趣的朋友欢迎翻阅），本文就向大家分享一些利用对DOM操作解决简单实际应用的过程。
七、DOM（下） - 章节课后练习题及答案
热门推荐
熊先森的博客
04-22 1万+
DOM（下） - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。
DOM操作元素例题
m0_71251536的博客
06-11 264
getElements例题
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
最新发布
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
EXT中文手册：DOM操作与组件扩展详解
在手册的开始部分，读者可以了解如何获取和下载Ext框架，并通过Element的学习掌握基本的DOM操作和事件处理。接下来的章节着重于Widgets（可复用的UI元素）的创建与使用，这包括了如何编写和响应用户界面组件，如按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值