前言

刚刚初识DOM的基本操作，抱着对DOM的浓厚兴趣，自己钻研了下，写了个小案例，可以实现购物车类似的添加功能。

效果展示

我们先来看一下效果在这里插入图片描述
红色区域是我们的“商品区”，下面蓝色部分是“购物车”。
当我们点击添加按钮时，对应的商品就会出现在蓝色区域。

源码

html部分

<body>
    <div class="commotity">
      <ul>
        <li>
          <a id="1">商品1</a>
          <button class="btn1">添加</button>
        </li>
        <li>
          <span id="2">商品2</span>
          <button class="btn1">添加</button>
        </li>
        <li>
          <span id="3">商品3</span>
          <button class="btn1">添加</button>
        </li>
      </ul>
    </div>
    <div class="cart">
      <ul></ul>
    </div>
  </body>

css部分

* {
    
    
    margin: 0;
    padding: 0;
}

.commotity {
    
    
    background-color: brown;
    width: 100%;
    height: 400px;
}

ul,
li {
    
    
    text-decoration: none;
    text-align: center;
}

.cart {
    
    
    background-color: cyan;
    height: calc(100vh - 400px);
    width: 100%;
}

js代码部分

window.onload = function() {
    
    
  var idarr = [];
  var btn1 = document.getElementsByClassName("btn1");
  
  for (var i = 0; i < btn1.length; i++) {
    
    
    btn1[i].onclick = function (e) {
    
    
      var e = e || window.event; //兼容ie
      // console.log(e.target)
      var dom = e.target; //获取被点击的元素
      //去找到要操作的结点
      var predom2 = dom.previousElementSibling;
      var predom2_n = predom2.nodeName.toLowerCase();
      var a = document.createElement(predom2_n);
      a.innerHTML = predom2.innerHTML;
      var cart_ul = document.querySelector(".cart>ul");
      var oLI = document.createElement("li");
      oLI.appendChild(a);
      cart_ul.appendChild(oLI);
}

思路

代码的逻辑并不复杂，要想实现这样的效果。

首先，我们先获取到所有按钮元素。
var btn1 = document.getElementsByClassName("btn1");
然后我们再利用for循环为按钮添加点击事件。
先获取被点击的元素
var dom = e.target;
然后得到按钮的前一个兄弟节点，即商品信息所在标签。
var predom2 = dom.previousElementSibling;
获取商品后，我们还要得到它的标签类型，这样我们添加到下面的时候可以让结构保持一致。
var predom2_n = predom2.nodeName.toLowerCase();
生成标签，对应商品信息的标签名。例如<a>商品1</a>，执行下面这段代码，a就是一对标签。
var a = document.createElement(predom2_n);
然后利用innerHTML获取到商品的内容给到刚刚创建的标签。
a.innerHTML = predom2.innerHTML;
选择<div class='cart'>下的ul标签。
var cart_ul = document.querySelector(".cart>ul");
创建li标签
var oLI = document.createElement("li");
将节点添加到oLI下。
oLI.appendChild(a);
再将oLI节点添加到cart_ul下。
cart_ul.appendChild(oLI);

声明
本案例仅仅作为一个初学者的练习，对于购物车的操作还有很多没有实现，例如重复添加商品，需要添加一个计数器来计数，删除购物车商品操作等。

DOM操作小案例——购物车添加功能

前言

效果展示

源码

思路

猜你喜欢