原生DOM 操作

最新推荐文章于 2022-11-23 14:27:08 发布

谷谷~

最新推荐文章于 2022-11-23 14:27:08 发布

阅读量268

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41005076/article/details/106059845

版权

dom.nodeType 查看元素节点类型

dom.childNodes 查看所有元素下面的所有子节点（空白节点也会获取到）

dom.children 查看所有元素下面的所有子节点(只获取元素节点)

dom.firstChild 获取第一个子节点

dom.lastChild 获取最后一个子节点

dom.parentNode 获取父节点

dom.previousSibling 获取上一个兄弟节点

dom.nextSibling 获取下一个兄弟节点

document.createElement(div) 创建元素节点

dom.appendChild(div) 追加子元素（上树）

dom.removeChild(div) 移除子元素（下树）

father.insertBefore(新child,参照child) 返回值新child

father.replaceChild(新child,替换掉的child) 返回值替换掉的child

node.cloneNode(bool) 克隆节点，bool值为false只克隆自身节点，bool值为true复制自身和孩子节点

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

谷谷~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JS原生操作DOM（更新中）

Nana_9457的博客

12-21

548

在React项目中有时需要原生的JS操作DOM（项目没有引用jquery库），这里持续更新一些方法：一、父子节点中插入中间层（div等）最近在做一个需求，一个后端返回的html代码中给图片加“查看原图”按钮，由于需要基于父元素定位，所以要用div将原有的img包起来，并且在img后加入input标签，需要用到插入中间层的功能。思路：通过img获取到父元素，在父元素中添加新的div子元素，然后...

js原生DOM操作

最新发布

zyy446688的博客

12-05

1088

js原生DOM操作

参与评论您还未登录，请先登录后发表或查看评论

javascript 原生方法对dom节点的操作，创建、添加、删除、替换、插入、复制、移动等操作

代码一身

10-21

9994

创建节点添加

原生的DOM操作

前端小知识

03-21

699

虚拟DOM和diff算法虚拟dom就是用对象的方式区代真实的dom操作。当页面打开时浏览器解析HTML元素，构建一个dom树，将状态保存起来，在内存中模拟dom操作，又会生成一个dom树，两个进行比较，根据diff算法找出不同的地方，之渲染一次不同的地方 diff算法：就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom JS中所有全局都是window的 window的作用:在封闭空间中声明一个全局的变量全局变量和函数都属于window

常用的原生DOM操作汇总

weixin_42491987的博客

05-26

1798

一、常见DOM操作 1. 获取查找DOM元素 Ele.getElementById(idName) 通过id查找元素。返回的是元素DOM，如果页面上有多个相同ID的元素，则只会返回第一个元素，不会返回多个（原则上ID只有一个，但伟大的程序员们。。。） Ele.getElementsByClassName(className) 通过class查找。返回的是类数组结构，要想进行forEach遍历，需要先转化为数组结构 > const doms = document.getElementsByClassNa

js 原生dom 操作

SK_study的博客

03-26

3371

js 原生操作dom的方法

用于节点操作的API，颠覆原生操作HTML DOM节点的API

09-05

2. **插入和删除节点**：原生DOM API提供了如`appendChild`、`insertBefore`、`removeChild`等方法，但这些方法需要精确的节点引用，而且操作复杂，尤其是在处理多个节点或在特定位置插入新节点时。以jQuery为例，...

javascript 原生Dom对象和jQuery对象的联系和区别

06-08

原生DOM操作的优点是直接、高效，但其API较为复杂，需要编写更多的代码来实现相同的功能。 jQuery是一个流行的JavaScript库，它提供了一套简洁的API来操作DOM。当你通过`$`函数选择元素时，得到的就是jQuery对象。...

PHP原生DOM对象操作XML.pdf

09-30

在本文件中，我们将学习如何使用PHP的原生DOM对象来创建、操作XML文档。原生DOM对象指的是PHP标准库中提供的用于解析和操作XML的DOMDocument类和相关类。首先，创建一个DOMDocument对象，并设置文档类型为XML。...

原生js操作dom实现上下左右移动.docx

11-23

"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先，我们需要了解什么是DOM，以及如何使用JavaScript来操作DOM。 DOM（Document Object Model，文档对象...

原生DOM操作

Zxf_xcn的博客

05-27

251

查找DOM Ele.getElementByClassName() Ele.getElementsByTagName() Ele.querySelector() | Ele.querySelectorAll('.warp a')//快速查找warp下的所有a 给DOM添加样式 Ele.style.width = 12 给元素添加class Ele.className = 'aaa'//直接覆盖之前的类名 Ele.classList.add = 'aaa'//不覆盖 Ele.className +

混淆篇之原生DOM操作方法小结

weixin_34195142的博客

08-04

113

　 1.0 DOM结构 1.1先来看结构图：父节点兄弟节点当前节点属性节点子节点兄弟节点一般任意一个节点我们都会从父节点，子节点，以及兄弟节点的角度去考察。节点一般我们只需关注元素节点，属性节点及文本节点即可。 1.2 节点的相关属性（只读的） 1.2...

原生DOM操作汇总

Kevin_zuo的博客

07-12

508

节点类型 Attr Document Element Text ……其他节点之间的关系父节点：parentNode 子节点：childNodes 前一个兄弟节点：nextSibling 后一个兄弟节点：previousSibling 第一个子节点：firstChild 最后一个子节点：lastChild 节点元素关系

js原生dom操作

火焰

03-19

395

1.创建元素 var a=document.createElement("a"); var node1 = document.createElement('div'); var node2 = document.createTextNode('hello world!'); 2.添加子元素、删除子元素 document.body.appendChild(a); document.body.remo

原生js操作DOM

WeiAiGeWangFeiYuQing的博客

11-21

595

目录内容操作表单元素闭合标签属性操作闭合标签表单元素样式操作行间样式行外样式元素类（class）操作获取类设置类删除类图片src操作内容操作表单元素对于input这种半闭合标签，操作内容是操作它的value值。（1）获取value —&amp;amp;amp;amp;amp;amp;amp;gt; 元素.value （2）设置value —&amp;amp;amp;amp;amp;amp;amp;gt; 元素.value = 值 &amp;amp;a

原生JS-DOM操作

乐于探索,乐于奉献,追求极致,向往生活

12-07

428

前言：开头不妨咱们先一块了解下，究竟什么是“原生的JS”，这样也帮助咱们构建一个完整的知识体系。 1：ECMAScript:规定了js语言核心语法的标准；2：Dom专门操作网页内容的API，例如常见的操作document.write("")；3：Bom专门操作浏览器窗口的API，例如弹出浏览器的提示框（alert.prompt("")）。 -------------------------...

原生DOM对象操作

weixin_56893328的博客

07-02

137

DOM 对象文本的修改 ele.innerText = “”; 只支持文本; var div = dcoument.querySelector("div"); div.innerText = "我是innerText修改的文本" ele.innerHTML = “” ; 支持文本及标签; var div = document.querySelector("div"); div.innerHTML = "<span>我是innerHTML修改的文本</span>"

原生js 之 (DOM操作）

m0_49515138的博客

11-23

2146

Element.classList.add (“类名”) // 添加类名操作可添加多个不会覆盖原有的类名。Element.classList.remove( “ 移除类名”) // 移除类名操作可移除多个类名。Element.classList.toggle( “切换类名 ”) //切换类名无则添加，有则移除。(false为捕获阶段，true为冒泡阶段)但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）

原生js的dom操作(常用的整理)

jonsen的博客

05-29

1980

父节点parentNode第一个子节点只会获取到元素节点firstElementChild ★★★★★ 第一个子节点 (如果有文本节点将会获取到文本节点)firstChild最后一个节点只会获取到元素节点lastElementChild ★★★★★最后一个子节点 (如果有文本节点将会获取到文本节点)lastChild 当前节点的后一个（下一个）节点注：只会获取到元...