原生JS操作DOM方法

最新推荐文章于 2022-11-23 14:27:08 发布
最新推荐文章于 2022-11-23 14:27:08 发布
阅读量176 收藏
点赞数
分类专栏： 前端 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youmagongsheng/article/details/115630189
版权 
 

dom.parentNode;   //获得父节点
dom.nextSibling;   //获得下一个兄弟节点
dom.previousSibling;  //得到上一个兄弟节点
dom.firstChild;   //获得第一个子节点
dom.lastChild;   //获得最后一个子节点

dom.childNodes  //获得所有子元素

e.stopPropagation()

e.preventDefault()

 

Colyn Yu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS操作DOM的方法
weixin_47735939的博客
01-19 1262
前言 现在框架应用比较广泛，封装了DOM操作操作，但是DOM是前端‘攻城狮’的基础，必备的知识，只会VUE不懂得DOM操作前端‘攻城狮’，不会太长久 DOM JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点 整个文档是一个文档节点 每个标签是一个元素节点 包含在元素中的文本是文本节点 元素上的属性是属性节点 文档中的注释是注释节点 DOM树结构 DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把htm
原生JS--DOM的操作
苛性钠的博客
12-14 267
准备好了吗？基础概念别睡着了喔 。。。 查找DOM元素 按照HTML查找 document.getElementById 通过id获取元素 document.getElementsByTagName 通过标签名获取元素 返回类数组 document.getElementsByName 通过name属性查找元素 多用于表单 返回动态类数组 document.getElementsByClassName 通过类名获取元素 document.querySelector 通过css选择器获取元素 得到匹配的第一
js 原生dom 操作
SK_study的博客
03-26 3302
js 原生操作dom的方法
原生js 之 (DOM操作）
m0_49515138的博客
11-23 2067
Element.classList.add (“类名”) // 添加类名操作 可添加多个 不会覆盖原有的类名。Element.classList.remove( “ 移除类名”) // 移除类名操作 可移除多个类名。Element.classList.toggle( “切换类名 ”) //切换类名 无则添加，有则移除。(false为捕获阶段，true为冒泡阶段)但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
原生js获取dom和jQuey获取dom的区别
jessica_007的博客
05-30 1905
1、原生js获取的dom，通过id获取到的就是当前对应的节点，而 通过class获取返回的是 HTMLCollection 对象。HTMLCollection 对象类似包含所有 HTML 元素的一个数组。参考菜鸟教程和HTMLCollection 。通过索引获取到自己想要的节点。 2、jQuery哪种方式获取dom返回的都是一个数组。可以通过length检查是否存在当前节点。 3、原生就是获取的d...
Javascript原生的DOM操作方法
依古比古的博客
06-03 551
Javascript的DOM操作方法 原生js5中操作dom一共是有三种方法： 第一种：标签式的绑定（HTML事件处理） 第二种：DOM0级事件处理 第三种:DOM2级事件处理 但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。 但是跟随时代发展潮流的同时，我们也不能忘记了原生！！！ 补充一个面试题 vue 和jQuery最大的区别： jQuery：是一个操作DOM的神奇， 我们可以通过$(),ajax $().get等 vue呢 是数据驱动组
【javascript】原生js对Dom节点的操作方法总结（一）
qq_40591925的博客
09-28 2610
原生js对Dom节点的操作方法总结, getComputedStyle, 节点位置， getBoundingClientRect， 滚动监听， getAttribute，setAttribute, DOM节点创建节点、添加节点、删除节点、复制节点、替换节点, 判断节点类型, 获取元素(document.getElementById等)， 节点关系及获取方式 innerHTML 、 innerText、outerhtml的区别
原生JS实现DOM加载完成马上执行JS代码的方法
12-10
这时，我们可以利用原生JavaScript实现DOM加载完成即刻执行的JS代码，避免不必要的延迟。 `jQuery`提供了`$(document).ready()`方法，它在DOM准备就绪时执行，但为了不依赖整个jQuery库，我们可以模仿其工作原理来...
原生js操作dom实现上下左右移动.docx
11-23
"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先，我们需要了解什么是DOM，以及如何使用JavaScript来操作DOM。 DOM（Document Object Model，文档对象...
原生JS和jQuery操作DOM对比总结
10-20
本文将对比原生JavaScript和jQuery两种方式在DOM操作上的差异和优劣。 ### 一、创建元素节点 **原生JavaScript** 使用`document.createElement()`方法创建元素节点，例如创建一个`<p>`元素： ```javascript var ...
dom-living-examples:一些原生JS操作DOM实例
05-25
总之，DOM是Web开发的核心部分，原生JavaScript的DOM操作是每个前端工程师必须掌握的基本技能。通过`dom-living-examples`这个资源，你可以深入学习这些技术，从而更好地控制和动态更新网页内容。不断练习和理解这些...
原生JS实现几个常用DOM操作API实例
12-29
原生实现jQuery的sibling方法 <body> 我是span标签 我是一个div 我是标题 我是一个段落 [removed] //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a = [];...
js中的简单DOM操作
wdtn5656的博客
10-21 3268
js中的简单DOM操作&操作元素样式&操作元素的属性&操作元素的类名& 操作元素的内容&节点&获取可视窗口的尺寸&获取元素偏移值的方式&获取元素尺寸
原生JS DOM操作方法汇总
weixin_34405557的博客
01-09 731
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文本节点，文本内容为data 3. document.createDocumentFragment() 创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但...
jQuery获取元素和原生js获取元素有什么区别
qq_41273137的博客
04-05 876
jQuery获取元素和原生js获取元素有什么区别
jQuery获取的dom对象和原生的dom对象有何区别
qq_38935512的博客
08-10 795
js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合
常见的原生javascript DOM操作
weixin_34121304的博客
12-01 369
打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@qq.com 看图识文（取自 寒冬winter 的微博）。文章里引用了MDN和《javascript高级程序设计3》里的知识。如有不对的地方，敬请指出。 1.创建元素 创建元素：document....
原生js的dom操作
weixin_小白鼠的博客
09-16 597
dom操作 获取dom 标签名获取 doucment.getElementByTagName("div") document.querySelector("div") className获取 document.getElementByClassName("class") document.querySelectorAll(".class") document.querySelector(".class") 前两个获取的是所有含有"class"这个类名的dom,返回一个类数组 最后一个是获取第一个含
js原生获取dom元素方法
最新发布
10-14
可以使用以下方法获取 DOM 元素： 1. document.getElementById(id)：根据元素的 id 属性获取元素。 2. document.getElementsByTagName(tagName)：根据元素的标签名获取元素，返回一个 HTMLCollection 对象。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值