关于JS操作DOM的一些小细节

最新推荐文章于 2023-03-08 13:52:19 发布
最新推荐文章于 2023-03-08 13:52:19 发布
阅读量501 收藏
点赞数
分类专栏： 我的WEB前端学习笔记 文章标签： dom firstChild js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYGG5521/article/details/48914449
版权 
<span style="font-family: SimHei;"> <span style="font-size:18px;">  好吧，DOM是HTML对于JS提供的一个API,里面有许多内置方法供我们使用，可以创建节点，删除节点等。可是，今天就遇见了一个小问题。上代码：</span></span>
<span style="font-family:SimHei;"><span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
    <script src="jquery-1.11.1.js"></script>
    <meta charset="utf-8" />
    <style type="text/css">
      body{
           font-family: simhei;
      }
        </style>
</head>
<body>
<div id="liping">
    <div>
        <h5>LIPING</h5>
    </div>
</div>
<script type="text/javascript">

    var str=document.getElementById('liping');

    console.log(str.firstChild.nodeName);

    </script>
</body>
</html></span></span>
<span style="font-family:SimHei;"><span style="font-size:18px;">刚开始咋一看，不就输出DIV么，可是输出这样：</span></span>
<span style="font-family:SimHei;"><img src="https://img-blog.csdn.net/20151005154752211?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
</span>
<span style="font-family:SimHei;">然后将</span><span style="font-family: SimHei;">console.log(str.firstChild.nodeName);</span><span style="font-family: SimHei;">写成  console.log(str.childNodes);</span>
<span style="font-family:SimHei;">输出这样：</span>
<span style="font-family:SimHei;"><img src="https://img-blog.csdn.net/20151005155023017?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
</span>
<span style="font-family:SimHei;">
</span>
<span style="font-family:SimHei;"><span style="font-size:18px;">好吧，我知道了，最外层DIV的第一个子节点是空白节点，空白节点包括空格，TAB,回车等。</span></span>
<span style="font-size:18px;"><span style="font-family:SimHei;">将HTML元素这样写，就会保证它的第一个子节点是预期的：</span><span style="font-family: SimHei;"><div id="liping"><div><h5>LIPING</h5></div></div></span></span>
<pre name="code" class="html"><span style="font-family:SimHei;font-size:18px;">但是这样排版难免不好看，不好编辑管理。</span>
<span style="font-family:SimHei;"></span><p><span style="font-size:18px;">IE提供的childNodes和firefox下的childNodes的行为是有区别的，firefox下childNodes会把换行和空白字符都算作父节点的子节点，而IE的不会。</span></p>




<span style="font-family: SimHei;">
</span>


                

        

        

    

  


    

      

        

            

              
                
                  AlloyTeam-Zy
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
JavaScript中的DOM操作

				
			

			

				

					chxlloli的博客
				

				

					11-21
					
					446
					
				

			

		

		

			
				
1，webapi介绍

1，api的概念 

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、prompt()、log()、reverse()、getMonths()

任何开发语言都有自己的API

API的特征输入和输出(I/O)

API的使用方法(console.log())



2，ebap...

			
		

	



                

              
                



	

		

			

				
					
JavaScript核心操作DOM与BOM

				
			

			

				

					明哥
				

				

					07-24
					
					838
					
				

			

		

		

			
				
JavaScript = ECMAScript(JS基础) + DOM +BOM本文旨在介绍DOM (Document Object Model) 和 BOM (Browser Object Model) 的基本概念和相关操作，以及如何利用它们来实现动态交互效果和特效开发。在DOM部分中，我们将详细介绍节点操作，包括如何访问元素节点、节点之间的关系、如何改变元素节点的内容，以及节点的创建、移除和克隆等操作。我们还将介绍如何使用事件监听来处理各种事件，并探讨事件传播和事件对象的相关知识。

			
		

	



                


  
              

                


	

		

			

				
					
JavaScript DOM API的使用

				
			

			

				

					trong_ 的烂笔头
				

				

					03-08
					
					3300
					
				

			

		

		

			
				
JavaScript主要由ECMAScriptDOMBOM这三部分组成;我们要知道要完成一个程序, 光有语法是远远不够的, 对于JS来说, 除JS语法(ES)外, 还需要掌握一些WebAPI, 这些API是浏览器给JS代码提供的功能, 即DOM和BOM;DOM是页面文档对象模型, 可以对页面中的元素进行操作, 而BOM是浏览器对象模型, 可以对浏览器窗口进行操作, 本篇博客中主要介绍的就是DOM.

			
		

	





	

		

			

				
					
JavaScript对DOM操作的若干优化

				
			

			

				

					郭宇的博客
				

				

					06-10
					
					882
					
				

			

		

		

			
				
DOM操作
优化方法

			
		

	



		

			
		



	

		

			

				
					
JavaScript语法基础  	 使用JS操作网页（DOM） 	 使用JS操作浏览器（BOM）

				
			

			

				

					黑码哥的技术博客
				

				

					10-08
					
					1608
					
				

			

		

		

			
				
2134567890-



			
		

	





	

		

			

				
					
Javascript 操作 DOM 的一些细节备注（二）

				
			

			

				

					orain的专栏
				

				

					01-03
					
					1152
					
				

			

		

		

			
				
11、获取元素的样式值：通常首先想到的会是 elm.style.xxx，但这种方式在面对通过 class 或专门的样式文件等方式引入的样式时，将无法获取到值。这时需要使用下面的方法：

elm.currentStyle // IE
document.defaultView.getComputedStyle(elm, str) // 第二个参数是表示 CSS 伪对象的字符串，如 :after注意

			
		

	





	

		

			

				
					
Javascript 操作 DOM 的一些细节备注（一）

				
			

			

				

					orain的专栏
				

				

					12-30
					
					1299
					
				

			

		

		

			
				
近日在看一些 Javascript 的资料，忽然发现，因为经常使用一些框架类库，所以忽略了许多细节。这里记录下来备查。
　　1、标准 DOM 节点导航属性：parentNode、previousSibling、nextSibling、childNodes、firstChild、lastChild
　　2、常见的 DOM 节点类型(nodeType)：元素节点为 1，文本节点为 3，文档节点(d

			
		

	





	

		

			

				
					
JavaScript之DOM操作一

				
			

			

				

					学习记录
				

				

					02-09
					
					1265
					
				

			

		

		

			
				
一：DOM简介
1. Web APIs和JS基础关联性
1.1 JS的组成

2. API和Web API
2.1 API
（application programming interfac，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节
简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
2.2 Web API
Web API 是浏览器提供的一套操作浏览器功能（bom）和页面元素

			
		

	





	

		

			

				
					
JQuery_DOM操作_属性操作_细节注意

				
			

			

				

					老王玩编程
				

				

					05-15
					
					277
					
				

			

		

		

			
				
一、属性操作


1、 通用属性操作


   1. attr(): 获取/设置元素的属性
   2. removeAttr():删除属性
   3. prop():获取/设置元素的属性
   4. removeProp():删除属性


2、attr和prop的区别？


    1. 如果操作的是元素的固有属性，则建议使用prop
    2. 如果操作的是元素自定义的属性，则建议使...

			
		

	





	

		

			

				
					
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

				
			

			

				

					10-18
				

			

		

		

			
				
文件中还提到一些专题链接，指向了更多有关JavaScript操作DOM的技巧总结。这些专题可能涵盖如何高效操作DOM、处理JavaScript中的错误与调试、数据结构与算法技巧、遍历算法以及数学运算的用法等。这些资源对于希望...

			
		

	





	

		

			

				
					
Manipulator.js:一个用于操作DOMJavaScript库帮助

				
			

			

				

					04-30
				

			

		

		

			
				
操纵器.js是一个专门设计用来简化和优化在JavaScript中操作DOM（文档对象模型）的库。DOM是HTML和XML文档的编程接口，允许我们通过JavaScript来动态地改变网页内容。在JavaScript中直接操作DOM可以带来极大的灵活性...

			
		

	





	

		

			

				
					
JS未跨域操作iframe里的DOM

				
			

			

				

					10-22
				

			

		

		

			
				
 - 当通过JavaScript操作DOM时，需要注意不要引入安全漏洞，特别是在操作iframe内容时。  - 应该避免在iframe中直接执行脚本，除非能够完全控制和验证脚本内容。  9. **文档内容和结构**  - 文档内容包括了文字、...

			
		

	





	

		

			

				
					
Vue 全家桶 + Express 实现的博客（后端API全部自己手写）

				
			

			

				

					AlloyTeam-Zy
				

				

					06-07
					
					6671
					
				

			

		

		

			
				
为什么学习并使用Vue1.发展趋势最近这几年的前端圈子，由于戏台一般精彩纷呈，从 MVC 到 MVVM，你刚唱罢我登场。 backbone，AngularJS 已成昨日黄花，reactjs 如日中天，同时另一更轻量的 vue 发展势头更猛，号称兼具了 angularjs 和 reactjs 的两者优点。2.Vue能干吗移动端的上网需求已经远高于pc端，特别是 hybrid 方式的H5应用中，但是性能

			
		

	





	

		

			

				
					
js同一页面iframe调取另一iframe的url

				
			

			

				

					AlloyTeam-Zy
				

				

					08-08
					
					1546
					
				

			

		

		

			
				
今天写代码，遇到了，在同一个DIV下，二个不同的iframe，需要用其中一个iframe调取另一个的URL，刚开始想的太简单了，直接document.getElementById('one'),one为另一个iframe的ID，结果怎么都出不来，最后考虑了好久，想了想DOM的结构，节点与节点的关系，终于解决问题！写出如下代码：



    
    AlloyTeanm-zy
    
   

			
		

	





	

		

			

				
					
史上前端面试最全问答（附答案）

				
			

			

				

					AlloyTeam-Zy
				

				

					08-27
					
					1085
					
				

			

		

		

			
				
史上前端面试最全问答（附答案）

			
		

	





	

		

			

				
					
Firebug & Chrome Console 控制台的一些语句及其功能

				
			

			

				

					AlloyTeam-Zy
				

				

					10-03
					
					483
					
				

			

		

		

			
				
console.log(object[, object, ...])
使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的：
var animal='frog', count=10;
console.log("The %s jumped over %d tall buildings", animal, cou

			
		

	





	

		

			

				
					
基于libev和mongoose的集成多种协议的异步嵌入式网络库Evmongoose设计源码

					
最新发布

				
			

			

				

					09-25
				

			

		

		

			
				
该项目是采用libev和mongoose构建的，支持多协议集成的异步嵌入式网络库Evmongoose的设计源码，包含47个文件，其中包括15个Lua脚本、13个C语言源代码、4个文本文件、4个Markdown文件、2个密钥文件、2个PEM文件、2个头文件、1个Git忽略文件、1个授权文件、1个SHTML文件。Evmongoose库支持TCP、HTTP、WebSocket和MQTT等多种协议，并提供了Lua API接口，适用于嵌入式网络开发领域。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值