js原生操作Dom（模拟鼠标点击）

最新推荐文章于 2024-04-25 15:58:41 发布

一只金牛座的崽

最新推荐文章于 2024-04-25 15:58:41 发布

阅读量4.8k

点赞数

分类专栏： Js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43456275/article/details/114675389

版权

Js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
添加：appendChild()
移出：removeChild()
替换：replaceChild(newNode,oldNode)
插入：insertBefore(newNode,oldNode)
复制：cloneNode(true)
查找：
getElementsByTagName() //通过标签名称
getElementsByClassName() //通过标签名称 IE8以及一下无效
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
querySelector(’.类名’) //查找符合类名的第一个
querySelectorAll(’.类名’) //查找所有符合类名返回一个数组（就算一个也返回数组）

<body>
<button class="cli">点击</button>
<div class="zzc"></div>
</body>
<script>
var e = document.getElementsByClassName('zzc')[0]
for (let i=0;i<3;i++) {
  var div = document.createElement('div')
  randColor(div) //通过style增加样式
  div.setAttribute('class','test') //通过setAttribute加类名(缺点会替换之前的类名)
  //div.classList.add("类名") //追加类名样式
  var text = document.createTextNode('text'+i)
  div.appendChild(text)
  e.appendChild(div)
}
function randColor(element) { //随机改变背景色
    var ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
    element.style.background = ranColor;
}
//点击按钮进行操作
var cli = document.querySelectorAll('.cli')[0]
cli.addEventListener('click',function(){
var e = document.querySelector('.zzc')
var one = document.querySelectorAll('.test')[1]
//创建一个元素
var div = document.createElement('div')
var text = document.createTextNode('zzzccc')
div.appendChild(text)
// e.removeChild(one)//移除指定元素
// e.appendChild(div)//在末尾插入元素
// e.replaceChild(div,one)//替换元素
// e.insertBefore(div,one)//在指定元素前面插入元素
var first = e.firstElementChild.cloneNode(true)//复制类名为zzc的第一个子元素
var last = e.lastChild.cloneNode(true)//复制类名为zzc的最后一个子元素
e.appendChild(last)
})

</script>
<style>
  .test{
    border: 1px solid skyblue;
  }
</style>

在这里插入图片描述
实际业务

//模拟鼠标点击
var mouse = document.createElement('a')
mouse.setAttribute('href','https://www.baidu.com/')
mouse.setAttribute('target','_blank')
mouse.setAttribute('download', '');//下载的文件命名
mouse.click()

一只金牛座的崽

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js原生操作Dom（模拟鼠标点击）

createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点添加：appendChild()移出：removeChild()替换：replaceChild(newNode,oldNode)插入：insertBefore(newNode,oldNode)复制：cloneNode(true)查找：getElementsByTagName() //通过标签名称getEleme
复制链接

扫一扫