Range: setStart() ã¡ã½ãã
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2015å¹´7æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
Range.setStart() ã¡ã½ããã¯ã Range ã®éå§ä½ç½®ãè¨å®ãã¾ãã
startNode ã® Node ã®åã Text, Comment, CDataSection ã®ããããã§ããã¨ãã startOffset 㯠startNode ã®éå§ä½ç½®ããã®æåæ°ã§ãããã®ä»ã® Node åã®å ´åã startOffset 㯠startNode ããã®åãã¼ãæ°ã§ãã
å§ç¹ãçµç¹ããä¸ï¼ææ¸ã®ä¸å±¤å´ï¼ã«è¨å®ããã¨ãå§ç¹ã¨çµç¹ã®ä¸¡æ¹ãæå®ãããéå§ä½ç½®ã«è¨å®ãããæãããã¾ããç¯å²ã¨ãªãã¾ãã
æ§æ
setStart(startNode, startOffset)
弿°
startNodestartOffset-
startNodeã®å§ç¹ããã®Rangeã®ãªãã»ããã表ã 0 以ä¸ã®æ´æ°ã
è¿å¤
ãªã (undefined)ã
ä¾
>è¦ç´ ã®ä¸é¨ã強調表示
ãã®ä¾ã§ã¯ã Range.setStart() 㨠Range.setEnd() ã¡ã½ããã使ç¨ãã¦ã使ã®ä¸é¨ãç¯å²ã«è¿½å ãã¦ãã¾ããããã¦ã鏿ãããç¯å²ã¯ Range.surroundContents() ã使ç¨ãã¦å¼·èª¿è¡¨ç¤ºãã¾ãã
使ã¯ã 5 ã¤ã®ããã¹ããã¼ãã¨ã 4 ã¤ã® <br> è¦ç´ ã®åè¨ 9 ã¤ã®ãã¼ããå«ãã§ãã¾ãã
HTML
<p id="address">
Wyatt Earp<br />
101 E. Main St.<br />
Dodge City, KS<br />
67801<br />
USA
</p>
<hr />
<p>Nodes in the original address:</p>
<ol id="log"></ol>
JavaScript
const address = document.getElementById("address");
const log = document.getElementById("log");
// Log info
address.childNodes.forEach((node) => {
const li = document.createElement("li");
li.textContent = `${node.nodeName}, ${node.nodeValue}`;
log.appendChild(li);
});
// Highlight the street and city
const startOffset = 2; // Start at third node: 101 E. Main St.
const endOffset = 5; // End at fifth node: Dodge City, KS
const range = document.createRange();
range.setStart(address, startOffset);
range.setEnd(address, endOffset);
const mark = document.createElement("mark");
range.surroundContents(mark);
çµæ
ããã¹ããã¼ãããæåãåå¾ãã
ãã®ä¾ã§ã¯ãRange.setStart() 㨠Range.setEnd() ã¡ã½ããã使ç¨ãã¦ãç¯å²ã®å
容ãå®ç¾©ãã¦ãã¾ããçµæã¨ãã¦å¾ãããç¯å²ã¯ãããã¹ããã¼ãå
ã® 1 æåç®ãã 5 æåç®ãå«ãã§ãã¾ãã
HTML
<p id="content">0123456789</p>
<p id="log"></p>
JavaScript
const element = document.getElementById("content");
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0); // Start at first character
range.setEnd(textNode, 5); // End at fifth character
document.getElementById("log").textContent = range;
çµæ
仿§æ¸
| 仿§æ¸ |
|---|
| DOM > # dom-range-setstart > |