Community Learn Tools Library Leisure
search
English
Home > List of blog posts > dom元素的操作和JS实战案例
Blogger Information
Blog 28
fans 0
comment 0
visits 29994
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
dom元素的操作和JS实战案例
G
Original
840 people have browsed it

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.       }

懒加载

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来是理解了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post