前言
刚刚初识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);
声明
本案例仅仅作为一个初学者的练习,对于购物车的操作还有很多没有实现,例如重复添加商品,需要添加一个计数器来计数,删除购物车商品操作等。