DOM面试题

1、 封装函数,返回元素e的第n层祖先元素节点

<script>
		function reParent(elem,n){
			while(elem && n){
				elem = elem.parentNode;
				n--;
			}
			return elem;
		}
		var i =document.getElementsByTagName('i')[0];

2、封装函数,返回元素e的第n个兄弟元素节点,n为正,返回后面的兄弟元素节点,n为负,返回前面的,n为0,返回自己

      
		function reSibing(elem,n){
			while (n) {
				if(n > 0){
                   elem = elem.nextElementSibling;
                   n--;
				}
				else{
					elem = elem.previousElementSibling;
					n++;
				}
			}
			return elem;
		}
       var em = document.getElementsByTagName('em')[0];

3、 定义函数,封装myChildren功能,解决以前部分浏览器的兼容性问题。(即,不使用children属性)

       Element.prototype.myChildren = function(){
       	     var child = this.childNodes;
       	     var arr = [],
       	         len = child.length;
       	     for(var i = 0 ;i < len;i++){
       	     	if(child[i].nodeType == 1){
       	     		arr.push(child[i]);
       	     	}
       	     }
       	     return arr;
       }
       var p = document.getElementsByTagName('p')[0];

4、 自己封装hasChildren()方法,返回是否有子元素节点(在运行链上编程,

Element.prototype),不可用children属性*/
        Element.prototype.hasChildren = function(){
       	     var child = this.childNodes;
       	     var len = child.length;
       	     for(var i = 0 ;i < len;i++){
       	     	if(child[i].nodeType == 1){
       	     		return true;
       	     	}
       	   }
       	     return false;
       }

5、封装函数 insertAtfer()。功能类似insertBefore() 写在原型上

		Element.prototype.insertAtfer = function(elem,elem1){
             var parent = elem1.parentNode;
             if(parent.lastChild == elem1){
                 parent.appendChild(elem);
             }
             else {
             	parent.insertBefore(elem, elem1.nextSibling);
             }
		}
		var div = document.getElementsByTagName("div")[0];
		var strong = document.getElementsByTagName("strong")[0];
		var span = document.createElement("span");
		div.insertAtfer(span,strong)
回答: React的虚拟DOM是一种用JavaScript对象表示的轻量级的DOM结构。它是React用来提高性能和优化渲染的一种机制。当React组件的状态发生变化时,React会使用虚拟DOM来计算出最小的DOM更新,并将其应用到实际的DOM中,从而避免了不必要的DOM操作,提高了性能。 在React中,虚拟DOM的创建和更新是通过使用React元素来实现的。React元素是一个普通的JavaScript对象,它描述了一个组件的结构和属性。通过使用React.createElement()函数或JSX语法,我们可以创建React元素。 引用\[1\]中提到了一些与React相关的库和脚本,如react、react-dom和react-script。这些库和脚本提供了React的核心功能和工具,用于创建和管理React组件。 引用\[2\]中的代码示例展示了如何使用Refs来获取DOM元素的引用。Refs是React提供的一种访问DOM元素或组件实例的方式。在某些情况下,我们需要直接操作DOM或组件实例,这时可以使用Refs来获取对它们的引用。 引用\[3\]提到了React Fiber,它是React v16中引入的一种新的协调算法,用于解决React之前版本中的性能问题。React Fiber将组件的更新过程分成了两个阶段:reconciliation阶段和commit阶段。在reconciliation阶段,React会构建和比较Fiber树,确定哪些组件需要更新。在commit阶段,React会执行实际的DOM操作和事件处理等副作用操作。 综上所述,React的虚拟DOM是一种用JavaScript对象表示的轻量级的DOM结构,它通过使用React元素来创建和更新。Refs提供了一种访问DOM元素或组件实例的方式。React Fiber是一种新的协调算法,用于提高React的性能和优化渲染过程。 #### 引用[.reference_title] - *1* *2* *3* [React面试题(全家桶)](https://blog.youkuaiyun.com/qq_40055200/article/details/108549121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值