如何将 setSelectionRange 与 document.getElementsByClassName 一起使用？

Question

如何将 SetSelectionRange 与 document.getElementsByClassName 一起使用？我可以使用document.getElementById，但为什么我不能使用document.getElementsByClassName？

我想从文本区域复制文本。我需要 class 属性。

JavaScript

$('.get_copy').on('click', function() {
    var copyText  = document.getElementsByClassName('textareaclass');
    copyText.select();
    var start     = copyText.selectionStart;
    var end       = copyText.selectionEnd;
    copyText.setSelectionRange(start, end);
    document.execCommand("copy");
});

HTML

<textarea class="textareaclass">SAMPLE TEXT</textarea><button class="get_copy"></button>
<textarea class="textareaclass">SAMPLE TEXT 2</textarea><button class="get_copy"></button>

Answer 1

不同之处在于 getElementById returns one element, since there can only be one of each ID. But getElementsByClassName returns 一个节点列表，因为可以有许多使用相同的 class。您可以使用 [index] 来获取您想要的适当元素。

const one = document.getElementById('one')
const all = document.getElementsByClassName('example')

console.log({one,all})

console.log('first is: ', all[0])

<div id="one" class="example"></div>
<div id="two" class="example"></div>

Answer 2

问题是因为 getElementsByClassName() returns 一个集合，而不是单个元素。

从代码的上下文来看，您似乎想要检索与单击的 button 相关的 textarea。由于您已经将 jQuery 添加到页面，因此您可以使用 prev() 来执行此操作。或者，您可以使用原生 previousElementSibling 属性，但它更脆弱且容易损坏。

$('.get_copy').on('click', e => {
  var copyText = $(e.target).prev('textarea')[0]; // jQuery
  //var copyText = e.target.previousElementSibling; // plain JS
  
  copyText.select();
  var start = copyText.selectionStart;
  var end = copyText.selectionEnd;
  copyText.setSelectionRange(start, end);
  document.execCommand("copy");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="textareaclass">SAMPLE TEXT</textarea>
<button class="get_copy">Get copy</button>

<textarea class="textareaclass">SAMPLE TEXT 2</textarea>
<button class="get_copy">Get copy</button>

如何将 setSelectionRange 与 document.getElementsByClassName 一起使用？

How to use setSelectionRange with document.getElementsByClassName?

javascript

clipboard

jquery

copy