javascript中的firstchild

最新推荐文章于 2023-06-21 15:30:00 发布
最新推荐文章于 2023-06-21 15:30:00 发布
阅读量8.3k 收藏 3
点赞数
分类专栏： Java学习 文章标签： java js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bofengshuimen700/article/details/27178091
版权 
<ul id="contain">
     <li><a href="http:/www.iwcn.net">Microsotf</a></li>
     <li><a href="http:/www.iwcn.net">Yahoo</a></li>
     <li><a href="http:/www.iwcn.net">Easy</a></li>
     <li><a href="www.iwcn.net">W3c/Javascript</a></li>
     <li><a href="www.iwcn.net">Design|Source</a></li>
 </ul>
var container=document.getElementById("contain");

1、使用firstChild是ul元素下的第一个子节点（包括文本节点、HTML元素节点）。所以按照标准，你这个例子在Firefox和Opera中，container.firstChild应该获取空白符的文本节点。而IE不是这样实现的，如果文本节点只包含空白符，IE会直接跳过。所以在IE中通过container.firstChild你获得的是li元素节点。

2、firstChild是元素的所有子节点（childNodes）中的第一个子节点，如果元素的第一个子节点没有变化，则firstChild这个引用也不会有变化。连续获取两次firstChild是同一个对象。

补充：你要了解引用与对象的关系。firstChild是指向元素首个子节点的引用。你给的xx函数中，将firstChild引用指向的对象append到父对象的末尾，原来firstChild引用的对象就跳到了container对象的末尾，而firstChild就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了。

 

<body>
<ul id="action">
    <li title="第一段文字">第一个</li>
    <li title="第二段文字">第二个</li>
</ul>
<script type="text/javascript">
    var attr_p = document.getElementById("action");
    alert(attr_p.childNodes[1].childNodes[0].nodeValue);
</script>
</body>

 

如果要取得id为action的ul的第一个li内的文本节点（如取得：第一个），可以使 用…childNodes[1].childNodes[0].nodeValue这种方法找到，使用…childNodes[1].firstChild.nodeValue同样可以找到第一个li的文本节点，结论childNodes[0]等价于firstChild，无论何时何地，重要需要访问childNodes[]数组的第一个元素，我们就可以把它写成firstChild，DOM还提供一个与之对应的lastChild属性。需要注意的是，ff的空格节点问题，可以使用nodeType属性对节点类型判断，直到发现元素节点为止。

                

        

        

    




    

      

        

            

              
                
                  lianghui007
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
first-child

				
			

			

				

					易天海
				

				

					12-06
					
					253
					
				

			

		

		

			
				

$("#quitLoss&gt;a:first-child").addClass('curr');
	$('#numbe').focus();
      $('#numbe').blur();

 

			
		

	



                

              
                



	

		

			

				
					
有关 :first-child的理解

					
热门推荐

				
			

			

				

					师兄阿离的博客
				

				

					10-29
					
					2万+
					
				

			

		

		

			
				
最近在做项目，突然发现一个选择器非常特别，所以特意去了解了一下，下面把我自己所理解的意思写下来。

在W3School里面讲   ：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。

我刚一看这个我也是看的迷迷糊糊，这讲的是什么意思，我把他理解成是他的第一个元素。然后就傻傻的的去测试，也不知道自己弄什么。然后出现了一些错误，下面我就一一例举有关：first-child的内...

			
		

	



                


  
              

                


	

		

			

				
					
js中firstChild与firstElementChild及childNodes与children的区别

				
			

			

				

					qq_44731369的博客
				

				

					02-17
					
					2339
					
				

			

		

		

			
				
firstChild：
获取指定元素的第一个子节点 (包括元素节点和文本节点) 。
若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。
例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <met

			
		

	





	

		

			

				
					
JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）

				
			

			

				

					吴声子夜歌的博客
				

				

					09-25
					
					2980
					
				

			

		

		

			
				
访问节点
通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。

ownerDocument：返回当前节点的根元素（document对象）
parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点
childNodes：返回当前节点的所有子节点的节点列表
firstChild：返回当前节点的首个子节...

			
		

	



		

			
		



	

		

			

				
					
JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

				
			

			

				

					a2273490的博客
				

				

					11-12
					
					409
					
				

			

		

		

			
				
<body>
	<ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul&g...

			
		

	





	

		

			

				
					
在 JavaScript 中提取元素的第一个子元素

				
			

			

				

					迹忆客
				

				

					06-21
					
					1739
					
				

			

		

		

			
				
Element.children 和 Node.childNodes 之间的唯一区别是 Element.children 仅包含元素节点，而 Node.childNodes 获取所有子节点，包括非元素节点，如文本和注释。Node.firstChild 返回树中节点的第一个子节点，如果节点没有子节点则返回 null。返回指定元素的子节点的活动 NodeList，索引 0 分配给第一个子节点。它返回一个包含节点子节点的活动 NodeList。HTML 集合是节点的 DOM 元素子元素的活动的、有序的集合。

			
		

	





	

		

			

				
					
javascript DOM笔记 1

				
			

			

				

					08-08
				

			

		

		

			
				
`firstChild`和`lastChild`分别获取第一个和最后一个子节点，但它们可能不区分元素节点和文本节点，因此在某些浏览器中可能需要使用`firstElementChild`和`lastElementChild`来确保只获取元素节点。  对于元素的属性...

			
		

	





	

		

			

				
					
javaScript-dom

				
			

			

				

					03-17
				

			

		

		

			
				
在JavaScript中，我们可以使用DOM API来创建、修改、删除或者查找页面上的元素。以下是一些主要的DOM操作：  1. **获取元素**：`document.getElementById()`、`document.querySelector()` 和 `document....

			
		

	





	

		

			

				
					
javascript DOM 操作.doc

				
			

			

				

					01-15
				

			

		

		

			
				
javascript DOM 操作  javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型...javascript DOM 操作可以在客户端动态地更改网页的内容和结构，但是在不同的浏览器中需要使用不同的方法和属性来实现。

			
		

	





	

		

			

				
					
Javascript-DOM

				
			

			

				

					03-26
				

			

		

		

			
				
在JavaScript-DOM这个主题中，我们将深入探讨以下几个方面：  1. **DOM定义与作用**：  DOM是W3C组织制定的一种规范，它将文档结构化为一个对象模型，每个元素、属性、文本等都是一个对象。JavaScript通过DOM可以...

			
		

	





	

		

			

				
					
JavaScript获取select中text值的方法

				
			

			

				

					10-20
				

			

		

		

			
				
在网页开发中，JavaScript是一种常用的语言，用于实现客户端的交互功能。本文将详细介绍如何使用JavaScript来获取HTML中的`<select>`元素中选中项的文本值。`<select>`元素通常用于创建下拉列表，用户可以在这些列表...

			
		

	





	

		

			

				
					
JavaScript-Dom的操作

				
			

			

				

					wx112728的博客
				

				

					04-24
					
					1256
					
				

			

		

		

			
				
一、查看节点

1.查看元素节点

节点类型
			返回值
		元素节点
			1
		属性节点
			2
		文本节点
			3
		我们在进行判断节点类型时需要根据返回值进行判断，用来进行判断的语法：

console.log(dom对象.nodeType);

获取节点的名称：

console.log(a.nodeName);

获取节点的值：

console.log(a.nodeValue);

二、根据父节点查找子节点

通过父节点对象查找子节点对象 缺点：可能会有文本节点；优点： 兼容性较.

			
		

	





	

		

			

				
					
:first-child,:nth-child选择器的使用和隔行变色

				
			

			

				

					m0_68169119的博客
				

				

					07-14
					
					2031
					
				

			

		

		

			
				
html加css实现隔行变色效果

			
		

	





	

		

			

				
					
关于CSS伪类first-child的深入理解

				
			

			

				

					mirro81的博客
				

				

					07-21
					
					1688
					
				

			

		

		

			
				
关于CSS伪类first-child的深入理解在CSS（CSS3）中，有一种选择器很特殊，那就是伪类，关于伪类有很多，这里详细分析其中的一种：first-child。具体书写格式如下： 
element：first-child{（CSS语句）}关于这个伪类，可能很多人都会对它有一个误解，那就是字面上的误解：以为是element的第一个子元素，其实这种理解是完全错误的，首先我们来看下面的代码：代码1.

			
		

	





	

		

			

				
					
js中firstChild和childNodes[0]以及children[0]之间的点滴问题

				
			

			

				

					走在前端
				

				

					03-11
					
					6949
					
				

			

		

		

			
				
示例：


	
		
		js中firstChild和childNodes[0]以及children[0]之间的点滴问题
	
	
		
			
				pppppppppppppppp
			
		
		
			window.onload = function() {
				if (!document.getElementById("div1")) return false;
				var 

			
		

	





	

		

			

				
					
firstChild.nodeValue

				
			

			

				

					香蕉熊的专栏
				

				

					04-05
					
					4250
					
				

			

		

		

			
				
假设我们已经有一个dom对象，其内容如内容在javascript中，我们为了获得title的标签和文本，一般需要这样做var title =dom.getElementsByTagName(”title”);alert(title[0].nodeName);//得到“title”alert(title[0].nodeValue)的时候，FF只能获得#text，而IE只能得到null后来查了很多

			
		

	





	

		

			

				
					
JavaScript学习笔记——firstchild的问题

				
			

			

				

					403 Forbidden
				

				

					09-08
					
					687
					
				

			

		

		

			
				
在学习获取元素的时候发现了这样一个问题
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<

			
		

	





	

		

			

				
					
firstChild,lastChild,NextSibling,previousSibling的使用

				
			

			

				

					我的IP在路上
				

				

					04-28
					
					1527
					
				

			

		

		

			
				
firstChild,lastChild,NextSibling,previousSibling的使用

			
		

	





	

		

			

				
					
JS中childNodes,firstChild,firstElementChild和children使用分析

				
			

			

				

					wendZzoo的博客
				

				

					10-25
					
					2281
					
				

			

		

		

			
				
在JS中获取元素子节点时候，使用childNode()遇到了一些问题，找了一些资料总结如下。

首先，用于测试先规定好HTML：


<div>
    <p>
        <span></span>
        <span></span>
        <span></span>
    &...

			
		

	





	

		

			

				
					
FirstChild

					
最新发布

				
			

			

				

					01-17
				

			

		

		

			
				
FirstChild＊＊＊型）中的一个属性，用于获取指定元素的第一个子节点。它可以用于访问HTML文档中的元素节点、文本节点或注释节点等。

以下是使用FirstChild属性的示例代码：

```javascript
// 获取父元素
var parentElement = document.getElementById("parent");

// 获取第一个子节点
var firstChild = parentElement.firstChild;

// 输出第一个子节点的文本内容
console.log(firstChild.textContent);
```

上述代码中，我们首先通过getElementById方法获取到父元素，然后使用FirstChild属性获取到父元素的第一个子节点。最后，我们通过textContent属性获取到第一个子节点的文本内容，并将其输出到控制台。

需要注意的是，FirstChild属性返回的是一个节点对象，如果第一个子节点是一个元素节点，则可以直接访问其属性和方法。如果第一个子节点是一个文本节点或注释节点，则可以使用textContent属性获取其文本内容。



			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值