登录  /  注册
首页 > 博客列表 > dom元素的操作和JS实战案例
博主信息
博文 28
粉丝 0
评论 0
访问量 28964
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
dom元素的操作和JS实战案例
G
原创
811人浏览过

dom 元素操作

  1. 创建元素
    document.createElement("元素名")
    创建一个<ul>元素：
    const ul = document.createElement("ul")

    此时的 ul 并没有直接添加到页面之中，而是存储在了内存 ul 之中。所以不会在 HTML 页面之中显示出来。

  2. 往页面添加元素

    添加一个新创建好的元素需要给它一个父级元素，它会往该父级元素之下添加内容。
    语法：document.父级元素.appendChild(创建好在内存之中的元素名)

    appendChild(),是将元素最做父级的最后一个子元素插入的

往body中添加刚刚创建好的 ul 元素，此时body就是ul的父级
document.body.appendChild(ul)

  1. 向创建好的元素之中添加内容

    和创建添加元素一样，只是需要用到querySelector选择刚刚创建好的或者自己想要添加的元素作为添加内容的父级

  1. let li = document.createElement("li")
  2. document.querySelector.appendChild(li)
  1. 在任意位置添加元素

    父元素.insertBefore(新元素,参考的位置), 不存在, insertAfter()

  1.       ul.insertBefore(li, place);

5. 向元素之中添加内容：如文本
innerHTML或innerText方法

innerHTML可以将文本中的 html 标签解析出来
innerText纯文本,不解析 html 代码

往 li 标签之中添加内容

li.innerText = "我是纯文本" >

  1. 批量生成元素，可以配合 for 循环或其他流程控制-循环来执行。

    这里使用 for 循环来演示一下

  1. for (let i =0;i<5;i++){
  2.     li = document.createElement("li")
  3.     li.innerHTML = "我是标签"+(i+1)
  4.     document.querySelector("ul").appendChild(li)
  5. }

  1. 替换操作

    通过想替换的元素的父级.replaceChild(替换的元素，被替换的元素位置)

  1.       const place = document.querySelector("li:nth-of-type(3)");
  2.       const place1 = document.querySelector("li:nth-of-type(1)");
  3.     // 实际上以下这行代码等于： document.querySelector("ul").replaceChild(place, place1);
  4.       ul.replaceChild(place, place1);

  1. 删除操作

    删除操作不需要元素的参考。所以直接查找到元素即可执行删除操作。
    ul.removeChild(document.querySelector("li:last-of-type"));

  2. 链式操作

    链式操作是将代码有序的执行，如创建和添加元素：
    document.body.apendChild(document.createElement("ul")).appendChild("li")

  3. 文档片段

    文档片段是什么：文档片段是将创建的文档对象临时储存到一个内存之中，避免每往页面添加一次数据就会导致页面刷新或重新渲染一次，浪费服务器资源或造成卡顿，所以将数据临时存储到内存之中，最后通过一次性输出的方式使页面只刷新一次即可完成操作，节省资源和时间，能大大提高网站的加载速度。

文档树将采用方法：new createDocumentFargment() > 

  1.       //   创建文档树
  2.       const frag = document.createDocumentFragment();
  3.       //   创建子元素
  4.       for (let i = 0; i < 1000; i++) {
  5.         li = document.createElement("li");
  6.         li.innerHTML = "我是第" + (i + 1) + "个元素";
  7.         // 将所有子元素添加到文档树之中
  8.         frag.appendChild(li);
  9.       }
  10.       //   创建ul
  11.       const ul = document.createElement("ul");
  12.       //   将文档树挂载到ul，以ul为父级
  13.       ul.appendChild(frag);
  14.       //   往页面之中添加元素
  15.       document.body.appendChild(ul);


实战案例：

经典的toDolist

  1.     <title>toDolist</title>
  2.     <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       body {
  9.         background-color: #d2ffc1;
  10.       }
  11.       h2 {
  12.         margin-top: 1.5em;
  13.         color: #03a3ff;
  14.         text-align: center;
  15.       }
  16.       form {
  17.         display: grid;
  18.         grid-template-columns: 5em, 20em;
  19.         gap: 0.5em;
  20.         place-content: center;
  21.         margin-top: 1.5em;
  22.       }
  23.       button,
  24.       form > div > input {
  25.         border-radius: 0.4em;
  26.       }
  27.       li {
  28.         margin-top: 2em;
  29.         text-align: center;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <h2>toDolist留言板实战</h2>
  35.     <form action="" onsubmit="return false">
  36.       <div>
  37.         <label for="comment">请留言:</label>
  38.         <input
  39.           type="text"
  40.           id="comment"
  41.           name="comment"
  42.           placeholder="请输入内容"
  43.         />
  44.       </div>
  45.       <button>立即提交</button>
  46.     </form>
  47.     <ul id="list"></ul>
  48.     <script>
  49.       // 获取到输入框和列表元素
  50.       const comment = document.querySelector("#comment");
  51.       const list = document.querySelector("#list");
  52.       //   给文本框添加事件
  53.       comment.addEventListener("keyup", show, false);
  54.       function show(ev) {
  55.         console.log(ev.key);
  56.         if (ev.key === "Enter") {
  57.           console.log(comment.value);
  58.           //   做一个非空判断
  59.           // 非空判断需要用到一个方法：trim()
  60.           if (comment.value.trim().length === 0) {
  61.             alert("请输入留言内容，留言内容不能为空！");
  62.             comment.focus();
  63.             return false;
  64.           }
  65.           //   通过了非空验证，就将留言以列表的形式添加到页面
  66.           const li = document.createElement("li");
  67.           li.innerHTML =
  68.             comment.value + ' <button onclick="del(this)">删除</button>';
  69.           // 判断留言内容是否存在，若不存在即生成第一个，若存在，在第一个子元素之前生成
  70.           if (list.childElementCount === 0) {
  71.             list.appendChild(li);
  72.           } else {
  73.             list.insertBefore(li, list.firstElementChild);
  74.           }
  76.           // 清空输入框
  77.           comment.value = null;
  78.         }
  79.       }
  80.       // 执行删除留言的操作
  81.       function del(ele) {
  82.         console.log(ele);
  83.         // 要删除的是button的父元素li
  84.         if (confirm("是否删除")) list.removeChild(ele.parentNode);
  85.       }
  86.     </script>
  87.   </body>

选项卡案例

  1.       const tab = document.querySelector(".tab");
  2.       const items = document.querySelectorAll(".item");
  3.       //   绑定事件,鼠标滑过切换
  4.       tab.addEventListener("mouseover", show, false);
  5.       //   事件回调show
  6.       function show(ev) {
  7.         //   移除tab子元素下的所有样式
  8.         Array.from(tab.children).forEach((item) =>
  9.           item.classList.remove("active")
  10.         );
  11.         //   将用户当前的选择项激活
  12.         ev.target.classList.toggle("active");
  13.         // 清空内容区内容，并根据data-index索引对应值相等来显示对应的内容
  14.         items.forEach((item) => item.classList.remove("active"));
  15.         // 查询对应的data-index的值，如果相等就显示
  16.         items.forEach((item) =>
  17.           item.dataset.index === ev.target.dataset.index
  18.             ? item.classList.toggle("active")
  19.             : null
  20.         );
  21.       }

一键换肤

原理：通过操作背景图片样式的 url 地址替换来实现。

  1. 获取到当前父容器。
  2. 绑定过点击事件，并通过该事件的回调函数将图片背景样式的属性 src 属性之中的图片 url 地址替换
  3. 成功
  1.    <style>
  2.       body {
  3.         background-image: url(static/images/1.jpg);
  4.         background-repeat: no-repeat;
  5.         background-size: cover;
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <img src="static/images/1.jpg" alt="" />
  12.       <img src="static/images/2.jpg" alt="" />
  13.       <img src="static/images/3.jpg" alt="" />
  14.     </div>
  15.     <script>
  16.       document
  17.         .querySelector(".container")
  18.         .addEventListener(
  19.           "click",
  20.           (ev) =>
  21.             (document.body.style.backgroundImage = "url(" + ev.target.src + ")")
  22.         );
  23.     </script>

懒加载

懒加载：视口高度 clientHeight、滚动高度 scrollTop 和元素偏移高度 offsetTop
clientHeight：视口高度，它总是小于设备屏幕尺寸。通过 document.documentElement.clientHeight 获取，要注意不是 viewHeight，因为它是看过的高度。
scrollTop:滚动高度，就是滚动条上边距可视区域顶部的高度。它加上视口高度所包括的内容就是用户可以浏览的内容。通过 document.documentElement.scrollTop 获取。
offsetTop:元素偏移高度,元素在文档流中，到文档顶部的高度。通过 元素的 offsetTop 属性获取。

下面开始实战：

  1. <!-- 一部分图片代码，不提供全部了 -->
  2. <div class="container">
  3.   <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  4.   <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  5.   <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  6.   <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  7.   <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  8.   <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  9. </div>
  1.       // 获取到所有图片
  2.       const imgs = document.querySelectorAll(".container img");
  3.       //   查询获取当前视口的高度
  4.       const clientHeight = document.documentElement.clientHeight;
  5.       //   监听滚动条事件
  6.       window.addEventListener("scroll", lazyload, false);
  7.       //   load: 当页面加载成功时自动执行,将已进入可视区的图片显示出来,不要出现首页空白
  8.       window.addEventListener("load", lazyload, false);
  9.       //   懒加载的回调
  10.       function lazyload() {
  11.         //   动态获取滚动条的高度
  12.         let scrollTop = document.documentElement.scrollTop;
  13.         // 遍历显示图片（当图片进入可视区域后显示）
  14.         imgs.forEach((img) => {
  15.           if (img.offsetTop <= clientHeight + scrollTop) {
  16.             img.src = img.dataset.src;
  17.             // 如果感觉图片显示太快,可以用定时器来控制一下
  18.             setTimeout(() => {
  19.               img.src = img.dataset.src;
  20.             }, 500);
  21.           }
  22.         });
  23.       }

懒加载

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：看来是理解了
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录