JavaScript でカーソルと選択を操作する方法について簡単に説明します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript でカーソルと選択を操作する方法について簡単に説明します。

青灯夜游

Jun 30, 2021 am 10:46 AM

javascriptカーソル

JavaScriptでカーソルや選択を操作するにはどうすればよいですか?次の記事では、Selection オブジェクトと Range オブジェクトについて説明し、これら 2 つのオブジェクトを使用してカーソルと選択範囲を操作する方法を紹介します。

JavaScript でカーソルと選択を操作する方法について簡単に説明します。

テキストのハイライト表示や入力編集など、ビジネスシーンでカーソルや選択範囲を操作する必要がある場合、提供されている Selection を使用できます。ブラウザの オブジェクトと Range オブジェクトを使用して、カーソルと選択を操作します。

Selection オブジェクト

Selection オブジェクトは、ユーザーが選択した選択範囲またはキャレットの現在位置を表し、複数の要素にまたがる場合があります。

//获取 Selection 对象
window.getSelection();

ユーザーは、左から右 (文書と同じ方向) または右から左 (文書の方向と反対) にテキストを選択できます。

anchor (アンカー): は、ユーザーが選択を開始する場所を指します。
focus (フォーカス): は、ユーザーが選択を終了する場所を指します。

マウスを使用してテキストを選択する場合、anchor はマウスボタンを押した場所を指し、focus はマウスを放した場所を指します。ボタン。 anchor と focus の概念は、選択範囲の開始位置と終了位置と混同しないでください。anchor は focus# の前にある可能性があるためです。 ## だけでなく、テキストを選択するときのマウスの動きの方向、つまりマウスボタンを押して放す場所によっては、focus の後になる場合もあります。

以下に示すように:

JavaScript でカーソルと選択を操作する方法について簡単に説明します。

## 属性:

アンカーポイント (anchor) が配置されているノード。
anchorOffset:
- がテキストノードまたは注釈ノードの場合、アンカーポイント (アンカー) をノード内の最初の単語の文字数にします。
- が要素ノードの場合、アンカーポイント (anchor) より前の兄弟ノードの総数を返します。
フォーカス (focus) が配置されているノード。
focusOffset：
- がテキストノードまたは注釈ノードの場合、フォーカス (focus) ) このノードの最初の単語までの文字数。
- が要素ノードの場合、フォーカス前の兄弟ノードの総数を返します (focus)。
選択範囲の開始位置と終了位置が一致するかどうかを示す Boolean 値 (true# の場合) ## 、現在コンテンツが選択されていないと考えられます。 rangeCount:
Range オブジェクトの数。
現在の選択のタイプを次の 3 つの値で説明します。
None:
- キャレット:
- 範囲:

上記の属性はすべて 読み取り専用属性

です。

メソッド:

addRange(range)

選択範囲に追加 (

Selection

オブジェクト)範囲 (

Range オブジェクト)。 パラメータ:

range

: 範囲オブジェクト

例:

<p id="text">文本</p>

//添加一个选区
var text = document.querySelector("#text");
var selObj = window.getSelection();
var rangeObj = document.createRange();
rangeObj.selectNode(text);
selObj.addRange(rangeObj);

collapse(parentNode, offset)

現在の選択範囲をポイントまで折りたたみます。文書は変更されません。
パラメータ:

parentNode
: カーソルが置かれるターゲットノード
offset: オプション、ターゲットノード内のオフセット
例:
```
<div contenteditable="true" id="text">文本</div>
```
```
//收起选区到一个点，光标落在一个可编辑元素上
var text = document.querySelector("#text")
window.getSelection().collapse(text,0);
```
collapseToEnd()
現在の選択をキャンセルし、元の選択の最後にカーソルを置きます。
パラメータ:
None
例:
```
var selObj = window.getSelection();
selObj.collapseToEnd();
```
collapseToStart()
現在の選択をキャンセルし、元の選択範囲の先頭にカーソルを置きます。
パラメータ:
None
例:
```
var selObj = window.getSelection();
selObj.collapseToStart();
```
##containsNode(aNode,aPartlyContained)
Selection
オブジェクトに含まれているかどうか (つまり、ノードが選択されているかどうか)。

参数：

aNode：用于判断是否包含在 Selection 对象中的节点。
aPartlyContained：
当此参数为 true 时，Selection 对象包含 aNode 的一部分或全部时，containsNode() 方法返回true。
当此参数为 false （默认值）时，只有 Selection 对象完全包含 aNode 时，containsNode() 方法才返回 true。

示例：
```
<div id="text">文本</div>
```
```
var text = document.querySelector("#text");
var selObj = window.getSelection();
var contains = selObj.containsNode(text);
```
deleteFromDocument()

从 DOM 中删除选中的文档片段。

参数：

无

示例：
```
var selObj = window.getSelection();
selObj.deleteFromDocument();
```
extend(node,offset)

移动选区的焦点（focus）到指定的点。选区的锚点（anchor）不会移动。选区将从锚点（anchor）开始到新的焦点（focus），不管方向。

参数：

node：焦点（focus）会被移至此节点内。
offset：可选，默认值为0，焦点（focus）会被移至 node 内的偏移位置。

示例：
```
<div id="text">文本</div>
```
```
var text = document.querySelector("#text");
var selObj = window.getSelection();
selObj.extend(text);
```
getRangeAt(index)

返回一个当前选区包含的 Range 对象。

参数：

index：该参数指定 Range 对象的索引。如果该数值大于或等于 rangeCount ，将会报错。

示例：
```
//获取一个 Selection 对象
var selObj = window.getSelection();
//获取一个 Range 对象
var rangeObj  = selObj.getRangeAt(0);
```
modify(alter,direction,granularity)

通过文本命令来更改当前选区或光标位置。

参数：

alter：改变类型，传入 move 来移动光标位置，或者 extend 来扩展当前选区。
direction：调整选区的方向。你可以传入 forward 或 backward 来根据选区内容的语言书写方向来调整。或者使用 left 或 right 来指明一个明确的调整方向。
granularity：调整的距离颗粒度。可选值有 character、word、sentence、line、paragraph、lineboundary、sentenceboundary、paragraphboundary、documentboundary。

示例：
```
var selection = window.getSelection();
selection.modify("extend", "forward", "word");
```

removeAllRanges()

会从当前 Selection 对象中移除所有的 Range 对象，取消所有的选择。

参数：

无

示例：
```
var selObj = window.getSelection();
selObj.removeAllRanges();
```
removeRange(range)

将一个 Range 对象从选区中移除。

参数：

range：一个将从选区中移除的 Range 对象。

示例：
```
var selObj = window.getSelection();
var rangeObj = selObj.getRangeAt(0)
selObj.removeRange(rangeObj);
```

selectAllChildren(parentNode)

把指定元素的所有子元素设置为选区（该元素本身除外），并取消之前的选区。

参数：

parentNode：指定元素

示例：

<div id="selectAll">
  <div>文本1</div>
  <div>文本2</div>
</div>

var selectAll = document.querySelector("#selectAll");
var selObj = window.getSelection();
selObj.selectAllChildren(selectAll);

setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

选中两个特定 DOM 节点之间的内容。

参数：

anchorNode：选中内容的开始节点
anchorOffset：选区起始位置在 anchorNode 内的偏移量。
如果 anchorNode 是文本节点，表示选区起始位置在该节点第几个字符位置。
如果 anchorNode 是元素节点，表示选区起始位置在该节点内第几个子节点的位置。
focusNode：选中内容的结束节点
focusOffset：选区终止位置在 focusNode 内的偏移量。
如果 focusNode 是文本节点，表示选区终止位置在该节点第几个字符位置。
如果 focusNode 是元素节点，表示选区终止位置在该节点内第几个子节点的位置。

示例：

<div id="start"></div>
<div id="end"></div>

var start = document.querySelector("#start");
var end = document.querySelector("#end");
var selObj = window.getSelection();
selObj.setBaseAndExtent(start,0,end,0);

toString()

返回代表当前 Selection 对象的字符串，例如当前选择的文本。

参数：

无

示例：
```
var selObj = window.getSelection();
selObj.toString();
```

Range 对象

Range 对象表示被选中的文档片段。一个 Range 对象可能包含整个元素节点，也可能包含元素节点的一部分，例如文本节点的一部分文字。用户通常只能选择一个 Range 对象，但是有的时候用户也有可能选择多个 Range 对象（只有火狐浏览器可以选择多个 Range 对象）。

可以用 Document 对象的 Document.createRange 方法创建 Range，也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外，还可以通过 Document 对象的构造函数 Range() 来得到 Range。

属性：

collapsed： 返回一个表示起始位置和终止位置是否相同的 Boolean 值。
commonAncestorContainer： 返回包含 startContainer 和 endContainer 的最深一级的节点。
endContainer： 返回包含 Range 终点位置的节点。
endOffset：
- 如果 endContainer 是文本节点、注释节点，返回该节点第一个字到选区边界的字符个数（即被选中的字符个数）。
- 如果 endContainer 是元素节点，返回选区终止位置之后第一个节点之前的同级节点总数。
startContainer： 返回包含 Range 开始位置的节点。
startOffset：
- 如果 startContainer 是文本节点、注释节点，返回该节点第一个字到选区边界的字符个数（即未被选中的字符个数）。
- 如果 startContainer 是元素节点，返回选区起始位置第一个节点之前的同级节点总数。

注意：

以上所有属性都是只读属性。

方法：

cloneContents()

返回一个文档片段，它是 Range 对象中所有节点的副本。

参数：

无

示例：

// 在文档中插入选中元素
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
documentFragment = rangeObj.cloneContents();
document.body.appendChild(documentFragment);

cloneRange()

返回一个 Range 对象的副本（两个对象各自做出改变，都不会影响另一方）。

参数：

无

示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
clone = rangeObj.cloneRange();
```
collapse(toStart)

向开始或结束方向折叠 Range 。

参数：

toStart：可选，Boolean 值（默认值 false）， true 折叠到 Range 的开始方向，false 折叠到结束方向。

示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.collapse(true);
```

compareBoundaryPoints(how, sourceRange)

比较两个 Range 对象的起始位置节点或结束位置节点。

参数：

how 表示比较方法的常量：

  Range.END_TO_END ：比较 sourceRange 对象的结束位置节点和原 Range 对象的结束位置节点。
  Range.END_TO_START ：比较 sourceRange 对象的结束位置节点和原 Range 对象的起始位置节点。
  Range.START_TO_END ：比较 sourceRange 对象的起始位置节点和原 Range 对象的结束位置节点。
  Range.START_TO_START ：比较 sourceRange 对象的起始位置节点和原 Range 对象的起始位置节点。

sourceRange：一个与原 Range 对象比较的 Range 对象。

返回值

compare 表示一个数字：

  -1 ：原 Range 对象的比较节点在 sourceRange 对象的比较节点之前  
  0 ：原 Range 对象的比较节点在 sourceRange 对象的比较节点的相同位置   
  1 ：原 Range 对象的比较节点在 sourceRange 对象的比较节点之后

示例：

<div id="range">range</div>
<div id="sourceRange">sourceRange</div>

var range, sourceRange, compare;
range = document.createRange();
range.selectNode(document.querySelector("#rang"));
sourceRange = document.createRange();
sourceRange.selectNode(document.querySelector("#sourceRange"));
compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);

comparePoint(referenceNode,offset)

判断指定节点是在 Range 对象的之前、相同还是之后位置。

参数：

referenceNode：与 Range 对象进行比较的节点。
offset：在 referenceNode 内的偏移量。
如果 referenceNode 是文本节点、注释节点，offset 表示在该节点中字符的偏移位置。
如果 referenceNode 是元素节点，offset 表示在该节点中子元素的偏移位置。

示例：
```
<div id="range">range</div>
<div id="referenceNode">referenceNode</div>
```
```
range = document.createRange();
range.selectNode(document.querySelector("#range"));
returnValue = range.comparePoint(document.querySelector("#referenceNode"), 0);
```

createContextualFragment(tagString)

将 HTML 字符串转换为文档片段

参数：

tagString：要转换的 HTML 字符串。

示例：

var tagString = "<div>node</div>";
var range = document.createRange();
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);

deleteContents()

从 DOM 中删除选中的文档片段，不返回删除的文档片段。

参数：

无

示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.deleteContents();
```
extractContents()

从 DOM 中删除选中的文档片段，返回删除的文档片段（不保留 DOM 事件）。

参数：

无

示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.extractContents();
```

getBoundingClientRect()

返回一个 DOMRect 对象，表示整个选区的位置信息。

参数：

无

示例：

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var boundingRect = rangeObj.getBoundingClientRect();

getClientRects()

返回一个选区内所有元素调用 Element.getClientRects() 方法所得结果的列表。表示选区在屏幕上所占的区域。

参数：

无

示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var boundingRect = rangeObj.getClientRects();
```

insertNode(newNode)

在选区开始处插入一个节点。

参数：

newNode：需要插入的节点

示例：

<div id="insertNode">insertNode</div>
<div id="node">node</div>

range = document.createRange();
newNode = document.querySelector("#node");
range.selectNode(document.querySelector("#insertNode"));
range.insertNode(newNode);

intersectsNode(referenceNode)

返回一个 Boolean 值，判断指定节点和 Range 对象是否相交。

参数：

referenceNode：需要比较的节点

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.intersectsNode(referenceNode);

isPointInRange(referenceNode,offset)

返回一个 Boolean 值，判断指定节点是否在 Range 对象内。

参数：

referenceNode：指定节点
offset：在 referenceNode 内的偏移量。
如果 referenceNode 是文本节点，offset 表示在该节点中字符的偏移位置。
如果 referenceNode 是元素节点，offset 表示在该节点中子元素的偏移位置。

示例：
```
<div id="referenceNode">referenceNode</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.isPointInRange(referenceNode,0);
```

selectNode(referenceNode)

将指定节点包含在 Range 对象内。

参数：

referenceNode：指定节点

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.selectNode(referenceNode);

selectNodeContents(referenceNode)

将指定节点的内容包含在 Range 对象内。

参数：

referenceNode：指定节点

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.selectNodeContents(referenceNode);

setEnd(endNode,endOffset)

设置选区的终止位置。

参数：

endNode：终止位置所在的节点
endOffset：在 endNode 内的偏移量。
如果 endNode 是文本节点、注释节点，endOffset 表示在该节点中字符的偏移位置。
如果 endNode 是元素节点，endOffset 表示在该节点中子元素的偏移位置。

示例：
```
<div id="endNode">endNode</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var endNode = document.querySelector("#endNode");
rangeObj.setEnd(endNode,0)
```

setEndAfter(referenceNode)

设置选区的结束位置在指定节点之后。

参数：

referenceNode：指定节点

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var referenceNode = document.querySelector("#referenceNode");
rangeObj.setEndAfter(referenceNode)

setEndBefore(referenceNode)

设置选区的结束位置在指定节点之前。

参数：

referenceNode：指定节点

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var referenceNode = document.querySelector("#referenceNode");
rangeObj.setEndBefore(referenceNode)

setStart(startNode,startOffset)

设置选区的起始位置。

参数：

startNode：起始位置所在的节点
startOffset：在 startNode 内的偏移量。
如果 startNode 是文本节点、注释节点，startOffset 表示在该节点中字符的偏移位置。
如果 startNode 是元素节点，startOffset 表示在该节点中子元素的偏移位置。

示例：
```
<p>startNode</p>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
startNode = document.querySelector("#startNode");
rangeObj.setStart(startNode,0)
```

setStartAfter(referenceNode)

设置选区的起始位置在指定节点之后。

参数：

referenceNode：指定节点

示例：

<div id="startNode">startNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.setStartAfter(referenceNode)

setStartBefore(referenceNode)

设置选区的起始位置在指定节点之前。

参数：

referenceNode：指定节点

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.setStartBefore(referenceNode)

surroundContents(newParent)

把指定节点插入选区的起始位置，然后把指定节点的内容替换为选区的内容。

参数：

newParent：指定节点

示例：

<div id="newParent">newParent</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
newParent = document.querySelector("#newParent");
rangeObj.surroundContents(newParent)

toString()

返回代表当前 Range 对象的字符串，例如当前选择的文本。

参数：

无

示例：

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var rangeStr = rangeObj.toString();

选区中的多个区域

一个 Selection 对象表示用户选择的区域（Range 对象）的集合，通常它只包含一个区域，访问方式如下：

//获取一个 Selection 对象
var selObj = window.getSelection();
//获取一个 Range 对象
var rangeObj  = selObj.getRangeAt(0);

只有火狐浏览器实现了多个区域，如下图所示：

JavaScript でカーソルと選択を操作する方法について簡単に説明します。

修改选区样式

使用 ::selection 选择器可以匹配被选中的部分。
目前只有一小部分 CSS 属性可以用于 ::selection 选择器：

color
background-color
text-shadow

示例

JavaScript でカーソルと選択を操作する方法について簡単に説明します。

示例地址：https://www.kkkk1000.com/images/SelectionRange/selection.html

更多编程相关知识，请访问：编程视频！！

以上がJavaScript でカーソルと選択を操作する方法について簡単に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

JavaScript でカーソルと選択を操作する方法について簡単に説明します。

Selection オブジェクト

Selection

range

parentNode

##containsNode(aNode,aPartlyContained)

オブジェクトに含まれているかどうか (つまり、ノードが選択されているかどうか)。

参数：

示例：

deleteFromDocument()

参数：

示例：

extend(node,offset)

参数：

示例：

getRangeAt(index)

参数：

示例：

modify(alter,direction,granularity)

参数：

示例：

removeAllRanges()

参数：

示例：

removeRange(range)

参数：

示例：

selectAllChildren(parentNode)

参数：

示例：

setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

参数：

示例：

toString()

参数：

示例：

Range 对象

属性：

方法：

cloneContents()

参数：

示例：

cloneRange()

参数：

示例：

collapse(toStart)

参数：

示例：

compareBoundaryPoints(how, sourceRange)

参数：

返回值

示例：

comparePoint(referenceNode,offset)

参数：

示例：

createContextualFragment(tagString)

参数：

示例：

deleteContents()

参数：

示例：

extractContents()

参数：

示例：

getBoundingClientRect()

参数：

示例：

getClientRects()

参数：

示例：

insertNode(newNode)

参数：

示例：

intersectsNode(referenceNode)

参数：

示例：

isPointInRange(referenceNode,offset)

参数：

示例：

selectNode(referenceNode)