原生JavaScript对dom节点操作总结

在开发javascript程序的时候使用到最多的就是对dom的操作,今天我们也就把就把原生javascript对dom节点的操作进行一个总结,大家对javascript操作dom节点理解的不完全的可以看看。

1、获取元素节点

获取单个元素:document.getElementById(); document.querySelector()//获取第一个元素;

获取多个元素(可以通过下标来选取单个元素,返回一个元素集合,相当于一个数组):

document.getElementsByTagName(); document.getElementsByName(); document.getElementsByClassName();// 动态,实时的 document.querySelectorAll();// 查找速度比上面的块 //是静态的,非实时的,

登录后复制

创建元素,文本 

立即学习“Java免费学习笔记(深入)”;

document.createElement(“p”); document.createNode(“hello”) //创建文件节点。

登录后复制

插入到文档 

parentNode.appendChild(newNode), parentNode.insertBefore(newNode,positionNode);

登录后复制

属性操作 

ele.setAttribute(name,value)//设置属性 ele.getAttribute(name)//获取元素的属性 ele.removeAttribute(name)//移除属性

登录后复制

节点移除 

ele.remove(),parentNode.removeChild(childNode)

登录后复制

替换子元素 

parentNode.replaceChild(newNode,oldNode)

登录后复制

复制元素 

ele.cloneNode(boolean);// boolean为true, 深复制。

登录后复制

2、获取子元素、父元素、兄弟元素 

ele.previousElementSibling;//上一个兄弟元素 ele.parentNode;//父元素 ele.children//子元素 ele.nextElementSibling//下一个兄弟元素

登录后复制

更多关于节点操作:

jQuery中DOM节点操作方法总结

以上就是原生JavaScript对dom节点操作总结的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784303.html

(0)
上一篇 2025年3月8日 17:03:22
下一篇 2025年3月8日 17:03:30

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • commonJS详解

    这次给大家带来commonjs详解,使用commonjs详解的注意事项有哪些,下面就是实战案例,一起来看一下。 commonJS概述 所有代码都运行在模块作用域,不会污染全局作用域。模块可以多次加载,但是只会在第一次加载时运行一次,然后运行…

    编程技术 2025年3月8日
    100
  • 利用js实现时尚的拖拽功能

    我们在一些网站中都可以看到很时尚炫酷的图片拖拽,当然这些操作用javascript就可以实现,那么我们今天就来讲一下如何使用javascript实现拖拽功能的,没有了解过javascript实现拖拽功能的或者感兴趣的我们一起来看看吧! 需要…

    编程技术 2025年3月8日
    200
  • 让页面动起来的WOW.js

    这次给大家带来让页面动起来的wow.js,让页面动起来的wow.js的注意事项有哪些,下面就是实战案例,一起来看一下。 ## 简介有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 i…

    2025年3月8日
    200
  • JavaScript简单的实现瀑布流

    瀑布流,又称瀑布流式布局,是比较流行的一种网站页面布局,相信有些同学还是并不太懂或者并没有了解过瀑布流是什么,那么我们今天就来详细的讲一下javascript是如何实现瀑布流的吧。 知识点: 1、如何找到数组中的最小值. 默认第一个为最小值…

    编程技术 2025年3月8日
    200
  • 怎样使用gulp自动优化requireJS的项目

    这次给大家带来怎样使用gulp自动优化requirejs的项目,使用gulp自动优化requirejs的项目的注意事项有哪些,下面就是实战案例,一起来看一下。 {    “name”: “gulp-requireDemo”,    “ver…

    编程技术 2025年3月8日
    200
  • 对JavaScript中的事件的分类

    我们也都知道javascript中的事件是有很多种,而且还很常用,重要的是还不好记住,写到javascript事件的时候就看一次,找的时候还并不是很好找,这很头疼了,那么我们就来对javascript中的事件进行一下分类 鼠标点击事件 mo…

    编程技术 2025年3月8日
    200
  • 前端微信分享jssdk config:invalid signature 签名错误的解决方法

    这次给大家带来前端微信分享jssdk config:invalid signature 签名错误的解决方法,前端微信分享jssdk config:invalid signature签名错误的解决方法注意事项有哪些,下面就是实战案例,一起来看…

    编程技术 2025年3月8日
    200
  • javascript数组和字符串的常见用法

    js中数组和字符串理解起来很简单,但是一些常见用法由于比较杂乱,记起来并不容易而且也容易混淆。我把js数组和js字符串的用法总结了一下,并且道明了其中的差别。有不太熟悉的同学可以学习学习看看哦! 1、数组和字符串的转换  join(); 首…

    2025年3月8日 编程技术
    200
  • 使用JavaScript简单实现三级联动

    在实际的javascript项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等。我们今天就来讲解一下javascript实现三级联动,还有javascript源码分享给大家哦!不太熟悉javascript实现三级联…

    编程技术 2025年3月8日
    200
  • 基础的JavaScript知识总结(一)

    这次给大家带来基础的javascript知识总结,总共有十一个知识点,这是第一个,下面就是实战案例,一起来看一下。 写在最前面 JavaScript 是属于网络的脚本语言!JavaScript被数百万计的网页用来改进设计、验证表单、检测浏览…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论