DOM对象-节点的操作

最新推荐文章于 2022-04-24 20:54:21 发布
最新推荐文章于 2022-04-24 20:54:21 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： javascript 文章标签： DOM对象-节点的操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a920119797/article/details/63782660
版权 

上篇整理的是dom对象的一些基本知识，好久也没来写博客了，以后一定要养成习惯啊啊~~

废话少说，直接进入正题，这次整理的是dom对象节点的操作，可以通过操作dom节点对html进行修改等、

++++++++++++++++++++++++这里是分割线+++++++++++++++++++++++++++++++++++++++++++

1、getElementByName()方法

语法： document.getElementByName(name)

解析：这个方法是通过获取标签的name来进行访问，从而返回对应name名称的节点对象集合，因为name可以重复多个，所以返回的是集合！


2、getElementsByTagName()方法

  语法：document.getElementsByTagName(TagName)

解析：不同与上个方法的是，这个方法是通过TagName也就是标签名来进行访问，并返回对应标签名的节点对象。标签名有哪些呢？p、a、table等都是标签。


3、getElementById()方法

语法：document.getElementById(id)

解析：id是唯一的，通过此方法可以获取到指定的也是唯一的一个节点对象。

三者区别：id相当于一个人的身份证，唯一的 。

    name相当与人的姓名、可以重名。

   Tagname相当于一个集合体，比如xx班，这里就包括了xx班的所有同学。

4、getAttribute()方法

   语法：document.getAtribute(查询节点的属性值)

  解析：此方法是对返回的节点对象进行操作，因而首先要先获取节点对象，获取方法参考上面三个。

举例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>   
	<h1 id="text" title="titles">xxxx</h1>
<script type="text/javascript">
      var anode = document.getElementById("text");
	var attr1 = anode.getAttribute("id");
	var attr2 = anode.getAttribute("title");
	document.write("h1的id为："+attr1);
	document.write("h1"的title为：+attr2);

var aCtra=anodegeéAétribaée ("id") i
var aC4r2=anode-geéAQCribaée {"title"} i
document-?; {"hlID : "+accra+"<br>"
document-?;II ("hltitle : "+aQtr2}

This text was recognized by the built-in Ocrad engine. A better transcription may be attained by right clicking on the selection and changing the OCR engine to "Tesseract" (under the "Language" menu). This message can be removed in the future by unchecking "OCR Disclaimer" (under the Options menu). More info: http://projectnaptha.com/ocrad


var aCtra=anodegeéAétribaée ("id") i
var aC4r2=anode-geéAQCribaée {"title"} i
document-?; {"hlID : "+accra+"<br>"
document-?;II ("hltitle : "+aQtr2}

This text was recognized by the built-in Ocrad engine. A better transcription may be attained by right clicking on the selection and changing the OCR engine to "Tesseract" (under the "Language" menu). This message can be removed in the future by unchecking "OCR Disclaimer" (under the Options menu). More info: http://projectnaptha.com/ocrad	




 </script> 
</body>
</html>




结果会输出text和titles！


5、setAttribute()方法


语法：document.setAttribute(节点的属性值，修改的值)


解析：和setAttribute()一样，都得通过获取元素节点对象才能使用。







+++++++++++++++++++++++++++++++分割线+++++++++++++++++++++++++++


关于子节点和父节点的知识，重点！！！！！


1、访问子节点：childNodes


必须通过父节点进行访问，也可以说节点下还有子节点才可以使用！


  比如：var x = document.getElementByTagName("ul")[0].childNodes;


ul标签下设置多个li，记住使用Tagname访问子节点后面加[0]!


2、访问子节点的第一项和最后一项


第一项:node.firstChild  =  childNodes[0]


最后一项: node.lastChild = childNodes[childNodes.length-1]


3、访问父节点：parentNode


父节点只有一个！！！！！


var parent = document.getElementById("li").parentNode;   获取到ul的节点


获取祖节点  parentNode.parentNode; 如果网上还有父节点可以再累加获取!







###########未完......
































 


                

        

        

    




    

      

        

            

              
                
                  Do桑
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
JS实现访问DOM对象指定节点的方法示例

				
			

			

				

					10-18
				

			

		

		

			
				
本示例主要讲解如何使用JavaScript实现访问DOM对象指定的节点，包括使用`getElementById()`方法，以及通过`nodeName`、`nodeType`和`nodeValue`属性获取节点的相关信息。  **一、介绍**  1. **getElementById()方法*...

			
		

	



                

              
                



	

		

			

				
					
DOM对象中的节点操作.pdf

				
			

			

				

					06-16
				

			

		

		

			
				
节点的基本操作

			
		

	



                


  
              

                


	

		

			

				
					
3.3 系统内部对象 —— DOM节点对象

				
			

			

				

					SuperBetterMan的博客
				

				

					06-15
					
					434
					
				

			

		

		

			
				
HTML DOM节点树
HTML DOM定义了访问和操作HTML文档的标准方法。DOM将HTML文档表达为树结构。具体示例如下：

<html>
    <head>
        <title>文档标题</title>   
    </head>
    <body>
        <a href=“#">我的链接</a>
        <h1>我的标题</h1>    
   

			
		

	





	

		

			

				
					
节点对象的方法和属性

				
			

			

				

					weixin_44540178的博客
				

				

					05-27
					
					801
					
				

			

		

		

			
				
开发工具与关键技术：HTML DOM节点方法   作者：Li Mingrun   撰写时间：2019年5月27日

在之前的文章中有提过HTML DOM文档对象模型，其中是对节点的介绍。
在HTML文档中的而全部内容都属于节点。
例如：
1，整个文档是一个文档节点
2，每个 HTML 元素是元素节点
3，HTML 元素内的文本是文本节点
4，每个 HTML 属性是属性节点
5，注释是注释节点
HT...

			
		

	



		

			
		



	

		

			

				
					
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点）

				
			

			

				

					Fiki515的博客
				

				

					04-24
					
					1477
					
				

			

		

		

			
				
一、查看节点


getElementById( )
	getElementsByName( ) 
	getElementsByTagName( )



 <body>
    <div id="box">hello box</div>
  </body>
  <script>
    var oDiv = document.getElementById("box"); //div元素对象
    // var oDiv = document..

			
		

	





	

		

			

				
					
JavaScript中如何使用DOM中的节点对象

				
			

			

				

					weixin_45998174的博客
				

				

					12-20
					
					160
					
				

			

		

		

			
				
1.节点：
加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为有节点组成。
例如：和是父子节点
和是兄弟节点
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191220090143687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,sha...

			
		

	





	

		

			

				
					
节点对象的属性

				
			

			

				

					a1304317638的专栏
				

				

					10-17
					
					682
					
				

			

		

		

			
				
1.取得某节点下的某属性
Element root=document.getRootElement();
//属性名name
         Attribute attribute=root.attribute("size"); 
2.取得属性的文字 
String text=attribute.getText();
 3.删除某属性 Attribute attribute=root

			
		

	





	

		

			

				
					
05.DOM 查询练习-节点练习

				
			

			

				

					01-08
				

			

		

		

			
				
在给定的DOM查询练习中，我们看到了一系列与HTML文档对象模型（DOM）操作相关的练习。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript或其他编程语言来访问和修改文档内容。以下是对每个练习的详细解释：  ...

			
		

	





	

		

			

				
					
JavaScript HTML DOM元素 节点操作汇总

				
			

			

				

					10-16
				

			

		

		

			
				
本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。  首先，理解DOM的基本概念至关重要。DOM（Document Object Model）是一种标准，它将HTML或XML文档表示为一个树形结构，其中每个部分都...

			
		

	





	

		

			

				
					
JS实现DOM删除节点操作示例

				
			

			

				

					11-29
				

			

		

		

			
				
在JavaScript中，DOM...总结，JavaScript的DOM操作是网页动态效果和交互实现的关键，而`removeChild()`方法则是删除文档中特定节点的重要工具。通过熟练掌握这一方法，开发者可以创建出更加丰富和灵活的用户界面。

			
		

	





	

		

			

				
					
DOM节点常见操作

				
			

			

				

					u011877410的博客
				

				

					08-07
					
					865
					
				

			

		

		

			
				
1.获取节点


//获取节点
document.getElementById(id);

//HTMLCollection(chrome)
document.getElementsByTagName("div");

//NodeList(chrome)
document.getElementsByName(name);

//HTMLCollection(chrome)
document.ge...

			
		

	





	

		

			

				
					
Dom节点是js中的哪个对象的实例

				
			

			

				

					singwhere的专栏
				

				

					03-22
					
					221
					
				

			

		

		

			
				
如
var oEl = document.getElementById("div");
alert(oEl instanceof Object);

在ie8-下，结果为false，在ie9中，结果为true

			
		

	





	

		

			

				
					
节点对象和元素对象的区别？

				
			

			

				

					程宇寒
				

				

					02-02
					
					936
					
				

			

		

		

			
				
https://cloud.tencent.com/developer/ask/32654

节点类和元素类在继承的原型中是相关的


 <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div&g...

			
		

	





	

		

			

				
					
Dom对象和节点元素的获取

				
			

			

				

					kkxxzx的博客
				

				

					10-30
					
					513
					
				

			

		

		

			
				
对象

对象：万物都是对象，对象去描述真实的世界

语法规则： {} 一对大括号用来定义一个对象 
：冒号为属性赋值 
, 逗号分隔属性

属性：姓名，年龄

方法：



script>
//name,age属于对象属性
var a={name:"张三",age:12};
console.log(a.name)


方法的使用



script>
    var laoWang = {name

			
		

	





	

		

			

				
					
【JS】【Ajax原始版本】【使用dom对象获取节点】

				
			

			

				

					Armo的博客
				

				

					12-25
					
					373
					
				

			

		

		

			
				
Ajax:不应刷新页面,就可以访问服务器的方式.1.创建ajax对象var createAjax = function() { 
    return window.XMLHttpRequest ? //判断这个语法是否合法,在ie6浏览器会出现不兼容情况.
    new XMLHttpRequest() : //非ie返回ajax对象
    new ActiveXObject("Microso

			
		

	





	

		

			

				
					
JS学习笔记(02)——节点对象

				
			

			

				

					偶是大禹的博客
				

				

					10-17
					
					1001
					
				

			

		

		

			
				
window对象

			
		

	





	

		

			

				
					
matlab BP神经网络

				
			

			

				

					
				

				

					12-11
					
					1723
					
				

			

		

		

			
				
有时候钻进去就是峰回路转的，偶尔也出来透透气吧，今天玩这个真心很累了，let's have a rest~

    随着计算机的普及，现代算法的发展已经不再是那么简单的循环套弄下的了。最近研究了很多回根据现实生活中的一些现象得出的算法，如神经网络算法。人脑大约有1000多亿个神经元，到现在人们对他的了解也是很有限的。神经网络算法便是从结构复杂的人脑抽象出来的，具有信息并行处理能力、自学能力和

			
		

	





	

		

			

				
					
JQuery对Dom节点操作以及事件操作

				
			

			

				

					MrLee的博客
				

				

					05-29
					
					2698
					
				

			

		

		

			
				
1.查找节点获取p节点var $pDm=$("p");输出p节点的title属性alert($pDm.attr("title")); //获取第2个li节点    var $li_2=$("ul li:eq(1)"); //输出第2个li节点的title属性alert($li_2.attr("title"));//输出第2个li节点的文本内容alert($li_2.html());2.创建节点创建...

			
		

	





	

		

			

				
					
dom 节点转dom对象

					
最新发布

				
			

			

				

					05-30
				

			

		

		

			
				
在 JavaScript 中，DOM 节点本身就是 DOM 对象，因此不需要进行节点到对象的转换。DOM 节点是指 HTML 或 XML 文档中的元素、属性、文本等组成部分，在 JavaScript 中可以通过访问这些节点进行操作。  如果你是在使用...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值