dom :document、element,如何取父标签和子标签,innertext获取标签内容

最新推荐文章于 2024-06-22 01:19:26 发布
最新推荐文章于 2024-06-22 01:19:26 发布
阅读量476 收藏
点赞数
原文链接：http://www.cnblogs.com/wfl9310/p/9195722.html
版权 
document拿到的是整个html页面，之后element对标签进行选择拿取,少用id多用class 
<body>
<div class="div1">
    <p class="p1">hello 1 p</p>
     <p class="p1">hello 2 p</p>
    <div class="div2"></div>
</div>
<script>
   //document拿到的是整个html页面，之后element对标签进行选择拿取
    //
    var ele=document.getElementsByClassName("p1")[1];//当class相同但多个内容不同的标签存在时，可以用数组进行取值，可以查看到结果是hello 2 p
    console.log(ele)
</script>

 

 
 
 
  
<body>
<div class="div1">
    <p class="p1">hello 1 p</p>
     <p class="p1">hello 2 p</p>
    <div class="div2">hello div
    <div>div3</div>
        <a href="">click</a>
    </div>
</div>
<script>
    var ele1=document.getElementsByClassName("p1")[0];
    console.log(ele1.parentElement)
   // 兄弟：sibling
    var ele=document.getElementsByClassName("div1")[0];
    console.log(ele.children)//children是属性，js主要用属性，jquery主要是用方法
</script>
 
 
 
 
 
 
 
  
<body>
<div class="div1">
    <p name="littleP" class="p1">hello 1 p</p>
       <div class="div2">hello div
    <div>div3</div>
        <a href="">click</a>
    </div>
</div>
<script>
   var ele=document.getElementsByName("littleP")[0];//通过name拿标签,不加数组不行
   var ele1=ele.nextElementSibling;//拿到p标签下的div2了
    console.log(ele1.innerText)//获取div2以下所有文本内容，innertext

</script>
 
 
 
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/wfl9310/p/9195722.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30726161
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
DOM:查找标签，节点操作，获取值操作，class的操作，查看class标签，事件，this...

				
			

			

				

					felix的博客
				

				

					02-15
					
					1960
					
				

			

		

		

			
				
目录DOMHTML DOM树查找标签直接查找document.方法document.getElementById()document.getElementsByClassName()document.getElementsByTagName()间接查找节点操作innerTextinnerHTML创建节点>>>createElement(标签名)节点设置属性>>&gt...

			
		

	



                

              
                



	

		

			

				
					
DOM操作获取标签方法、数据类型

				
			

			

				

					iteval
				

				

					07-14
					
					1544
					
				

			

		

		

			
				
操作 html 页面


获取标签


操作它的 肉体 和 灵魂




如何获取


css —  选中这个标签 / id / class / 标签名
.box {
    width: 100px;
    height: 200px;
}

#box {
    border-color: red;
}

p {
    margin-left: 100px;
}



js — 选中这个标签 / id / class / 标签名
var box = document.getElementById..

			
		

	



                


  
              

                


	

		

			

				
					
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：父标签、子标签和后代标签

				
			

			

				

					陈子的专栏
				

				

					04-11
					
					1234
					
				

			

		

		

			
				
（七）父标签、子标签和后代标签

 HTML标签嵌套后，两个直属嵌套的标签，外层的标签称为父标签，内层的标签称为子标签；子标签的子标签则称为父标签的后代标签，子标签也属于后代标签。如：


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;...

			
		

	





	

		

			

				
					
5.DOM（四）获取某个元素的父或兄弟节点，输出文本span.innerHTML；span.innerText；span.textContent；span.firstChild.nodeValue

				
			

			

				

					lazylYYY的博客
				

				

					08-10
					
					412
					
				

			

		

		

			
				
目录



一：获取某个元素的父节点     letfuqin=c.parentNode;

二：获取某个元素的兄弟节点

       ①previousSibling获取当前节点的前一个兄弟节点(空白)

       ②nextSibling获取下一个兄弟节点(空白)

       ③previousElementSibling获取当前节点上一个兄弟元素(非空白)

       ④nextElementSi...

			
		

	



		

			
		



	

		

			

				
					
解决“”父级标签和子标签边框重叠，设置子标签的margin父标签会跟着移动“”的方法...

				
			

			

				

					weixin_30338497的博客
				

				

					12-19
					
					296
					
				

			

		

		

			
				
1.可以给父标签一个padding,然后给一个很小的值，虽然不影响整体但是不建议使用
2.给父标签一个"over:hidden"的样式，推荐使用
转载于:https://www.cnblogs.com/mmykdbc/p/6200933.html...

			
		

	





	

		

			

				
					
Element之获取子节点方法

				
			

			

				

					xclsky的博客
				

				

					12-18
					
					3万+
					
				

			

		

		

			
				
1 想要读取字符串格式的xml内容。需要通过ByteArrayInputStream方法，ByteArrayInputStream该类是将字符串内容转化为字节数组的流对象 
如：String xml_string="SoapService_1579";
ByteArrayInputStream byteArrayInputStream=new ByteArrayInputStream(xml_

			
		

	





	

		

			

				
					
css-父标签中的子标签默认位置

				
			

			

				

					anjue8318的博客
				

				

					11-17
					
					205
					
				

			

		

		

			
				
<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style>			.a{				width: 100px;				height: 100px;				background: red;				position: ...

			
		

	





	

		

			

				
					
JS（DOM-Node、Document、Element）

				
			

			

				

					qq_48108860的博客
				

				

					03-11
					
					2397
					
				

			

		

		

			
				
目录

定义

Node类型

Node类型的属性和方法

获取body节点

查看节点类型nodeType（Document9 Element1 Text3 Comment8）

返回节点名称nodeName（返回纯大写节点名称）

获取子节点childNodes，保存的是NodeList列表（返回一个类数组对象）

ES5 将类数组对象转换成数组对象

ES6 将类数组对象转换成数组对象

获取兄弟节点的前一个节点previousSibling

获取兄弟节点的后一个节点nextSibling

获取n

			
		

	





	

		

			

				
					
获取和操作 DOM 节点

					
最新发布

				
			

			

				

					2401_82968855的博客
				

				

					06-22
					
					1882
					
				

			

		

		

			
				
获取和操作 DOM 节点DOM 节点也会被称为 DOM 元素。想要操作 DOM 节点，就必须先获取到 DOM 节点。1. 获取 DOM 节点获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：返回对拥有指定 id 的第一个对象的引用。element.getElementById 是指去 element 节点下根据 id 查找子节点。通常在程序开始前，没有主动去获取过节点，这个时候会使用根节点 document 来进行查找。实例演示预览复制。

			
		

	





	

		

			

				
					
htmldom_document

				
			

			

				

					07-31
				

			

		

		

			
				
 - `innertext`属性则只包含元素内的文本内容，不包括子元素。  - `attr`属性用于访问或修改元素的属性，如`$element->attr['class'] = 'newClass'`。  5. **遍历和修改DOM**：  - `foreach`循环可以遍历元素集合，...

			
		

	





	

		

			

				
					
java递归根据节点ID得到所有父节点名称

				
			

			

				

					sms
				

				

					12-10
					
					1万+
					
				

			

		

		

			
				
背景
  由于需要展示节点的时候需要体现父节点的名称
关键代码
public String getParentName(int nodeID){  
        //和数据库交互,得到当前节点记录  
    	DbRole entity = roleMapper.selectByPrimaryKey(nodeID);  
        if(entity != null){  
  

			
		

	





	

		

			

				
					
DOM操作：

				
			

			

				

					m0_52558788的博客
				

				

					04-12
					
					2264
					
				

			

		

		

			
				
document object model（文档对象模型）

作用：动态操作html元素节点（写特效）

操作html元素节点（element）：

节点的样式操作：

增

删

改

查：





获取当前需要操作的元素节点：

Dom tree（dom树）：root element（html）

document（当前文档的根节点)




document.getElementById():通过id 属性获取元素
document.getElementByClassName//通过class属性，

			
		

	





	

		

			

				
					
document.getElementByclassName（）方法

					
热门推荐

				
			

			

				

					boat_sea的博客
				

				

					04-29
					
					23万+
					
				

			

		

		

			
				
document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)使用getElementByclassName（）方法，使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。注：使用节点列表对象的len...

			
		

	





	

		

			

				
					
js如何循环遍历从getElementsByClassName返回的所有元素

				
			

			

				

					cxy的博客
				

				

					03-06
					
					1万+
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.first, .second {
  border: 1px solid black;
  width: 200px;
}
</style>
<script type='text/javascript'>
windo...

			
		

	





	

		

			

				
					
Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

				
			

			

				

					weixin_30462049的博客
				

				

					08-05
					
					390
					
				

			

		

		

			
				
一、三种获取页面元素的方式：
getElementById:通过id来获取

<body>
<input type="text" value="请输入一个值：" id="txt"/>
<input type="button" value="按钮" id="btn"/>
<script>
    var txt=document.getE...

			
		

	





	

		

			

				
					
element plus 获取标签节点内的值

				
			

			

				

					分享互联网的有趣知识~
				

				

					09-07
					
					1038
					
				

			

		

		

			
				
给标签添加 ref=“root” 

			
		

	





	

		

			

				
					
JavaScript 中的 DOM 对象（Document 对象、Element 对象

				
			

			

				

					m0_60388216的博客
				

				

					03-28
					
					1051
					
				

			

		

		

			
				
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

			
		

	





	

		

			

				
					
document语法获取标签

				
			

			

				

					m0_53852077的博客
				

				

					04-12
					
					136
					
				

			

		

		

			
				
获取HTML可以用于滚动到一定距离时显示导航列表等，增加用户体验。但是有一个特例，需要我们记住，获取。一般我们要获取元素标签使用。

			
		

	





	

		

			

				
					
DOM元素的所有子元素 .elements

				
			

			

				

					weixin_30383279的博客
				

				

					08-06
					
					839
					
				

			

		

		

			
				
.elements属性用来获取某个DOM元素的所有子元素，是个很有用的属性，可用于用className来获取指定元素等用途。 
转载于:https://www.cnblogs.com/cly84920/archive/2008/08/06/4427136.html...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值