Range.selectNodeContents()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

Range.selectNodeContents() method sets the 范围 to contain the contents of a 节点 .

父级 节点 of the start and end of the 范围 will be the reference node. The startOffset is 0, and the endOffset is the number of child 节点 s or number of characters contained in the reference node.

句法

range.selectNodeContents(referenceNode);

参数

referenceNode: 节点 whose contents will be selected within a 范围 .

范例

range = document.createRange();
referenceNode = document.getElementsByTagName("div")[0];
range.selectNodeContents(referenceNode);

Live sample

This example lets the user select and deselect a paragraph with buttons. Document.createRange() , Range.selectNodeContents() ，和 Selection.addRange() are used to select the content. Window.getSelection() and Selection.removeAllRanges() are used to deselect it.

HTML

<p id="p"><b>Use the buttons below</b> to select or deselect the contents of this paragraph.</p>
<button id="select-button">Select paragraph</button>
<button id="deselect-button">Deselect paragraph</button>

JavaScript

const p = document.getElementById('p');
const selectButton = document.getElementById('select-button');
const deselectButton = document.getElementById('deselect-button');
selectButton.addEventListener('click', e => {
  // Clear any current selection
  const selection = window.getSelection();
  selection.removeAllRanges();
  // Select paragraph
  const range = document.createRange();
  range.selectNodeContents(p);
  selection.addRange(range);
});
deselectButton.addEventListener('click', e => {
  const selection = window.getSelection();
  selection.removeAllRanges();
});

结果

规范

规范	状态	注释
DOM The definition of 'Range.selectNodeContents()' in that specification.	实时标准	无变化。
Document Object Model (DOM) Level 2 Traversal and Range Specification The definition of 'Range.selectNodeContents()' in that specification.	过时	最初的规范。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`selectNodeContents`	Chrome Yes	Edge 12	Firefox 4	IE 9	Opera 9	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

另请参阅

The DOM interfaces index

元数据

最后修改： Jul 29, 2019

DOM (文档对象模型)
范围
构造函数
1. Range()
特性
方法
1. cloneContents()
2. cloneRange()
3. collapse()
4. compareBoundaryPoints()
5. ~~compareNode()~~
6. comparePoint()
7. createContextualFragment()
8. deleteContents()
9. detach()
10. extractContents()
11. getBoundingClientRect()
12. getClientRects()
13. insertNode()
14. intersectsNode()
15. isPointInRange()
16. selectNode()
17. selectNodeContents()
18. setEnd()
19. setEndAfter()
20. setEndBefore()
21. setStart()
22. setStartAfter()
23. setStartBefore()
24. surroundContents()
25. toString()
继承：
1. AbstractRange
DOM 相关页面

在此页

句法

参数

范例

Live sample

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题