原生js操作dom的方法

最新推荐文章于 2022-12-05 18:23:54 发布
最新推荐文章于 2022-12-05 18:23:54 发布
阅读量166 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/m2gIGj8g1iU/blog/809910
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

今天学习了原生js的dom节点的操作，就记录下来，仅供自己以后参考。

1)创建节点：除了可以使用createElement创建元素，也可以使用createTextNode创建文本节点.

document.body指向的是<body>元素;document.documentElement则指向<html>元素

// 创建节点 

var

createNode = document.createElement("div");

 

 

var

createTextNode = document.createTextNode("hello world");

 

createNode.appendChild(createTextNode);

document.body.appendChild(createNode);

document.documentElement.appendChild(createNode);

2)插入节点：可以使用appendChild，insertBefore，insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面

// 插入节点 

var

createNode = document.createElement("div");

 

 

var

createTextNode = document.createTextNode("hello world");

 

createNode.appendChild(createTextNode);

 

var

div1 = document.getElementById("div1");

 

document.body.insertBefore(createNode,div1);

3)替换和删除元素，从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点div1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。

// 替换元素 
var replaceChild = document.body.replaceChild(createNode,div1);

// 删除元素 
var removeChild = document.body.removeChild(div1);

4)节点的属性：

firstChild:第一个子节点

lastChild:最后一个子节点

childNodes:子节点集合，获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)

nextSibling:下一个兄弟节点

previousSibling：上一个兄弟节点

parentNode：父节点

< ul  id ="ul" >< li > sdsssssss </ li >< li > qqqq </ li >< li > wwww </ li >< li > eeee </ li></ ul >

// 节点属性 

var

ul = document.getElementById("ul");

 

 

var

firstChild = ul.firstChild;

 

console.log(firstChild.innerHTML);

 

var

lastChild = ul.lastChild;

 

console.log(lastChild.innerHTML);

 

var

length = ul.childNodes.length;

 

console.log(length);

 

var

secondChild = ul.childNodes.item(1);

 

console.log(secondChild.innerHTML);

 

var

forthChild = ul.childNodes.item(2).nextSibling;

 

console.log(forthChild.innerHTML);

 

var

thridChild = forthChild.previousSibling;

 

console.log(thridChild.innerHTML);

 

var

parentNode = forthChild.parentNode;

 

console.log(parentNode.innerHTML);

5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。

// 文本片段 

var

fragment = document.createDocumentFragment();

 

 

var

ul = document.getElementById("ul");

 

var li = 

null

;

 

for (

var

i = 4; i >= 0; i--) {

 

li = document.createElement("li");

li.appendChild(document.createTextNode("item "+i));

fragment.appendChild(li);

}

ul.appendChild(fragment);

6）克隆元素

someNode.cloneNode(true):深度克隆，会复制节点及整个子节点

someNode.cloneNode(false):浅克隆，会复制节点，但不复制子节点

// 克隆 
var clone = ul.cloneNode(

true

);

 

document.body.appendChild(clone);

1、childNodes.length存在跨浏览器的问题

可以看到有关列表的html片段没有用

< ul  id ="ul"

>

 

< li > sdsssssss </ li

>

 

< li > qqqq </ li

>

 

< li > wwww </ li

>

 

< li > eeee </ li

>

 

</ ul

>

这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取ul.childNodes.length的结果有差异：

在ie中，ul.childNodes.length不会计算li之间的换行空格，从而得到数值为4

在ff、chrome,safari中，会有包含li之间的空白符的5个文本节点，因此ul.childNodes.length为9

若要解决跨浏览器问题，可以将li之间的换行去掉，改成一行书写格式。

2、cloneNode存在跨浏览器的问题

在IE中，通过cloneNode方法复制的元素，会复制事件处理程序，比如，var b = a.cloneNode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。

在ff,chrome,safari中，通过cloneNode方法复制的元素，只会复制特性，其他一切都不会复制

因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。

转载于:https://my.oschina.net/m2gIGj8g1iU/blog/809910

weixin_33802505
关注
JS原生操作DOM（更新中）
Nana_9457的博客
12-21 548
在React项目中有时需要原生的JS操作DOM（项目没有引用jquery库），这里持续更新一些方法： 一、父子节点中插入中间层（div等） 最近在做一个需求，一个后端返回的html代码中给图片加“查看原图”按钮，由于需要基于父元素定位，所以要用div将原有的img包起来，并且在img后加入input标签，需要用到插入中间层的功能。 思路：通过img获取到父元素，在父元素中添加新的div子元素，然后...
原生JS操作DOM的方法
weixin_47735939的博客
01-19 1303
前言 现在框架应用比较广泛，封装了DOM操作操作，但是DOM是前端‘攻城狮’的基础，必备的知识，只会VUE不懂得DOM操作前端‘攻城狮’，不会太长久 DOM JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点 整个文档是一个文档节点 每个标签是一个元素节点 包含在元素中的文本是文本节点 元素上的属性是属性节点 文档中的注释是注释节点 DOM树结构 DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把htm
原生JS操作DOM的一些常用方法集合【转】
weixin_30460489的博客
06-24 175
一直用JQuery，今天忽然想不用JQuery实现一些功能，在这个过程中，发现自己对原生的JS很不熟悉，找了点资料，在此做个记录吧！ JS-DOM Element方法和属性 S-DOM Element方法和属性一,获取html元素1.getElementByID(id)通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.example:<div id="divid"&gt...
Javascript原生的DOM操作方法
依古比古的博客
06-03 569
Javascript的DOM操作方法 原生js5中操作dom一共是有三种方法： 第一种：标签式的绑定（HTML事件处理） 第二种：DOM0级事件处理 第三种:DOM2级事件处理 但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。 但是跟随时代发展潮流的同时，我们也不能忘记了原生！！！ 补充一个面试题 vue 和jQuery最大的区别： jQuery：是一个操作DOM的神奇， 我们可以通过$(),ajax $().get等 vue呢 是数据驱动组
原生js操作DOM
WeiAiGeWangFeiYuQing的博客
11-21 595
目录内容操作表单元素闭合标签属性操作闭合标签表单元素样式操作行间样式行外样式元素类（class）操作获取类设置类删除类图片src操作 内容操作 表单元素 对于input这种半闭合标签，操作内容是操作它的value值。 （1） 获取value —&amp;amp;amp;amp;amp;amp;amp;amp;gt; 元素.value （2）设置value —&amp;amp;amp;amp;amp;amp;amp;amp;gt; 元素.value = 值 &amp;amp;amp;a
原生JS操作DOM方法
ALIN的博客
04-12 181
dom.parentNode; //得到父节点 dom.nextSibling; //获得下一个兄弟节点 dom.previousSibling; //得到上一个兄弟节点 dom.firstChild; //获得第一个子节点 dom.lastChild; //获得最后一个子节点 dom.parentNode; //获得父节点 dom.nextSibling; //获得下一个兄弟节点 dom.previousSibling; //得到上一个兄弟节点 dom.firstChi.
js原生DOM操作
最新发布
zyy446688的博客
12-05 1086
js原生DOM操作
原生js操作dom实现上下左右移动.docx
11-23
"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先，我们需要了解什么是DOM，以及如何使用JavaScript来操作DOM。 DOM（Document Object Model，文档对象...
原生JS实现DOM加载完成马上执行JS代码的方法
12-10
这时，我们可以利用原生JavaScript实现DOM加载完成即刻执行的JS代码，避免不必要的延迟。 `jQuery`提供了`$(document).ready()`方法，它在DOM准备就绪时执行，但为了不依赖整个jQuery库，我们可以模仿其工作原理来...
原生JS和jQuery操作DOM对比总结
10-20
本文将对比原生JavaScript和jQuery两种方式在DOM操作上的差异和优劣。 ### 一、创建元素节点 **原生JavaScript** 使用`document.createElement()`方法创建元素节点，例如创建一个`<p>`元素： ```javascript var ...
原生JS操作DOM的方法？
weixin_46409887的博客
06-26 1720
JS操作DOM 1,DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。 1)元素节点：构成了DOM的基础。文档结构中，是根元素，代表整个文档， 其他的还有,,,等等。元素节点之间可以相互包含(当然遵循一定的规则) 2)文本节点：包含在元素节点中。 3)属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的 2,js中获取dom元素的方式有哪些？ //通过ID var li = document.getElementById(“first”); //通过
JS原生常用dom操作方法？
kobezzZ的博客
08-02 366
js原生dom操作方法？ 查找：getElementsById,getElementsByTagName,querySelector,querySelectorAll。 插入：appendChild，insertBefore。 删除：removeChild。 克隆：cloneNode。 设置和获取属性：setAttribute(“属性名”，“值”)，getAttribute(“属性名”)。 ...
js 原生dom 操作
SK_study的博客
03-26 3367
js 原生操作dom的方法
原生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 ​当前节点的后一个（下一个）节点 注：只会获取到元...
【javascript】原生js对Dom节点的操作方法总结（一）
qq_40591925的博客
09-28 3455
原生js对Dom节点的操作方法总结, getComputedStyle, 节点位置， getBoundingClientRect， 滚动监听， getAttribute，setAttribute, DOM节点创建节点、添加节点、删除节点、复制节点、替换节点, 判断节点类型, 获取元素(document.getElementById等)， 节点关系及获取方式 innerHTML 、 innerText、outerhtml的区别
（转载）原生 JS DOM 操作
RealizeInnerSelf丶
07-21 283
目录【转载】修改文档(document)例子：展示一条消息创建一个元素创建一条消息插入方法insertAdjacentHTML/Text/Element节点移除克隆节点：cloneNodeDocumentFragment老式的 insert/remove 方法聊一聊 “document.write”总结 本文从现代 JavaScript 教程中转载：修改文档(document) 原文写的非常好...
原生JS DOM操作方法汇总
weixin_34405557的博客
01-09 759
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文本节点，文本内容为data 3. document.createDocumentFragment() 创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但...
原生js常用操作dom总结
6块腹肌的博客
01-12 456
美好的周末居然没有出去溜达～～～ 那就对上半年使用原生js开发项目时常用的操作DOM方法做个总结、记录 DOM，我们可以理解为JavaScript访问、操作（新增元素、删除元素、修改元素、）HTML的一个接口。 常用的DOM方法有： 1、getElementById(id)，参数是string，获取带有制定id的元素； 2、appendChild(node)，参数是对象，插入新的子节点； ...
使用原生JS操作DOM实现元素移动
"该文档是关于使用原生JavaScript操作DOM来实现元素的上下左右移动的教程。通过创建和操作CSS样式以及监听键盘事件，可以创建一个简单的游戏或交互式元素，用户通过键盘上的上、下、左、右箭头键控制一个红色圆形...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值