selectNode、selectNodeContents 区别

SelectNode()

range对象的SelectNode将用于range对象起点指定于某个节点的起点,将range对象的终点指定于该对象的终点,使range对象所代表的区域中包含该节点,该方法并不把该节点设为高亮选取状态。

**设置该方位的边界点,使它包含指定节点和它所有子孙节点

语法:selectNode(refNode)


SelectNodeContents()

range对象的SelectNodeContents方法将于range对象起点指定为某个节点中的所有内容的起点,将range对象终点指定为该节点中的所有内容的终点,使range对象代表的区域中包含该节点所有内容。

**设置该范围的边界点,使它包含指定节点的子孙节点,但不包含指定的节点本身

方法:selectNodeContents(refNode)


deleteContents()

range对象的deleteContents方法用于将range对象所包含的内容从页面中进行删除。

方法:deleteContents()


cloneRange()

创建一个新的Range对象,表示与当前的Range对象想同的文档区域


<script>
     function deleteRangeContent(onlyContent){
      var content = document.getElementById("content");
      var rangeObj = document.createRange();

       if(onlyContent){
           rangeObj.selectNodeContents(content)
           rangeObj.deleteContents();
        }else{
           rangeObj.selectNode(content);
           rangeObj.deleteContents();
        }}
</script>
<section id="content" style="background-color:aquamarine; width:200px; height:100px;">
    element 
</section>
<input type="button" value="delete content" οnclick="deleteRangeContent(true)">
<input type="button" value="delete element" onclick ="deleteRangeContent(false)"


deleteContents()
当antd的自动计算弹出框位置功能失效时,你可以尝试手动计算并设置弹出框的位置。以下是一个简单的示例代码,供你参考: 首先,给`Select`组件添加一个`ref`属性,用来获取该组件的DOM节点: ```jsx <Select ref={selectRef} {...其他属性} /> ``` 然后,在合适的时机(例如组件加载完毕后或者选择框展开时),获取选择框和目标元素的位置信息,并计算弹出框的位置: ```jsx import { useEffect, useRef } from 'react'; const YourComponent = () => { const selectRef = useRef(null); useEffect(() => { const handleDropdownVisibleChange = (open) => { if (open) { const selectNode = selectRef.current; const selectRect = selectNode.getBoundingClientRect(); const dropdownNode = selectNode.querySelector('.ant-select-dropdown'); const dropdownRect = dropdownNode.getBoundingClientRect(); // 计算弹出框的位置 const top = selectRect.bottom + window.pageYOffset; const left = selectRect.left + window.pageXOffset; // 设置弹出框的位置 dropdownNode.style.position = 'fixed'; dropdownNode.style.top = `${top}px`; dropdownNode.style.left = `${left}px`; } }; const selectNode = selectRef.current; selectNode.addEventListener('dropdownVisibleChange', handleDropdownVisibleChange); return () => { selectNode.removeEventListener('dropdownVisibleChange', handleDropdownVisibleChange); }; }, []); return ( <Select ref={selectRef} {...其他属性} /> ); }; ``` 通过获取选择框和弹出框的位置信息,并手动设置弹出框的位置,可以绕过antd的自动计算功能。请注意在不同的场景下,可能需要根据具体情况进行适当的调整和修改。 希望这个手动计算弹出框位置的示例可以帮助你解决问题。如果你有其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值