DOM例子

已于 2022-08-05 02:53:17 修改
阅读量319 收藏
点赞数
分类专栏： js基础 文章标签： css html 前端
于 2022-08-05 02:31:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010919331/article/details/126169498
版权

今天主要记录5个js原生例子，通过用前面所学完成，提高逻辑和独立思考的能力。

方法一通百通，后期会随时添加新的方法。

1、添加标签至文本框，并可删除

        主要运用了DOM的基本操作

        备注：批量添加事件用循环；

                  循环里的点击事件用this获取他关联的元素；

                  给标签添加的文字内容里也可再加标签，用字符串或模板字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
            color: #fff;
            padding: 10px 0;
        }
        ul li >button {
            background-color: #F25D4D;
            color: #fff;
            padding: 5px 10px;
            margin-left: 200px;
        }
        .box {
            background-color: #002D52;
            width: 500px;
            height: 560px;
            margin: 20px auto;
            padding: 8px 20px;
        }
        .contain {
            margin: 10px 20px;
        }
        p{
            color: #fff;
            line-height: 30px;
            margin: 4px;
            display: inline-block;
            text-align: center;
        }
        .op11 {
            padding-bottom: 10px;
        }
        .btn-all {
            background-color: #F25D4D;
            color: #fff;
            padding: 5px 30px;
            margin-top: 5px;
        }
        .bg {
            background-color: #349851;
            border: 1px solid #999;

            width: 100px;
            height: 30px;
        }
        .text-bg {
            background-color: #ffffff;
            width: 400px;
            height: 150px;
            padding: 5px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="contain">
        <p class="op11">单击下面的”添加“按钮，添加标签</p>
        <div>
            <div id="bgBox" class="text-bg"></div>
        </div>
        <button class="btn-all">全部清除</button>
        <ul>
            <li><span>John Doe1</span> <button>添加</button></li>
            <li><span>John Doe2</span> <button>添加</button></li>
            <li><span>John Doe3</span> <button>添加</button></li>
            <li><span>John Doe4</span> <button>添加</button></li>
            <li><span>John Doe5</span> <button>添加</button></li>
            <li><span>John Doe6</span> <button>添加</button></li>
        </ul>
    </div>
</div>
<script>
  /*
  点击全部清除：清空文本框内容
  点击添加，生成对应文字内容的按钮至上方文本框
      点击事件发生
      创造绿色按钮元素
      为该元素提供下方按钮对应文字
          用按钮长度循环，其中点击事件：点击某按钮，取其父级文字
          同时上方文本框生成按钮
              生成的按钮是以文本框作为父级添加子元素+文本内容
   */

  var oUl = document.querySelector('ul');
  var oBtn = document.querySelectorAll('button');
  var bgBox = document.getElementById('bgBox');

  oBtn[0].onclick = function (){
    bgBox.innerHTML='';
  }
// 给每个按钮添加事件 循环
  for (var i=1; i<oBtn.length;i++){
    oBtn[i].onclick = function (){
      var oLi = this.parentNode;
      var str = oLi.children[0].innerText;
      console.log('str',str)

      var add = document.createElement('p');
      add.innerHTML=str + '<a>x</a>';
      add.classList.add('bg')
      bgBox.appendChild(add)

      var oA = add.children[0];
      oA.onclick = function (){
        bgBox.removeChild(add)
      }
    }
  }


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

2、数组去重，统计

        方法：1、json：json的key不重复

                   2、indexOf

                   3、indexOf和lastindexOf

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea id="t1" cols="50" rows="10">衣服 运动鞋 裙子 裤子 衣服 运动鞋 裙子 裤子 衣服 运动鞋 裙子 裤子 衣服 运动鞋 衣服 运动鞋 衣服 运动鞋 裙子 衣服 运动鞋 裙子</textarea>
<button id="btn">转化</button>
<textarea cols="50" rows="10" id="t2"></textarea>

<script>
  var oBtn = document.getElementById('btn');
  var oT1 = document.getElementById('t1');
  var oT2 = document.getElementById('t2');

  oBtn.onclick = function (){
    // 获取t1的内容
    var str = oT1.value;
    // 把获取的内容切割成数组
    var arr = str.split(' ');
    // 准备一个json
    var json = {};
    // 循环数组
    for(var i=0;i<arr.length;i++){
     if ( json[arr[i]]===undefined){
       json[arr[i]]=1
     }else {
       json[arr[i]]+=1
     }
    }
    console.log(json)
    var result = '';
    for(var key in json){
      result+=key+'('+json[key]+')'
    }
    oT2.value=result
  }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea cols="50" rows="10">衣服 运动鞋 裙子 裤子 衣服 运动鞋 裙子 裤子 衣服 运动鞋 裙子 裤子 衣服 运动鞋 衣服 运动鞋 衣服 运动鞋 裙子 衣服 运动鞋 裙子</textarea>
    <button>转化</button>
    <textarea cols="50" rows="10"></textarea>
<script>
   // 获取元素
   var oBtn = document.querySelector('button');
   var inPutValue = document.querySelectorAll('textarea');
   var str = inPutValue[0].innerHTML;
   var arr = str.split(' ');

   //方法1：设一个空新数组，循环获取数组每一项，如果新数组中通过indeOf找不到的数组元素，则push进新数组
   var newArr = [];
   for (var i=0; i<arr.length; i++){
     if (newArr.indexOf(arr[i]) === -1){newArr.push(arr[i]);}
   }
   console.log(newArr)

  /* 
  // 方法2：如果他们不相等，说明是重复的元素，在数组中删掉他，同时i--
  for (var i=0; i<arr.length; i++){
     if (arr.indexOf(arr[i]) !== arr.lastIndexOf(arr[i])) {
       arr.splice(i, 1);
       i--;
     }
   }
   console.log(arr);*/


   oBtn.onclick = function () {
      inPutValue[0].innerHTML='';
      inPutValue[1].innerHTML=newArr.join(' ');
    }
</script>
</body>
</html>

3、侧边菜单栏展开收起

        备注：主要用到了getComputedStyle和offsetHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            width: 200px;
            background-color: #ccc;
        }
        h6{
            font-size: 20px;
            line-height: 40px;
        }
        #nav ul{
            height: 0;
            overflow: hidden;
            transition: .3s height linear;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>
            <h6>一级目录1</h6>
            <ul>
                <li>二级目录1-1</li>
                <li>二级目录1-2</li>
                <li>二级目录1-3</li>
            </ul>
        </li>
        <li>
            <h6>一级目录2</h6>
            <ul>
                <li>二级目录2-1</li>
                <li>二级目录2-2</li>
                <li>二级目录2-3</li>
            </ul>
        </li>
        <li>
            <h6>一级目录3</h6>
            <ul>
                <li>二级目录3-1</li>
                <li>二级目录3-2</li>
                <li>二级目录3-3</li>
            </ul>
        </li>
    </ul>
    <script>
        var aH6 = document.querySelectorAll('#nav h6');
        var aUl = document.querySelectorAll('#nav ul');

        for(var i=0;i<aH6.length;i++){
          aH6[i].onclick = function (){
            //li的高度*li的个数
            var oUl = this.nextElementSibling;

            if(getComputedStyle(oUl).height==='0px'){
              // 让其他 aUl[i].style.height='0px'，这样一次点击，其他的都会合上，而不是一直展开着
              for (var i=0;i<aUl.length;i++){
                aUl[i].style.height='0px'
              }

              // 本次点击的ul的高度=li的高度*li的个数
              oUl.style.height=oUl.children[0].offsetHeight*oUl.children.length+'px';
            }else {
              // 如果点击的一级标题是展开的，点击后就设为合上
              oUl.style.height='0px'
            }
          }
        }
    </script>
</body>
</html>

4、列表渲染 — 字符串拼接、模板字符串

        备注：注意字符串拼接、模板字符串的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 1000px;
            border: 1px solid #ccc;
        }
        *{
            margin: 0;
            padding: 0;
        }

        .clearfix:after{
            content:'';
            display: block;
            clear: both;
        }
        li {
            width: 300px;
            height: 200px;
            margin: 5px 16px;
            float: left;
            list-style: none;
            background-color: #ccc;
        }
        li div {
            float: left;
            margin: 30px 0;
        }
        li div img {
            width: 150px;
        }
    </style>
</head>
<body>
<ul class="clearfix">
    <!--<li>
        <div>
            <img src="" alt="">
        </div>
        <div>
            <p>aaa</p>
            <p>￥1200</p>
        </div>
    </li>-->
</ul>
<script>
    var goodsDate = [
      { src: 'https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_300x300q90.jpg_.webp', tit: 'aaa', price: '13' },
      { src: 'https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_300x300q90.jpg_.webp', tit: 'aaa', price: '14' },
      { src: 'https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_300x300q90.jpg_.webp', tit: 'aaa', price: '15' },
      { src: 'https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_300x300q90.jpg_.webp', tit: 'aaa', price: '16' },
      { src: 'https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_300x300q90.jpg_.webp', tit: 'aaa', price: '17' },
      { src: 'https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_300x300q90.jpg_.webp', tit: 'aaa', price: '18' },
    ];
    var oUl = document.querySelector('ul');

    /*// 字符串方法
    for(var i=0; i<goodsDate.length;i++){
      var oLi = document.createElement('li');
      oLi.innerHTML = '<div> <img src="'+ goodsDate[i].src+'" alt=""> </div><div><p>' + goodsDate[i].tit + '</p><p>'+ goodsDate[i].price+'</p></div>';
        oUl.appendChild(oLi);
    }*/

    // 模板字符串方法
    for(var i=0;i<goodsDate.length;i++){
      var oLi = document.createElement('li');
      oLi.innerHTML=`
        <div>
            <img src="${goodsDate[i].src}" alt="">
        </div>
        <div>
            <p>${goodsDate[i].tit}</p>
            <p>${goodsDate[i].price}</p>
        </div>
      `
      oUl.appendChild(oLi)
    }

    /* 注意：
    （1）字符串:
        'helle world' 如果遇到了字符串拼接 ’hello  ‘+ 变量 +'  world'
        字符串里面即使内容再多也不能换行写
    （2）模板字符串：
        在es6里出的新的写法   `hello ${变量} world`
        里面随便换行

        简单的字符串可以用''
        需要复杂的换行，或者想简单一点写变量用 `hello ${变量} world`
    */
</script>
</body>
</html>

5、轮播图 — 淡入淡出效果

        备注：

                  相同的内容封装函数以提高代码复用；

                  批量添加事件用循环；

                  循环里的点击事件用this获取他关联的元素；

                   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 400px;
            margin: 40px auto;
            position: relative;
        }
        ul{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top:0;
            border: 1px solid #ccc;
        }
        ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top:0;
            opacity:0;
            transition: .2s all linear;
        }
        li{
            list-style: none;
        }
        ul .active{
            opacity: 1;
        }
        ol{
            position: absolute;
            width: 300px;
            left: 150px;
            bottom:20px;
        }
        ol li{
            width: 30px;
            height: 30px;
            border: 5px solid #999;
            margin: 10px;
            float: left;
        }
        ol .active{
            background-color: #eee;
        }
        .left{
            position: absolute;
            left: 20px;
            top:180px;
            font-size: 40px;
        }
        .right{
            position: absolute;
            right: 20px;
            top: 180px;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li class="active"><img src="./img/1.jpeg" alt=""></li>
        <li><img src="./img/2.jpeg" alt=""></li>
        <li><img src="./img/3.jpeg" alt=""></li>
        <li><img src="./img/4.jpeg" alt=""></li>
        <li><img src="./img/5.jpeg" alt=""></li>
    </ul>
    <a class="left"> < </a>
    <a class="right"> > </a>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
<script>
    var oBox = document.querySelector('div');
    var imgLi = document.querySelectorAll('ul li');
    var btnLi = document.querySelectorAll('ol li');
    var oRight = document.querySelector('.right');
    var oLeft = document.querySelector('.left');
    var iNow = 0;// 默认现在显示的下标

    function move(){
      for (var i=0;i<btnLi.length;i++){
        btnLi[i].classList.remove('active');
        imgLi[i].classList.remove('active');
      }
      imgLi[iNow].classList.add('active');
      btnLi[iNow].classList.add('active');
    }
    function toRight(){
      iNow++;
      if(iNow==imgLi.length){
        iNow=0;
      }
      move()
    }
    // 给所有的按钮添加点击事件
    for(var i=0; i<btnLi.length;i++){
      btnLi[i].dataset.index=i;//取出下标
      btnLi[i].onclick=function (){
        iNow=this.dataset.index;
        move();
      }
    }
    // 给右边的按钮加点击事件
    oRight.onclick = toRight;
    // 给左边的按钮加点击事件
    oLeft.onclick = function (){
      iNow--;
      if(iNow===-1){
        iNow=imgLi.length-1
      }
      move()
    }
    // 定时器
    var timer = setInterval(toRight,2000);
    // 鼠标移入
    oBox.onmouseover = function (){
      clearInterval(timer)
    }
    // 鼠标移出
    oBox.onmouseout=function (){
      timer=setInterval(toRight,2000)
    }
</script>
</body>
</html>

Mr_Hola
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
DOM常见案例大盘点!
blog_pancc的博客
04-27 463
文章目录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 169
1、   重新导航到指定的地址：navigate("http://www.cnblogs.com/daomul/"); 2、  （1、*setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：                 setInterval("alert('hello')",5000); *clearI...
离散数学第三章 集合与关系（8~12）
m0_56150664的博客
04-21 8279
第三章（8~12） 3-8关系的闭包运算 定义：设R是X上的二元关系，如果有另一个关系R’满足： ​ 1.R‘是自反的（对称的，可传递的） ​ 2.R’⊇R ​ 3.对于任何自反的（对称的，可传递的）关系R‘’，如果有R‘’⊇R，就有R‘’⊇R‘。 ​ 则称关系R’为R的自反（对称，传递）闭包。记作r(R ),(s(R
DOM基础详细 包含多个案例
qq_56303170的博客
08-13 711
DOM基础详细 包含多个案例 DOM基础 详细DOM基础详细 包含多个案例一级目录二级目录三级目录DOM树获取元素如何获取元素根据ID获取根据标签名获取获取特殊元素事件基础操作元素改变元素的内容修改src(其他的类似)根据时间，显示不同的问候语和图片表单元素的修改显示和隐藏密码操作元素的大小、颜色及样式行内样式操作循环精灵图显示隐藏文本框内容使用className修改样式属性密码框验证信息排它思想点击图片修改背景全选和单选自定义属性获取自定义属性设置自定义属性移除属性tab栏切换节点操作节点层级父级节点子级
04笔记 离散数学——关系——基于离散数学(第3版)_章炯民,陶增乐
JamSlade的博客
10-25 6287
关系的概念 X,Y是集合，R是X×Y的子集，则称R是X到Y的二元关系，若X=Y，称R为X上的关系，(x,y)∈R，称x，y满足关系R，记为xRy，x是y的前件，y是x的后键 定义 设R是X到Y的二元关系，R的定义域记为dom（R），R的值域记为ran( R ) dom(R)={x∣x∈X，且存在y∈Y使(x,y)∈R}dom(R) = \{x|x∈X，且存在y∈Y使(x,y)∈R\}dom(R)={x∣x∈X，且存在y∈Y使(x,y)∈R} ran(R)={y∣y∈Y，且存在x∈X使(x,y)∈R}ran(
dom4jdemo例子
09-29
这个demo eclipse导入直接运行 详情情况readme txt
xsd,xml,htm,xsl,dom例子
07-07
围绕动物园（zoo）这个实体而写的xsd,xml,htm,xsl,dom例子，易懂，适于初学者
DOMExample.rar XMLDOM例子
12-07
DOMExample.rarDOMExample.rarDOMExample.rarDOMExample.rarDOMExample.rarDOMExample.rarDOMExample.rar
dom4j基本例子
01-11
自己写的一个dom4j的例子，xml文件和java源码都打包在了一起，内容包括基本的增删改查、
DOM解析XML文件例子
02-06
DOM解析XML文件例子DOM解析XML文件例子DOM解析XML文件例子
dom实例
Superman_Qsir的博客
04-20 279
目录 ##拖动效果## ##滚动对象的位置## ##window的滚动## ##指定滚动条滚动到某一个位置## ##固定导航## ##返回顶部## ##触底加载更多## ##二级联动## ##三级联动## 拖动效果 <div class="box"></div> var box = document.querySelector('.box') // 1:在box上
DOM事件例子
weixin_40548182的博客
02-05 155
环境 yum安装的nginx ip地址 192.168.229.120 文件目录 /usr/share/nginx/html nginx正常启动 替换掉index.html内容为下文练习的内容 定时器事件练习 说明：这里我的type是故意写成buttom的，应该是button，就是想看下故意设置成buttom能不能点击。 [root@golang html]# cat index.html <!DOCTYPE html> <html lang='en'> <head>
DOM基础实例
m0_64246150的博客
06-12 144
背景开关灯，新浪下拉菜单案例，百度换肤效果，表单全选和取消全选，tab栏切换，简单发布删除留言案例
DOM事件机制详解及案例（建议收藏！！）
m0_58620483的博客
08-25 333
这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。例如，鼠标操作导致的事件会生成鼠标位置信息，而键盘操作导致的事件会生成与被按下的键有关的信息。事件处理程序的名字以"on"开头，因此 click 事件的处理程序叫作 onclick，而 load 事件的处理程序叫作 onload。事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。也就是：利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。
离散数学第三章 集合与关系（1~7）
m0_56150664的博客
04-08 6949
第三章 集合与关系（1~7） 3-1 集合的概念和表示法 说明集合的方法有两种： 列举法（eg.A={a,b,c,d}） 叙述法（eg.S₁={x|x是中国的省}） 我们用p(x)表示任何谓词，则{x|p(x)}可表示集合。如果p(b)为真，那么b∈A，否则b∉A 外延性原理：两个集合是相等的，当且仅当它们有相同的成员 两个集合A和B是相等的，记作A=B，两个集合不相等，则记作A≠B 集合的元素还可以允许是一个集合，例如：S={a,{1,2},p,{q}}。必须指出：q∈{q},但
DOM的6个实例
weixin_40205005的博客
06-15 1496
第1个实例：循环单击变色&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;1111&lt;/h1&gt
常见js dom等原生示例
至尊宝
05-03 1879
js常见dom案例，不难，仅仅记录一下 全选，不选，反选 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var btn1=document.getEleme
DOM操作经典案例
qq_41189709的博客
08-05 1887
DOM操作经典案例百度换肤案例鼠标移进移出变色（行变色）表单全选全取消案例tag导航栏切换案例 百度换肤案例 百度换肤案例就是当你点击一张图片时，当前的背景图片就为你所点击的这张图片，实现起来也比较简单，就是更改一下backgroundImage的url路径 js代码： <script> var img=document.querySelectorAll('img')...
Dom 实例
weixin_34060299的博客
01-18 181
JavaScript的基本语法已经了解了，直接看Dom的相关例子来学习对document的操作。 Dom的原生使用不是太多，一般情况下使用JQuery更加简单，不过Dom的基本方法还是需要了解一下的。例1 请输入关键字栏目知识点：javascript是默认的脚本语言，因此type='text/javascript可有可无；这里绑定了2个事件，onfocus聚焦，onblur 脱离焦点，他们各自调用...
用JavaScript实现dom例子
最新发布
02-20
一个简单的JavaScript实现DOM的例子是：var element = document.getElementById("myDiv"); element.innerHTML = "Hello World!";

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值