DOM更新中

最新推荐文章于 2023-06-24 23:51:13 发布
最新推荐文章于 2023-06-24 23:51:13 发布
阅读量154 收藏
点赞数
分类专栏： biji 文章标签： JS DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44602489/article/details/88034894
版权

DOM

document object model
文档 从 html 到/html结束
对象
在这里插入图片描述
在这里插入图片描述

DOM节点的种类

元素节点


属性节点 id = ‘div1’
文本节点 div文本

获取元素节点

先给一个完整的环境，不包含script

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#div1{width: 100px; height: 100px; background-color: red}
		</style>
	</head>
	<body>
		<div id = 'div1'></div>
		<ul id = 'ul1'>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
		</ul>
		<ol>
			<li>222222222</li>
			<li>222222222</li>
			<li>222222222</li>
		</ol>
	</body>
</html>

document.getElementById()

window.onload = function(){
	var oDiv = document.getElementById("div1");
	alert(oDiv);//[object HTMLDivElement]
}

只想去获取ul1下面的li标签

var oUl1 = docnment.getElementById("ul1");
var aLis = oUl1.getElementsByTagName("li");
alert(aLis.length);
}

document.getElementsByName()
node.getElementsByTagName()

window.onload = function(){
	var aLis = document.getElementsByTagName("li")
	alert(aLis); //[object HTMLCollection]
	alert(aLis.length);//8
	alert(aLis[5].innerHTML);//222222222
}

node.getElementsByClassName()

。。。懒得写了有点多，以后再更新吧，对不住了兄弟们。

徐普通
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS原生操作DOM（更新中）
Nana_9457的博客
12-21 511
在React项目中有时需要原生的JS操作DOM（项目没有引用jquery库），这里持续更新一些方法： 一、父子节点中插入中间层（div等） 最近在做一个需求，一个后端返回的html代码中给图片加“查看原图”按钮，由于需要基于父元素定位，所以要用div将原有的img包起来，并且在img后加入input标签，需要用到插入中间层的功能。 思路：通过img获取到父元素，在父元素中添加新的div子元素，然后...
解决vue中虚拟dom,无法实时更新的问题
01-21
原理：nextTick可以在下一次更新dom之后进行回调，我的问题在于，在页面加载完成时无法获取虚拟dom，而使用回调函数后就可以获取到正确的dom数量，所以只需要在nextTick函数中执行jq函数就可以正确获取了。...
DOM更新
curry_zhao的博客
03-10 771
拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： // 获取... var p = document.getElementById('p-id'); // 设置文本为abc: p.innerHTML = 'ABC';
更新DOM节点
qq_45326705的博客
11-08 169
更新DOM节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="father"> <h1>这是标签</h1> <p id="p1">这是段落</p> <p class="p...
Python更新DOM的5种方式：BeautifulSoup、lxml、Scrapy、pyquery、requests-html
小龙在线
03-31 762
在Python中，我们通常使用BeautifulSoup库来解析和修改HTML文档（DOM）。然后，你可以使用BeautifulSoup来解析HTML字符串并更新DOM。在这个例子中，我们首先解析HTML字符串，然后找到。
JavaScript--更新DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-14 2615
1. 更新DOM 1.1 更新节点 拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改 innerHTML 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： 使用innerHTML设置文本 <body> <div id="item"></div> </body> <script> let item = documen
JavaScript之DOM插入更新删除_动力节点Java学院整理
10-19
主要为大家详细介绍了JavaScript之DOM插入更新删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML DOM Viewer
12-12
说明：用来查看DOM的工具，可以当作手册来用，也可以用来Debug,很方便的说 把代码copy到要调试的页面中，浏览时点击DOM Tester链接就会打开DOM查看，双击展开对象，右边的文本框里显示的是属性值，修改文本框会改变...
解决vue页面DOM操作不生效的问题
11-28
现象： 使用Element UI渲染了一个树形结构，设计在鼠标移入每个节点是显示其中的操作按钮，效果如下： ...‘在下次 DOM 更新循环结束之后执行延迟回调’，这句话不是特别理解，不过可以看出DOM更新是一个循环
JavaScript DOM 操作 局部刷新
11-17
实现使用JavaScript DOM　操作实现网页局部刷新
[译] Angular DOM 更新机制
weixin_34279246的博客
04-15 507
原文链接：The mechanics of DOM updates in Angular 由模型变化触发的 DOM 更新是所有前端框架的重要功能（注：即保持 model 和 view 的同步），当然 Angular 也不例外。定义一个如下模板表达式： &lt;span&gt;Hello {{name}}&lt;/span&gt; 复制代码或者类似下面的属性绑定（注：这与上面代码等价）： &l...
js浏览器操作DOM之更新DOM
weixin_33709590的博客
08-16 348
拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); ...
Vue 的 DOM 更新策略和 nextTick() 的使用
weixin_43299180的博客
04-26 6959
一、Vue 的 DOM 更新策略 Vue 的响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。那么 DOM 更新的策略是什么样的呢？ Vue 官网说明： Vue 在更新 DOM 时是 异步执行 的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新
js操作DOM树：更新、插入、删除等
weixin_45709829的博客
10-05 937
js基础之操作DOM 一、浏览器介绍 （1）BOM：浏览器对象模型 （2）javascript诞生就是为了让他能在浏览器中运行。 （3）window代表浏览器窗口 （4）Navigator，封装了浏览器的信息 大多数时候都不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码 （5）screen 屏幕的尺寸 （6）location（重要） 代表当前页面的URL信息 location.assgin('https://')//设置新的地址 自己在浏览器输入，就可以获取一些信息
Vue 如何更新 DOM
学习笔记
05-14 2605
DOM: document object model, 文档对象模型，即由浏览器呈现的html内容。 Virtual DOM: 基于 JS 的 DOM， 只存在于内存中。 Vue 如何更新实际 DOM：简单地说，Vue 在内存中维护一个虚拟 DOM，每当数据发生任何变化时，Vue 会检测到这种变化，然后创建一个新的虚拟 DOM，将其与旧的虚拟 DOM 进行比较，并检测差异，然后将这两个虚拟 DOM 之间的差异写入真实 DOM。( 实际上Vue 对此进行了许多优化，例如它不会一直重新创建整个虚拟 DOM，从而
JavaScript详解DOM和BOM(持续更新)
giaogege666的博客
02-09 110
JavaScript是我们有能力创建动态页面，而且事件是可以被JavaScript侦测到的行为。意思就是：事件的触发—>到事件的响应网页中的每个元素都可以产生JavaScript的事件，例如，我们可以在用户点击按钮时产生一个网页，然后去执行某些操作。
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
我只是个很菜的前端
07-26 2533
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
JS更新DOM节点
qq_51325652的博客
06-24 439
JavaScript的更新DOM节点基本内容
js定时器更新DOM
最新发布
10-20
JS定时器可以用来更新DOM元素。通过定时器，可以在一定的时间间隔内改变指定DOM元素的内容，从而实现动态更新效果。在JS中，可以使用setTimeout和setInterval两个函数来创建定时器。setTimeout函数用于在指定的时间...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值