DOM元素的操作

最新推荐文章于 2023-03-30 10:52:21 发布
最新推荐文章于 2023-03-30 10:52:21 发布
阅读量65 收藏
点赞数
原文链接：http://www.cnblogs.com/hy96/p/11401711.html
版权 
 
  
<body>
    <div class="box">hello world</div>
</body>
 
  

 DOM元素操作：
     增
     var div = document.createElement("div")
     console.log(div);
     document.body.appendChild(div);
    
     删
     var obox = document.querySelector(".box")
     obox.remove()
     document.body.removeChild(obox)

     改
     var obox = document.querySelector(".box")
     console.log(obox.outerHTML)
     obox.outerHTML = "<span class='"+ obox.className +"'>"+ obox.innerHTML +"</span>"  

　　　console.log(obox.outerHTML) //<div class="box">hello world</div>
　　　但是程序中的div改成span
　　<span class="box">hello world</span>
 
  
 查：选择器
 
 
 
 
 
   查询：选择器； 
 
 
 
 
    
 
 
 
 
      创建：createElement()  配合  appendChild()    将创建好的元素，插入到某个标签内的最后 
 
 
 
 
    
 
 
 
 
      删除：removeChild()  配合  parentNode 
 
 
 
 
                  元素.remove()    直接删除当前元素 
 
 
 
 
    
 
 
 
 
      document.body.removeChild(div)； 
 
 
 
 
    
 
 
 
 
      修改: outerHTML 
 
 
 
 
      oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>" 
 
 
 
 
       
 
 
 
 
    
 
 
 
 
      补充：创建文本节点createTextNode(“hello”) 
 
 
 
 
           使用方式同createElement() 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/hy96/p/11401711.html

                

        

        




    

  


    

      

        

            

              
                
                  anhumi4350
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
react学习-Windows下UmiJS框架搭建

				
			

			

				

					qq_42603430的博客
				

				

					11-25
					
					1160
					
				

			

		

		

			
				
UmiJS介绍
Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

			
		

	



                

              
                



	

		

			

				
					
umijs学习笔记

				
			

			

				

					youlinaixu的博客
				

				

					08-11
					
					6089
					
				

			

		

		

			
				
1，查看umi generate都有哪些命令
umi help generate

type为page或layout
umi g page index
umi g page layout

–less生成的为less的css文件

umi help


2，umijs的源码
router.js

link.js就是引入的react-router-dom库

3，umijs项目生成工具：create...

			
		

	



                


  
              

                


	

		

			

				
					
【react hook】umi获取虚拟dom元素 并点击按钮滚动到对应元素位置

				
			

			

				

					hzxOnlineOk的博客
				

				

					09-01
					
					641
					
				

			

		

		

			
				
【代码】【react hook】umi获取虚拟dom元素 并点击按钮滚动到对应元素位置。

			
		

	





	

		

			

				
					
DOM属性操作

				
			

			

				

					anhumi4350的博客
				

				

					08-23
					
					60
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta htt...

			
		

	



		

			
		



	

		

			

				
					
umi入门学习

				
			

			

				

					DOM曼珠沙华的博客
				

				

					04-20
					
					2862
					
				

			

		

		

			
				
umi为前端开发框架

安装umi

npm install umi -g

[点击并拖拽以移动]

直接创建文件夹 umiProject，cd进入后直接操作：

创建页面


			
		

	





	

		

			

				
					
DOM元素操作

				
			

			

				

					m0_56232007的博客
				

				

					06-10
					
					1259
					
				

			

		

		

			
				
01  什么是DOM？
1、  DOM：document object model  文档对象模型。
DOM是由节点组成的。
2、节点的类型：
元素节点：HTML标签
文本节点：标签中的文字（包含空格和换行。）
属性节点：标签的属性
3、DOM可以做什么？
（1）可以操作HTML元素（增删改查）
增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。
删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。
改：改变。改变DOM节点中的内容，包含HTML

			
		

	





	

		

			

				
					
dom元素操作获取等

				
			

			

				

					weixin_51525719的博客
				

				

					12-10
					
					1325
					
				

			

		

		

			
				
一、DOM元素的获取
1）document.getElementsByClassName ( “class”)
返回集 htmlcollection ,用法和数组一致
说明: class为DOM元素上class属性的值
2）document.getElementById( “id” )
功能:返回对拥有指定ID的第一个对象的引用
返回值: DOM对象
说明: id为DOM元素上id属性的值
3)document.getElementsByName(" name");
返回的是nodelist 类型, 用法和

			
		

	





	

		

			

				
					
【JavaScript】DOM元素操作节点增删改查

				
			

			

				

					万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
				

				

					03-30
					
					2101
					
				

			

		

		

			
				
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

			
		

	





	

		

			

				
					
Vue中直接操作DOM元素操作

				
			

			

				

					web修理工
				

				

					05-29
					
					1956
					
				

			

		

		

			
				
传统document 操作

<div id="oid" class="cla"></div>
<input type='input' name='age'>
<script>
 var odiv=document.getElementsByTagName('div') //获取div标签的伪数组
 var oinput=document.getElementsByName('age') // 获取 name属性伪数组(系统自带也可以人为添加)
 var o.

			
		

	





	

		

			

				
					
DOM的添加元素

				
			

			

				

					lzw995189944的博客
				

				

					12-09
					
					2432
					
				

			

		

		

			
				
1. 添加一个新元素: 3步

(1). 创建一个新的空元素对象:

a. var 新元素对象=document.createElement("标签名")

创建元素

b. 结果: <元素></元素>

c. 比如: var a=document.createElement("a");

结果: <a></a>

(2). 为新元素添加必要属性: 元素对象.属性名=新值...

			
		

	





	

		

			

				
					
jQuery Dom元素操作技巧

				
			

			

				

					10-18
				

			

		

		

			
				
使用jQuery进行DOM元素操作是前端开发中非常常见且重要的技能。  在jQuery中，有多种方法可以帮助开发者获取父节点、兄弟节点以及在节点内插入内容。例如：  1. 获取父节点可以使用`.parent()`方法。如`$("#test1")....

			
		

	





	

		

			

				
					
ExtJS DOM元素操作经验分享

				
			

			

				

					10-26
				

			

		

		

			
				
本文将分享如何使用ExtJS框架进行DOM元素操作的经验。  首先，程序员在开发过程中需要不断学习新知识和技能，这是一个不断进步和更新的行业。作者提到自己最初使用JQuery来操作DOM元素，之后转向C++编程，最终又回归...

			
		

	





	

		

			

				
					
js 针对html DOM元素操作等经验累积

				
			

			

				

					10-26
				

			

		

		

			
				
下面将详细阐述有关JavaScript如何操作HTML DOM元素的知识点。  首先，DOM是HTML和XML文档的编程接口。它以树形结构表示文档，使我们能够以对象的方式来访问文档中的各个部分。在JavaScript中，可以通过特定的方法来...

			
		

	





	

		

			

				
					
Matlab界面GUI设计的车牌定位[Matlab界面GUI设计].zip

					
最新发布

				
			

			

				

					09-10
				

			

		

		

			
				
linux常用命令大全

			
		

	





	

		

			

				
					
【独家首发】基于matlab沙猫群算法SCSO-GMDH风电数据回归预测【含Matlab源码 7530期】.zip

				
			

			

				

					09-10
				

			

		

		

			
				
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白；
1、代码压缩包内容
主函数：Main.m；
调用函数：其他m文件；无需运行 
运行结果效果图；

2、代码运行版本
Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主；

3、运行操作步骤
步骤一：将所有文件放到Matlab的当前文件夹中； 
步骤二：双击打开除Main.m的其他m文件； 
步骤三：点击运行，等程序运行完得到结果；

4、仿真咨询
如需其他服务，可私信博主或扫描博主博客文章底部QQ名片；
4.1 CSDN博客或资源的完整代码提供
4.2 期刊或参考文献复现
4.3 Matlab程序定制
4.4 科研合作
智能优化算法优化GMDH回归预测系列程序定制或科研合作方向：
4.4.1 遗传算法GA/蚁群算法ACO优化GMDH回归预测
4.4.2 粒子群算法PSO/蛙跳算法SFLA优化GMDH回归预测
4.4.3 灰狼算法GWO/狼群算法WPA优化GMDH回归预测
4.4.4 鲸鱼算法WOA/麻雀算法SSA优化GMDH回归预测
4.4.5 萤火虫算法FA/差分算法DE优化GMDH回归预测
4.4.6 其他优化算法优化GMDH回归预测

			
		

	





	

		

			

				
					
【2024首发原创】蜣螂优化算法DBO-TCN-LSTM-Multihead-Attention负荷预测Matlab实现.rar

				
			

			

				

					09-10
				

			

		

		

			
				
1.版本：matlab2014/2019a/2024a

 2.附赠案例数据可直接运行matlab程序。 

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 

替换数据可以直接使用，注释清楚，适合新手

			
		

	





	

		

			

				
					
加速仪6050陀螺仪simulink.rar

				
			

			

				

					09-10
				

			

		

		

			
				
加速仪6050陀螺仪simulink.rar

			
		

	





	

		

			

				
					
基于ssm的三省学堂—学习辅助系统设计与实现.docx

				
			

			

				

					09-10
				

			

		

		

			
				
基于ssm的三省学堂—学习辅助系统设计与实现.docx

			
		

	





	

		

			

				
					
Sigrity-PowerSI VR Noise Metrics Check Tutorial.rar

				
			

			

				

					09-10
				

			

		

		

			
				
Sigrity-PowerSI VR Noise Metrics Check Tutorial.rar
本教程介绍了在PowerSI中使用VR噪声指标检查工作流运行模拟的任务和步骤。
VR噪声度量（VRNM）检查工作流程用于评估由于开关电源引起的信号IO中的噪声水平。
在这个工作流程中，信号网络被视为受害者，电源网络被视作为攻击者，因为电源网络是开关电源噪声的载体。
使用VRNM将IO信号上的VR开关噪声测量为从组件电源引脚到组件信号引脚的耦合。
电源端口（i）和单端信号端口（j）之间的VRNM定义为电源端口（ⅰ）和差分信号端口（jpos）之间的VR NM，（jneg）定义为

			
		

	





	

		

			

				
					
jQuery元素操作基础：选择、处理与DOM操作解析

				
			

			

				

					
				

			

		

		

			
				
3. **DOM元素操作**：  - **索引查找**：`index()`方法用于查找元素在同级元素中的位置。如果提供一个元素作为参数，它会返回该元素在对象集中的索引，否则返回元素自身在同级中的索引。如`$('img').index($('img#id...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值