Javascript DOM元素的创建、获取、插入、删除

最新推荐文章于 2023-05-25 00:20:26 发布

Windyluna

最新推荐文章于 2023-05-25 00:20:26 发布

阅读量335

点赞数

分类专栏： JavaScript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/windyluna/article/details/124662236

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在JavaScript中动态创建、获取、插入和删除DOM元素，以及展示和隐藏元素的方法。通过示例展示了如何根据数据对象创建带有特定属性和样式的标记点，并应用动画效果。此外，还涉及到了数据绑定和CSS样式的使用。

摘要由CSDN通过智能技术生成

DOM 元素动态创建、获取、插入、删除
场景：用户进行某个操作，动态添加元素及样式

var detailInfo = {
  id: 11,
  status_w: 2,
  target: 2
}

//创建 DOM 元素
var floorEle = document.createElement('div')
var className = 'sectionTypeMarker'
floorEle.innerHTML = `<div class="sectionMarker ${className}" data-id="${detailInfo.id}" data-status="${detailInfo.status_w}" data-target="${detailInfo.target}"><img class="marker-content" src="${imgUrl}" /></div>`

//获取元素
var markerHtml = sectionMarkers.getElement()
var className = 'sectionTypeMarker'
var markerDom = markerHtml.querySelector(`.${className}`)  


//获取元素的状态值
var dataset = markerDom.dataset
//例如：
dataset['status']
dataset['target']

//显示/隐藏元素
markerDom.style.display = 'block'
markerDom.style.display = 'none'


//插入元素
let rippleHtmlString = '<div class="water-ripple water-ripple-4"></div>'
markerDom.appendChild(document.createRange().createContextualFragment(rippleHtmlString))

//删除元素
let waterRippleDom = markerDom.querySelector('.water-ripple') // 获取元素
markerDom.removeChild(waterRippleDom) // 删除元素



// CSS样式：
// 标记点样式
/deep/ .sectionMarker {
  position: relative;
  width: 50px;
}
/deep/ .sectionMarker .marker-content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
}

// 标记点样式：动画
/deep/ .water-ripple-4 {
  animation: wateranimate 2s 0s ease-out infinite;
}
/deep/ .water-ripple {
  padding: 30%;
  position: absolute;
  left: 20%;
  top: 20%;
  box-shadow: 0 0 25px 30px rgba(255, 255, 255, 0.8) inset;
  border-radius: 100%;
  z-index: 1;
  opacity: 0;
}

@keyframes wateranimate {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}