JavaScript HTML DOM 元素

最新推荐文章于 2023-05-12 21:25:35 发布
最新推荐文章于 2023-05-12 21:25:35 发布
阅读量234 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37252209/article/details/54407592
版权

DOM是文档对象模型；具有赋予js操作节点的能力。

A、查找元素：

1、通过 id 找到元素

var oBtn=document.getElementById("btn");


2、通过标签名找到元素 

var oBtn=document.getElementById("btn");
var aText=oBtn.getElementsByTagName("text");


3、通过类名找到元素 

var oUl=document.getElementsByClassName("li");

注意：通过类名获取元素在IE6-8不兼容

B、DOM节点
节点分成两种：文本节点，元素节点。
1.1、childNodes：可找到的是文本节点与元素节点；这时可用nodeType来判断节点类型，然后再控制子节点。
例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>childNodes与nodeType的使用</title>
		<script type="text/javascript">
			window.οnlοad=function(){
				var oList=document.getElementById('list');
				var num=0;
				for(var i=0;i<oList.childNodes.length;i++){
					//nodeType==3 是文本节点
					//nodeType==1 是元素节点
					if(oList.childNodes[i].nodeType==1){
						num++;
						oList.childNodes[i].style.background='red';
					}
				}
				
				console.log(num);
				
			}
		</script>
	</head>
	<body>


节点分成两种： 文本节点，元素节点，大部分情况，我们只要元素节点。

1.2、children：也可以获取子节点（元素节点），而且兼容各种浏览器。包括IE6-8，因此较常用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>children的使用</title>
		<script type="text/javascript">
			window.οnlοad=function(){
				var oList=document.getElementById('list');
				var ochild=document.getElementById('child');
				//oList.children  父节点.子节点
				//console.log(oList.children.length);
				
				//通过子节点查找父节点的方式
				console.log(ochild.parentNode);
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li id="child"></li>
			<li></li>
		</ul>
	</body>
</html>

2.1、获取父节点：parentNode

<!DOCTYPE html><html>
	<head>
		<meta charset="UTF-8">
		<title>parentNode的使用</title>
		<script type="text/javascript">
			window.οnlοad=function(){
				var oUl=document.getElementById('list');
				var aBtn=oUl.getElementsByTagName('a');
				
				for(var i=0;i<aBtn.length;i++){
					aBtn[i].οnclick=function(){
						this.parentNode.style.display='none';
					}
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>恭喜发财<a href="javascript:">删除</a></li>
			<li>恭喜发财<a href="javascript:">删除</a></li>
			<li>恭喜发财<a href="javascript:">删除</a></li>
			<li>恭喜发财<a href="javascript:">删除</a></li>
		</ul>
	</body>
</html>

3、offsetParent：绝对相对定位后的父节点。没有相对定位盒子，则父节点是body。 

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<style>
			#div1 {
				width: 200px;
				height: 200px;
				background: #CCC;
				margin: 100px;
			}
			
			#div2 {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 50px;
				top: 50px;
			}
		</style>
		<script>
			window.onload = function() {
				var oDiv2 = document.getElementById('div2');
				alert(oDiv2.offsetParent);
			};
		</script>
	</head>

	<body>
		<div id="div1">
			<div id="div2"></div>
		</div>
	</body>
</html>



4、首尾子节点
4.1、首部子节点：
firstElementChild;其他浏览器；
firstChild：IE浏览器； 

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<script>
			window.onload = function() {
				var oUl = document.getElementById('ul1');
				if (oUl.firstElementChild) {
					oUl.firstElementChild.style.background = 'red'; //非IE6-8浏览器
				} else {
					oUl.firstChild.style.background = 'red'; //IE6-8
				}
			};
		</script>
	</head>

	<body>
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>

</html>

4.2、尾部子节点
lastElementChild：其他浏览器；
lastChild：IE浏览器； 

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<script>
			window.onload = function() {
				function lastElementChild(ele){
					if(ele.lastElementChild){
						return ele.lastElementChild;//其他
					}
					else{
						return ele.lastChild;//IE
					}
				}
				
				lastElementChild(oList).style.background='red';
			}
		</script>
	</head>

	<body>
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>

</html>


C图片无缝滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			#box{
				height: 464px;
				width: 185px;
				border: 1px solid #000;
				margin: 100px;
				position: relative;
				overflow: hidden;
			}
			#box ul{
				position: absolute;
				left: 0;
				top: 0;
			}
			#box ul li{
				float: left;
				width: 185px;
				height: 116px;
			}
			#box ul li img{
				display: block;
				width: 185px;
				height: 116px;
				
			}
			#direction p{
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: green;
				color: #fff;
				float: left;
				margin-right: 5px;
			}
		</style>
		<script type="text/javascript">
			window.οnlοad=function(){
				var oBox=document.getElementById('box');
				var oUl=oBox.getElementsByTagName('ul')[0];
				var aLi=oUl.getElementsByTagName('li');
				var oTotop=document.getElementById('to_top');
				var oTobottom=document.getElementById('to_bottom');
				
				var speed=-2;
				oUl.style.height=aLi[0].offsetHeight*aLi.length+'px';
				oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
				
				
				function totop(){
					if(oUl.offsetTop<-oUl.offsetHeight/2){
						oUl.style.top='0';
					}
					if(oUl.style.top>0){
						oUl.style.top=-oUl.offsetHeight/2+'px';
					}
					oUl.style.top=oUl.offsetTop+speed+'px';
					
				}
				
				oTotop.οnclick=function(){
					speed=-2;
				}
				oTobottom.οnclick=function(){
					speed=2;
				}
				
				setInterval(totop,50);
			}
		</script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li><img src="img/a1.jpeg" alt="" /></li>
				<li><img src="img/a2.jpeg" alt="" /></li>
				<li><img src="img/a3.jpeg" alt="" /></li>
				<li><img src="img/a4.jpeg" alt="" /></li>
			</ul>
			
		</div>
		<div id="direction">
			<p id="to_top">向上</p>
			<p id="to_bottom">向下</p>
		</div>
	</body>
</html>







                

        

        

    




    

      

        

            

              
                
                  CaiMinYi_1207
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
1.dom元素——dom元素获取

				
			

			

				

					ling_xy的博客
				

				

					12-02
					
					7556
					
				

			

		

		

			
				
什么是dom？
dom，即document  object  model(文本对象模型)。整个页面元素统称dom。
本质上是一种接口（API)，是专门操作网页内容的API标准
dom树

dom操作：
1.dom元素获取
2.dom元素属性操作（常规属性操作）
3.dom元素节点操作（子父节点之类的）
4.dom元素的事件（行为）
5.dom元素的方法操作



前提：要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在），根据页面的加载顺序来考虑
js里面如何获取dom元素
js里面dom..

			
		

	



                

              
                



	

		

			

				
					
DOM——获取元素方式

				
			

			

				

					weixin_68160847的博客
				

				

					01-12
					
					991
					
				

			

		

		

			
				
（1）获取元素
（2）对元素进行操作（设置其属性或调用其方法）
（3）动态创建元素
（4）事件（什么时机做相应的操作）

			
		

	



                


  
              

                


	

		

			

				
					
Dom元素

				
			

			

				

					WJLSH123的博客
				

				

					08-18
					
					2406
					
				

			

		

		

			
				
dom的定义
​      DOM(Document Object Model) 文档对象模型
​        作用:
​          通过dom模型可以让js操作页面中的html标签和样式,从而改变页面的结构和样式
​        document:(文档)
​          表示整个网页文件(各种标签)
​          html标签存在完整的层次结构
​        object:(对象)
​          当浏览器将html加载到页面中,会自动生成每个标签的对象,以便js可以

			
		

	





	

		

			

				
					
JavaScript中DOM元素对象

				
			

			

				

					weixin_52629158的博客
				

				

					05-02
					
					592
					
				

			

		

		

			
				
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。一个窗口下面可以有很多的document对象。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。document 表示的是一个文档对象，windows 表示一个窗口对象。insertBefore() 方法可在已有的子节点前插入一个新的子节点。childNodes 属性返回包含被选节点的子节点的 NodeList。

			
		

	



		

			
		



	

		

			

				
					
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法——DOM

				
			

			

				

					weixin_70320000的博客
				

				

					11-26
					
					2274
					
				

			

		

		

			
				
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法

			
		

	





	

		

			

				
					
JavaScript HTML DOM元素 节点操作汇总

				
			

			

				

					10-16
				

			

		

		

			
				
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。  首先，理解...

			
		

	





	

		

			

				
					
JavaScript HTML DOM 元素 (节点)

				
			

			

				

					01-21
				

			

		

		

			
				
JavaScript HTML DOM 元素 (节点) 本章节介绍如何向文档中添加和移除元素(节点)。  创建新的 HTML 元素 (节点) – appendChild() 要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。 ...

			
		

	





	

		

			

				
					
JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作,结合实例形式分析了JavaScript针对HTML DOM 元素 (节点)的新增，编辑，删除相关操作技巧与使用注意事项,需要的朋友可以参考下

			
		

	





	

		

			

				
					
javascript实现dom元素可拖动

				
			

			

				

					10-22
				

			

		

		

			
				
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for ...通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

			
		

	





	

		

			

				
					
DOM介绍

				
			

			

				

					gergerfrgegregfd的博客
				

				

					06-24
					
					1978
					
				

			

		

		

			
				
一、DOM简介1.document:文档,DOM中的"D":当创建了一个网页并把它加载到Web浏览器中时,DOM就已经生成了,它把你编写的网页文档转换为一个文档对象.2.Object:对象,DOM中的"O":在程序设计语言里,“对象”这个词含义很明确,对象是一种自给自足的数据集合,与对象相关联的变量被称为属性,与对象相关联的且只能由该对象去调用的函数被称为这个对象的方法.JavaScript里最基础的对象是window对象,对应着浏览器本身,这个对象的属性和方法通常被称为BOM(浏览器对象模型),但叫做窗口

			
		

	





	

		

			

				
					
Dom 获取元素的几种方式

				
			

			

				

					qq_66198247的博客
				

				

					05-23
					
					9848
					
				

			

		

		

			
				
一.Dom简介

文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

二.Dom树



文档：一个页面就是一个文档，Dom中用document表示 ；
	元素：页面中的所有标签都是元素，Dom中使用element表示；
	节点：网页中的所有内容都是一个节点（标签，属性，文本，注释等），Dom中使用node表示
Dom

			
		

	





	

		

			

				
					
1、DOM 获取元素

					
最新发布

				
			

			

				

					hzg_hou的博客
				

				

					05-12
					
					636
					
				

			

		

		

			
				
标签自定义属性,特指程序员自己给标签添加的自定义属性自定义属性两种格式H5规范要求所有自定义属性必须以data-**开始完全自己定义属性,没有任何的格式要求备注:标签本身自带的属性叫内置属性或标准属性  例如: class , id, name …自定义属性本质上也是一个键值对,用来保存数据通用方式标签设置自定义属性/标准属性// 1. 设置自定义属性 div . setAttribute('myage' , 18);

			
		

	





	

		

			

				
					
DOM元素操作

				
			

			

				

					TKOP_的博客
				

				

					01-26
					
					618
					
				

			

		

		

			
				
DOM简介、获取元素、事件基础、操作元素

			
		

	





	

		

			

				
					
JavaScript HTML DOM

				
			

			

				

					qq_23347209的博客
				

				

					01-24
					
					527
					
				

			

		

		

			
				
JavaScript HTML DOM是JS学习的一部分，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。提示：以下是本篇文章正文内容，下面案例可供参考HTML DOM (文档对象模型)当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树：HTML DOM 树通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

			
		

	





	

		

			

				
					
DOM元素

				
			

			

				

					ernest808的专栏
				

				

					11-23
					
					996
					
				

			

		

		

			
				
文档对象模型（Document Object Model，DOM）是给 HTML 与 XML 文件使用的一组 API。它提供了文件的结构表述（representation），让你可以更动其中的内容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。 所有网页设计师可操作及建立文件的属性、方法及事件都以[对象]来展现（例如，document 就代表「文件本身」这个对象，table 对象

			
		

	





	

		

			

				
					
Javascript的HTML DOM （文档对象模型）

				
			

			

				

					GL280599ZL的博客
				

				

					11-27
					
					636
					
				

			

		

		

			
				
采用DOM的方式来操作网页的元素,通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性

			
		

	





	

		

			

				
					
DOM简介及获取元素

				
			

			

				

					zy_zxcvbnm的博客
				

				

					04-10
					
					258
					
				

			

		

		

			
				
DOM简介
1.1什么是DOM
文档对象模型，是W3c组织推荐的处理可扩展标记语言（HTML\XML）的标准编程接口。W3C已经定义了一系列DOM接口，通过这些接口可以改变网页的内容，结构和样式。
DOM树

...

			
		

	





	

		

			

				
					
vue 项目遇到的问题

				
			

			

				

					ZQ的专栏
				

				

					06-06
					
					1634
					
				

			

		

		

			
				
1、Module not found: Error: Can't resolve 'stylus-loader' in...&lt;style lang="stylus" rel="stylesheet/stylus"&gt;   #app    	.tab	   	display:flex	   	width: 100%	   	height: 40px	   	line-height: 40p...

			
		

	





	

		

			

				
					
JS操作元素方法

				
			

			

				

					08-19
				

			

		

		

			
				
综上所述，本文详细介绍了JS操作元素方法以及DOM元素属性和方法的相关知识，包括对DOM的概念、使用JavaScript对DOM进行操作的方法和属性，以及W3C DOM和JavaScript的区别。这些知识对于理解和使用DOM以及JavaScript...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值