DOM..

最新推荐文章于 2024-09-05 23:22:16 发布
最新推荐文章于 2024-09-05 23:22:16 发布
阅读量809 收藏 21
点赞数 19
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AYBBZXY/article/details/134347867
版权

文章目录


起名字例如：obox，前面的o表示object（对象），表示一个div的对象，这样命名的好处是:可以一眼看出这个变量的数据类型和大概用途

DOM

  • DOM(Doucment Object Model):文档对象模型
  • 其实就是操作html中的标签的一些能力
  • 我们可以操作哪些内容
    • 获取一个元素
    • 移除一个元素
    • 创建一个元素
    • 向页面里添加一个元素
    • 给元素绑定一些事件
    • 获取元素的属性
    • 给元素添加一些css样式
  • DOM的核心对象就是document对象
  • document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
  • DOM:页面中的标签，我们通过js获取以后，就把这个对象叫做DOM对象

1.获取一个元素

  • 通过js代码来获取页面中的标签
  • 因为在一个页面中的id是唯一的，所以获取到的就是一个元素
    • 获取到的就是页面中的那个id为box的div标签👇
<body>
	<div id="box"></div>
	<script>
		var box=document.getElementById('box')
		console.log(box)//<div></div>
	</script>
</body>

</div id="box"></div>
<ul>
	<li class="newsitem">111</li>
	<li class="newsitem">111</li>
	<li class="newsitem">111</li>
	<li class="newsitem">111</li>
	<li class="newsitem">111</li>
	<li class="newsitem">111</li>
	<li class="newsitem">111</li>
</ul>
<script>
	//console.log(box)
	//box.innerHTML = "1111"
	/*标准的获取节点的方式，分为两大类

	html,head,body 非常规
	常规=>id,class,tag....
	*/

	//非常规👇
	console.log(document.documentElement)// rem
	console.log(document.head)//获取head部分
	console.log(document.body)//获取body

	//常规👇
	//getElementById
	var obox=document.getElementById("box")
	obox.innerHTML="111111"//执行结果如下第一张图

	/*根据class名字获取点,getElementsByClassName(意
	思是通过class的名字获取节点)*/
	var items = document.getElementsByClassName("newsitem")
	conosle.log(items)//伪数组
	//以上代码链接下面的①/②/③/④/⑤

	//法①：取元素👇
	items[0].innerHTML="news-1111"//拿到items的第0个元素，对第0个的innerHTML设置成那news-1111
	//执行结果为下面第二张图

	/*法②:因为是伪数组，只有长度的，所以可以进行for循
	环，对每一个进行处理，而不是一个个的👇*/
	for(var i=0;i<items.length;i++){
		items[i].innerHTML="new-"+i
	}
	//执行结果为下面第三张图


	/*Set =>Array.from  把伪数组或类似于伪数组的转化
	成一个真数组*/
	var newitems = Array.form(items)
	console.log(newitems.filter)



	/*法③：直接获取标签名getElementsByTagName(通过
	标签名获取节点)👇*/
	var items = document.getElementsByTagName("li")
	console.log(items)


	//通过name找元素,适用于input👇
	<input name="username" type="text"/>
	<input name="password" type="password"/>

	var item = document.getElementsByName("username")
	console.log(item[0])
	item[0].value = "zxy"
	//执行结果如下面第四张图
	

	/*法④：querySelector  只会返回一个对象，如果遇到
	多个，只会返回遇到的第一个，如ul li中的多个li，只
	会返回第一个li*/
	var item = document.querySelector("#box")
	console.log(item)
	
	var item = document.querySelector("ul li")
	console.log(item)


	//法⑤：querySelectorAll
	var item = document.querySelectorAll("ul li")
	console.log(item)

	
</script>

上述代码展示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

操作元素属性

<div id="box" zxy="hello">hello</div>
<input type="text" value="hello" id="username">
<input type="checkbox" checked id="rember"/>
<img src="" alt="" id="photo">

<ul>
	<li zxyindex="1">1111</li>
	<li zxyindex="2">2222</li>
	<li zxyindex="3">3333</li>
</ul>

	<div id="box2" data-zxy="hello"></div>
<script>
	/*元素自带（原生）属性
	自定义属性
	*/
	//操作原生属性
	box.innerHTML=22222"
	username.type = "password"
		//console.log(rember.checked)
	rember.checked = false
	photo.src=""

	//自定义属性 setAttribute getAttribute removerAttributr
	box.setAttribute("tiechui","222222")
	console.log(box.getAttributr("tiechui"))

	box.removeAttribute("tiechui")
	box.removeAttribute("zxy")

	var oitems = ducument.getElementByTagName("li")

	for(var i=0;i<oitems.length;i++){
		oitems[i].setAttribute("zxyindex",i)
	}

	//data-***** .dataset,会显示所有带有data-的东西
	console.log(box2.dataset)//获取
	box2.dataset.xiaoming//设置
	delete box2.dataset.xiaoming//删除

	var oitems = document.getElementsByTagName("li")

	for(var i = 0;i<oitems.length;i++){
		oitems[i].dataset.index=i//通过oitems里面的每一个项，操作dataset，加的内容是index，设置成i
</script>

案例密码可视；购物车选项

操作元素文本内容

<head>
</head>
<body>
	<div id="box">
		hello word
		<div>zxy</div>
	</div>

	
	<input type="text" id="username" value="hello">


	<select name="" id="select">
		<option value="1">11111</option>
		<option value="2" selected>22222</option>
		//标上selected，列表中就会先选中22222
		<option value="3">33333</option>
	</select>
	<script>
		//innerHTML
		//innerText
		//value  用于表单元素的设置和获取
		
		console.log(box.innerHTML)//能解析html
		box.innerHTML="1111111"//赋值后，box里面的内容就只剩下1111111了


		conosle.log(box.innerText)//拿到的是所有纯文本
		box.innerText="<h1>1111111</h1>"
		/*执行出来还是<h1>1111111</h1>，应为它不解析
		html*/
		

		console.log(username.value)
		username.value="222222"//将文本框中的文本赋值为222222

		conosole.log(select.value)
		select.value="3"
		//把select赋值成3，那么就会优先显示3即33333
	</script>
</body>

已经能够操作元素文本内容：做一个简单的渲染页面的功能页面渲染

操作元素样式（一次只能操作一个）

获取和操作元素的样式

<head>
	<style>
		#box{
			height:100px;
			background-color:yellow;
		}
	</style>
</head>


<body>

	<div id="box" style="width:100px;color:black;background-color:yellow;">
		111111
	</div>
	<script>
		//只能获取行内样式的方法  style：id名+style+样式名
			console.log(box.style.width)
			console.log(box.style["background-color"])//要用大括号
			console.log(box.style.backgroundColor)//或者用驼峰式写法
			
			box.style.width = "200px"//也可以设置样式，直接赋值就可以了
			box.style["background-color"]="red"
			box.style.backgroundColor="red"
			
		/*内部样式和外部样式，都可以通过
		getComputedStyle这个方法来进行获取，其实这个
		方法，不但适用于内外部，同时也适用与行内，但
		是只能获取样式，不能赋值写样式*/
			var obox = document.getElementById("obox")
			/*如果想更严格一点的话，这个box就先用
			document.getElementById这样准确的来获
			取，再把获取的节点放大下面的var res里面
			当参数*/
			var res = getComputedStyle(obox).height
			//传入box这个节点
			console.log(res)
			//console.log(getComputedStyle())
			/*如果觉得敲getComputedStyle这个函数不
			方便。可以用var调用*/
			getComputedStyle(obox).width="10px"//设置宽度
			//getComputedStyle 标准
			//IE 低版本非标准浏览器obox.currentStyle.backgroundColor
	</script>
</body>

操作元素类名(实现批量操作)

<head>
	<style>
		.item{
			width:100px;
			height:100px;
			background-color:red;
			color:black;
			border-radius:10px;
		}//定义一个样式
	</style>
</head>

<body>
	<div id="box calss="item item1 item2""></div>
	<button id="btn">click</button>
	<script>
		//  .className这个属性
		console.log(box.className)//能直接读取这个box中的数据
		box.className="item item2"//直接命名覆盖，执行后只剩item和item2了
		box.className += " item3"//添加


		// 。classList这个属性
		conosle.log(box.classList)
			//增加
		box.classList.add("item3")//如果手都，写了重复的，比如写了“item2”，那么它回自动去除。不会重复添加
			//删除
		box.classsList.remove("item2")
			//切换:toggle
		//box.classList.toggle("item")
		btn.onclick = function(){
			box.classList.toggle("item")
		}//删除某一元素或添加回来
	</script>
<?body>

案例：选项卡简易选项卡

DOM节点

  • DOM的节点我们一般分为常用的三大类元素节点/文本节点/属性节点
  • 什么是分类，比如我们在获取元素的时候，通过各种方法获取到我们叫做元素的节点（标签节点）
  • 比如我们标签里面的文字，那么就是文本节点
  • 写在每一个标签上的属性，就是属性节点

元素节点

  • 我们通过getEle,entBy...获取到的都是元素节点

属性节点

  • 我们通过getAttribute获取的就是元素的属性节

文本节点

  • 我们通过innerText获取的就是元素的文本节点
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<head>
</head>
<body>
	<div>
		kerwin
		<p>1111111<p>
		<!-- 我是注释 -->
	</div>
	//这个div中有五个亲儿子节点👇1~5
	<script>
		/*
			1. \n
		kerwin
		\n
			2.<p>1111111</p>
			3. \n
			4. <!-- 我是注释 -->
			5. \n
		*/
	</script>
</body>

获取节点

  • childNodesL获取某一个节点下所有的子一级的元素
<head>
</head>
<body>
	<div>hello</div>1111
	<div id="box">
		kerwin
		<p>1111111<p>
		<!-- 我是注释 -->
	</div>
	<div>tiechui</div>
	//这个div中有五个亲儿子节点👇1~5
	<script>
		/*
			1. \n
		kerwin
		\n
			2.<p>1111111</p>
			3. \n
			4. <!-- 我是注释 -->
			5. \n
		*/


		//childNodes属性 vs children
		console.log(box.childNodes)//获取，box中所有的节点孩子全部找到（所有节点）
		console.log(box.childNodes)//获取所有元素节点（所有元素）

		//firstChild  firstElementChild
		console.log(box.firstChild)//第一个节点（文本kerwin）
		console.log(box.lastElementChild)//第一个元素节点（p标签）


		//firstChild  firstElementChild
		console.log(box.lastChild)//（最后一个节点
		console.log(box.lastElementChild)//最后一个元素节点


		// previousSibling  previousElementSibling(上一个兄弟节点   哥哥节点)
		console.log(box.previousSibling)//上一个兄弟111·
		console.log(box.previousElementSibling)//上一个div
		box.previousElementSibling.innerHTML="world"//把上一个div节点内容改成world


		// nextSibling  nextElementSibling(下一个兄弟节点   哥哥节点)
		console.log(box.nextSibling)//下一个兄弟111·
		console.log(box.nextElementSibling)//下一个div
		box.nextElementSibling.dataset.index=1//把下一个div节点加上index属性


		//parentNode(元素)  vs  parentElement
		console.log(box.parentNode.parentNode.parentNode)//后面的两个就是第一个找到的父元素的父元素的父元素
		console.log(box.parentElement.parentElement.parentElement)//同上


	console.log(box.getAttributr("index"))
	console.loh(box.getAttributrs[0])


	vue <div v-for="">{{myhtml}}</div>
	</script>
</body>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

操作DOM节点

  • 我们所说操作无非就是增删改查（CRUD）
  • 创建一个节点（因为页面中增加之前，我们需要先创建一个节点出来）
  • 向页面中增加一个节点
  • 删除页面中的某个节点
  • 修改页面中的某个节点
  • 获取页面中某个节点

创建一个节点

  • createElement：用于创建一个元素节点
<script>
	//创建一个div元素节点
	var oDiv = document.createElement('div')
	console.log(oDiv)//<div></div>
</script>

<div id="box">
	<div id="child">1111111</div>
</div>
<script>
		//创建
	var odiv=document.creatElement("div")
	odiv.className="aaaa"
	odiv.id="aaa"
	odiv.innerHTML="我是新创建的节点"
	console.log(odiv)
	
		//插入节点
	box.appendChild(odiv)//给script外面的box追加一个孩子--odiv
	/*insertBefore：只要找到之前的第一个，这样的话，
	只要在他之前插入，那就是第一个节点：
		insertBefore(要插入的节点，谁的前面)*/
	box.insertBefore(odiv,child)
	
		//删除节点(节点对象)
	box.removeChild(child)
	box.remove()//删除自己以及后代

		//替换节点 replaceChild(新的节点，老的节点)
	var odiv2=document.createElement("div")
	odiv2.innerHTML="2222"
	box.replaceChild(odiv2,child)

		/*克隆节点()  默认的情况下，不写参数，他就是
		一个false，就是不会克隆后代。
		那么，true就是克隆后代*/
	var oCloneBox=box.cloneNode()//不克隆后代
	console.log(oCloneBox)

	oCloneBox.id="box2"//因为克隆的完全一样，所以可以给克隆的东西的id名改一下
	document.body.appendChild(oCloneBox)//克隆后代
	
</script>

在这里插入图片描述

—— 创建出来的就是一个可以使用的div元素

  • createTextNode：用于创建一个文本节点

案例动态删除

节点属性

  • 我们已经知道节点分为很多种，而且我们也能获取到各种不同的节点
  • 了解各种节点之间属性的区别
  • 代码👇
<body>
	<ul test="我是ul的一个属性">
		<li>hello</li>
	</ul>

	<script>
		//闲获取ul
		var oUl=document.querySelector('ul')

		//获取到ul下的第一个子元素节点，是一个元素节点
		var eleNode = oUl.firstElementChild

		//获取到ul的属性节点组合，因为是个组合，我们要拿到结点的话要用索引
		var attrNode = oUl.attributes[0]

		//获取到ul下的第一个子节点，是一个文本节点
		var textNode = oUl.firstChild
	</script>
</body>

<body>
	<div class="box">
		hello world
		<!-- zxy -->

		<div>11111</div>
	</div>
	<script>
		var obox = document.querySelector(".box")
		console.log(obox.childNodes)

		/*其实现在可以for循环这个结构，通过判断一个东
		西，就能够找出那个特殊的标签*/
		for(var i = 0;i<obox.childNodes.length;i++)//这是个数组，长度为length，拿到其中的每一个
			console.log(obox.childNodes[i].nodeType)
			if(obox.childNodes[i].nodeType==1){
				console.log(obox.childNodes[i])
			}

			console.log("属性",obox.sttributes[0].nodeType)
	</script>
</body>

nodeType区别（属性节点）

  • text的nodeType值为3
  • comment为8
  • div元素为1
  • 属性为2
    在这里插入图片描述
    在这里插入图片描述

nodeName看蓝色画线部分的区别（源代码为上面代码）
在这里插入图片描述
在这里插入图片描述

nodeValue
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

获取元素尺寸

  • 就是元素的“占地面积”

offsetWidth和offerHeight

  • offsetWidth:获取内容是元素 内容+padding+border的宽度
  • offsetHeight:获取的是元素 内容+padding+border的高度

clientWidth和clientHeight

  • clientWidth:获取的是元素 内容+padding的宽度
  • clientHeight:获取的是元素 内容+padding的高度

注意：

  • 获取到的尺寸是没有单位的数字
  • 当元素在页面中不占位置的时候，获取到的是0
<head>
	<style>
		div{
			width:100px;
			height:100px;
			padding:10px;
			border:5px solid red;
			background-color:yellow;
			box-sizing:border-box;
			display:none;
		}
	</style>
</head>
<body>
	<div id="bx">

	</div>
	<script>
		//console.log(getComputedStyle(box).width)//只能拿到内容的
		
		//console.log(box.style.width)//只能拿行内的
		//offset* (border+padding+content)
		console.log(box.offsetWidth,box.offsetHeight)
		//注意：
		/*
			1.单位，数字
			2.box-sizing（border+padding+content）
			3.display：none  拿不到这个值
		*/
		//client* (padding+content)		
		console.log(box.clientWidth,box.clientHeight)
	</script>
	
</body>

获取元素偏移量

<head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#box{
			width:500px;
			height:500px;
			bacground-color:yellow;
			overfloat:hidden;
		}
		#myparent{
			width:300px;
			height:300px;
			bacground-color:bule;
			overfloat:hidden;
			position:relative;
		}
		#child{
			width:100px;
			height:100px;
			bacground-color:red;
		}
		div{
			margin:50px;
		}



		ul{
			width:200px;
			height:200px;
			padding:20px;
			border:10px solid black;
			background:red;
			margin:50px;

			border-left-width:50px;
			border-top-wodth:50px;
			
	</style>
</head>
<body>
	<div id="box">
		<div id="myparent">
			<div id="child"></div>
		</div>
	</div>


	<ul id="list">

	</ul>
	<script>
	//offsetLeft
	//offsetTop
		console.log(child.offsetLeft,child.offsetTop)
		console.log(myparent.offsetLeft,myparent.offsetTop)
		console.log(box.offsetLeft,box.offsetTop)
		/*
			参考点：是定位父级
			如果父级元素没有定位，偏移量相对于body
		*/

	//clientLeft
	//clientTop
		console.log(list.clientLeft,list.clientTop)
		//计算了距离自己左上角的
	</script>
</body>

获取可视窗口的尺寸

<head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		html,body{
			height:2000px;
		}
	</style>
</head>


<body>
	
	<script>
	//BOM计算方法（算上滚动条）		
		console.log(window.innerHeight,innerHeight)
		console.log(window.innerWidth,innerWidth)//这个会算上右边滚动条的宽度

	//DOM计算方法（不算滚动条）
		console.log(document.documentElement.clientWidth)
		console.log(document.documentElement.clientHeight)//这个不会算上侧边滚动条的宽度
	</script>

</body>

懒加载案例***

案例懒加载

W`hite
关注
  • 19
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-dom.development.js
10-15
听说你在找react-dom.development.js这个文件，在带走它前记得收藏加点赞、听说你在找react-dom.development.js这个文件，在带走它前记得收藏加点赞、听说你在找react-dom.development.js这个文件，在带走它前记得...
dom.el:Dom.el 为现代更新
06-12
dom.el 最好的纯 emacs-lisp DOM 操作 信用到期： 此代码最初由 Alex Schroder 开发，然后由 Henrik Motakef 改进。 到目前为止，我所做的唯一一件事就是将它更新为这十年 Emacs 版本的最低工作要求。 概述 如果您...
DOM.html
08-13
DOM
dom.zip
05-25
《深入理解DOM：Web页面的灵魂》 在网页开发中，DOM（Document Object Model）是一个至关重要的概念，它如同一个桥梁，连接着HTML和JavaScript。DOM是W3C组织定义的一种标准，它允许程序和脚本动态地访问和更新网页...
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1415
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 439
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2567
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 525
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 412
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
滴滴前端日常实习一面
weixin_46714216的博客
08-31 598
滴滴前端面经
Nginx部署前端Vue项目
不会代码的小林
09-03 1295
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
基于Java+Springboot+Vue+elememt宠物用品商城系统设计实现
央顺科技官方博客
08-31 1380
随着信息技术的不断发展，我们现在已经步入了信息化的时代了，而信息时代的代表便是网络技术的日渐成熟，而现在网络已经和我们的生活紧密的联系起来了，我们不敢想象没有网络我们的生活会像怎么样，也许就像食物中没有调料现在的生活离开了网络会变得索然无味。通过网络我们可以足不出户的做许多事情，例如工作、娱乐、学习，交友和购物等等许多我们数之不尽的事情，而就是因为网络我们的生活变得多姿多彩，或许有时甚至帮我们省下不少的时间和给予了我们更多的机遇。宠物网上商城对我们来说就有这些意义。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 894
hiprint
Nuxt3入门：样式的注入、定义和使用（第3节）
沐爸的博客
08-31 1195
在 Nuxt3 中，如何在本地或全局注入本地样式表？如何注入本地字体？如何分发NPM的样式表？单文件组件的动态样式、作用域样式、CSS模块、预处理器如何使用？
【HTTP、Web常用协议等等】前端八股文面试题
Una的博客
09-01 1370
前端面试中，会被问到网络协议等问题。 欢迎大家订阅 我创作的《前端八股文面试题》专栏。
JS设计模式之“语言之魂” - 原型模式
前端梦工厂
09-02 1440
当我们学习JavaScript的时候，经常会听到原型（prototype)、原型链（）和原型模式（）这些概念，它们之间有什么关联呢？怎么样才能使用好原型模式呢？原型模式是JavaScript语言的核心机制之一，同时也是JavaScript中最基本的设计模式，因此被称为“语言之魂”，通过对象的原型实现对象的继承和属性共享，同时基于原型链的机制实现对象的创建和属性的继承，原型模式在JavaScript中具有广泛的应用场景，使用原型模式可以节省内存，增加灵活性和可扩展性等。
ECharts实现雷达图详解
威哥爱编程，CSDN 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
09-02 1535
创建一个函数来获取新数据并更新雷达图。我们可以使用 AJAX 请求从服务器获取数据，或者使用任何其他方法来获取数据。// 假设这是获取数据的函数，可以是AJAX请求或其他方式// 这里使用setTimeout模拟数据更新name: '动态数据'// 更新雷达图数据series: [{name: '系列1',}]});// 递归调用以实现定期更新}, 2000);// 每2秒更新一次数据// 初始调用数据更新函数O了，完美展示一下效果。
【前端】读取csv文件，将数据转换为对象。spilce与slice的区别
最新发布
weixin_43872912的博客
09-05 170
解决思路：将csv文件的第一行作为key，后续的每一行作为value存入对象数组。
javascript通过while循环和switch语句制作一个简易ATM机
2301_81968528的博客
09-04 1085
输入3，提示查看余额，弹出对话框，提示账户余额。输入2，提示取钱，弹出对话框，输入取钱金额。输入1，提示存钱，弹出对话框输入存钱金额。上述代码就是一个简易ATM的代码。
DOM.progress
08-23
根据引用，DOM.progress是一个变量，它的值是根据XML文件中的progress标签的文本内容来确定的。如果progress的值小于0，那么DOM.progress的值就是100.0。根据引用，DOMTree是一个XML文档对象，它可以通过解析一个XML字符串来创建。DOMTree.documentElement可以获取XML文档的根元素。在这个根元素上，可以使用getAttribute方法来获取指定名称的特定标签id的属性值。根据引用，如果没有找到progress标签，那么DOM.progress的值将被返回。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件，封装函数](https://blog.csdn.net/weixin_39809793/article/details/111005873)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值