Chọn các phần tử thường có hai giá trị mà bạn muốn truy cập. Đầu tiên, có giá trị được gửi đến máy chủ, điều này thật dễ dàng
1
2
$( "#myselect" ).val();
// => 1
Thứ hai là giá trị văn bản của lựa chọn. Ví dụ: sử dụng hộp chọn sau
1
2
3
4
5
6
7
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Nếu bạn muốn lấy chuỗi "Mr" nếu tùy chọn đầu tiên được chọn (thay vì chỉ "1") bạn sẽ thực hiện theo cách sau
Trong chương này, chúng ta sẽ đề cập đến lựa chọn trong tài liệu, cũng như lựa chọn trong các trường biểu mẫu, chẳng hạn như <p id="p">Example: <i>italic</i> and <b>bold</b></p>0
JavaScript có thể truy cập một lựa chọn hiện có, chọn/bỏ chọn toàn bộ hoặc một phần các nút DOM, xóa nội dung đã chọn khỏi tài liệu, gói nội dung đó vào một thẻ, v.v.
Bạn có thể tìm thấy một số công thức cho các nhiệm vụ phổ biến ở cuối chương, trong phần “Tóm tắt”. Có thể điều đó đáp ứng nhu cầu hiện tại của bạn, nhưng bạn sẽ nhận được nhiều hơn thế nếu bạn đọc toàn bộ văn bản
Các đối tượng <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 và <p id="p">Example: <i>italic</i> and <b>bold</b></p>2 cơ bản rất dễ nắm bắt và sau đó bạn sẽ không cần công thức để khiến chúng làm những gì bạn muốn
Khái niệm cơ bản của lựa chọn là, đó thực chất là một cặp “điểm biên”. phạm vi bắt đầu và phạm vi kết thúc
Một đối tượng <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 được tạo không có tham số
let range = new Range();
Sau đó, chúng ta có thể đặt ranh giới lựa chọn bằng cách sử dụng <p id="p">Example: <i>italic</i> and <b>bold</b></p>4 và <p id="p">Example: <i>italic</i> and <b>bold</b></p>5
Như bạn có thể đoán, hơn nữa chúng ta sẽ sử dụng các đối tượng <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 để lựa chọn, nhưng trước tiên hãy tạo một vài đối tượng như vậy
Điều thú vị là đối số đầu tiên <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 trong cả hai phương thức có thể là nút văn bản hoặc nút phần tử và ý nghĩa của đối số thứ hai phụ thuộc vào điều đó
Nếu <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 là một nút văn bản, thì <p id="p">Example: <i>italic</i> and <b>bold</b></p>9 phải là vị trí trong văn bản của nó
Ví dụ, với phần tử <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>0, chúng ta có thể tạo dãy chứa các chữ cái “ll” như sau
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>
Ở đây, chúng tôi chọn con đầu tiên của <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1 (đó là nút văn bản) và chỉ định vị trí văn bản bên trong nó
Ngoài ra, nếu <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 là một nút phần tử, thì <p id="p">Example: <i>italic</i> and <b>bold</b></p>9 phải là số con
Điều đó rất hữu ích để tạo các phạm vi chứa toàn bộ các nút, không dừng ở đâu đó bên trong văn bản của chúng
Ví dụ: chúng tôi có một đoạn tài liệu phức tạp hơn
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
Đây là cấu trúc DOM của nó với cả nút phần tử và nút văn bản
Hãy tạo một phạm vi cho <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>4
Như chúng ta có thể thấy, cụm từ này bao gồm chính xác hai con của <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1, với các chỉ số là <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>6 và <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>7
Điểm bắt đầu có <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1 là cha mẹ <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 và <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>6 là phần bù
Vì vậy, chúng tôi có thể đặt nó là <p id="p">Example: <i>italic</i> and <b>bold</b></p> From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4> <button id="button">Click to select</button> <script> button. title = () => { let range = new Range(); range.setStart(p, start.value); range.setEnd(p, end.value); // apply the selection, explained later below document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }; </script>1
Điểm kết thúc cũng có <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1 là gốc <p id="p">Example: <i>italic</i> and <b>bold</b></p>7, nhưng <p id="p">Example: <i>italic</i> and <b>bold</b></p> From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4> <button id="button">Click to select</button> <script> button. title = () => { let range = new Range(); range.setStart(p, start.value); range.setEnd(p, end.value); // apply the selection, explained later below document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }; </script>4 là phần bù (nó chỉ định phạm vi lên tới, nhưng không bao gồm <p id="p">Example: <i>italic</i> and <b>bold</b></p>9)
Vì vậy, chúng tôi có thể đặt nó là <p id="p">Example: <i>italic</i> and <b>bold</b></p> From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4> <button id="button">Click to select</button> <script> button. title = () => { let range = new Range(); range.setStart(p, start.value); range.setEnd(p, end.value); // apply the selection, explained later below document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }; </script>6
Đây là bản demo. Nếu bạn chạy nó, bạn có thể thấy văn bản được chọn
<p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>
Đây là một giá thử nghiệm linh hoạt hơn, nơi bạn có thể đặt số bắt đầu/kết thúc phạm vi và khám phá các biến thể khác
<p id="p">Example: <i>italic</i> and <b>bold</b></p> From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4> <button id="button">Click to select</button> <script> button. title = () => { let range = new Range(); range.setStart(p, start.value); range.setEnd(p, end.value); // apply the selection, explained later below document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }; </script>
E. g. chọn trong cùng một <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1 từ offset <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>7 đến <p id="p">Example: <i>italic</i> and <b>bold</b></p> From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4> <button id="button">Click to select</button> <script> button. title = () => { let range = new Range(); range.setStart(p, start.value); range.setEnd(p, end.value); // apply the selection, explained later below document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }; </script>9 cho chúng ta phạm vi <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>0
Các nút bắt đầu và kết thúc có thể khác nhau
Chúng tôi không phải sử dụng cùng một nút trong <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>1 và <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>2. Một phạm vi có thể trải rộng trên nhiều nút không liên quan. Điều quan trọng duy nhất là kết thúc sau phần bắt đầu trong tài liệu
Hãy tạo một vùng chọn lớn hơn trong ví dụ của chúng ta, như thế này
Chúng tôi đã biết làm thế nào để làm điều đó. Chúng ta chỉ cần đặt phần đầu và phần cuối làm phần bù tương đối trong các nút văn bản
Chúng ta cần phải tạo ra một phạm vi, mà
- bắt đầu từ vị trí thứ 2 trong <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1 con đầu lòng (lấy tất cả trừ hai chữ cái đầu của "Ví dụ. ")
- kết thúc ở vị trí thứ 3 trong <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>4 con đầu lòng (lấy ba chữ cái đầu tiên của chữ “đậm”, nhưng không nhiều hơn)
<p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>
Như bạn có thể thấy, khá dễ dàng để tạo ra một loạt bất cứ thứ gì chúng ta muốn
Nếu chúng tôi muốn lấy toàn bộ các nút, chúng tôi có thể chuyển các phần tử trong <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>5. Nếu không, chúng ta có thể làm việc ở cấp độ văn bản
Đối tượng phạm vi mà chúng tôi đã tạo trong ví dụ trên có các thuộc tính sau
- <p id="p">Example: <i>italic</i> and <b>bold</b></p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
console.log(range); // ample: italic and bol
// use this range for selection (explained later)
window.getSelection().addRange(range);
</script>6, <p id="p">Example: <i>italic</i> and <b>bold</b></p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
console.log(range); // ample: italic and bol
// use this range for selection (explained later)
window.getSelection().addRange(range);
</script>7 – nút và phần bù của điểm bắt đầu,
- trong ví dụ trên. nút văn bản đầu tiên bên trong <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1 và <p id="p">Example: <i>italic</i> and <b>bold</b></p> From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4> <button id="button">Click to select</button> <script> button. title = () => { let range = new Range(); range.setStart(p, start.value); range.setEnd(p, end.value); // apply the selection, explained later below document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }; </script>4
- Click buttons to run methods on the selection, "resetExample" to reset it.
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<p id="result"></p>
<script>
let range = new Range();
// Each demonstrated method is represented here:
let methods = {
deleteContents() {
range.deleteContents()
},
extractContents() {
let content = range.extractContents();
result.innerHTML = "";
result.append("extracted: ", content);
},
cloneContents() {
let content = range.cloneContents();
result.innerHTML = "";
result.append("cloned: ", content);
},
insertNode() {
let newNode = document.createElement('u');
newNode.innerHTML = "NEW NODE";
range.insertNode(newNode);
},
surroundContents() {
let newNode = document.createElement('u');
try {
range.surroundContents(newNode);
} catch(e) { console.log(e) }
},
resetExample() {
p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
result.innerHTML = "";
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
};
for(let method in methods) {
document.write(`<div><button title="methods.${method}()">${method}</button></div>`);
}
methods.resetExample();
</script>0, Click buttons to run methods on the selection, "resetExample" to reset it.
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<p id="result"></p>
<script>
let range = new Range();
// Each demonstrated method is represented here:
let methods = {
deleteContents() {
range.deleteContents()
},
extractContents() {
let content = range.extractContents();
result.innerHTML = "";
result.append("extracted: ", content);
},
cloneContents() {
let content = range.cloneContents();
result.innerHTML = "";
result.append("cloned: ", content);
},
insertNode() {
let newNode = document.createElement('u');
newNode.innerHTML = "NEW NODE";
range.insertNode(newNode);
},
surroundContents() {
let newNode = document.createElement('u');
try {
range.surroundContents(newNode);
} catch(e) { console.log(e) }
},
resetExample() {
p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
result.innerHTML = "";
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
};
for(let method in methods) {
document.write(`<div><button title="methods.${method}()">${method}</button></div>`);
}
methods.resetExample();
</script>1 – nút và phần bù của phần cuối,
- trong ví dụ trên. nút văn bản đầu tiên bên trong <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>4 và Click buttons to run methods on the selection, "resetExample" to reset it. <p id="p">Example: <i>italic</i> and <b>bold</b></p> <p id="result"></p> <script> let range = new Range(); // Each demonstrated method is represented here: let methods = { deleteContents() { range.deleteContents() }, extractContents() { let content = range.extractContents(); result.innerHTML = ""; result.append("extracted: ", content); }, cloneContents() { let content = range.cloneContents(); result.innerHTML = ""; result.append("cloned: ", content); }, insertNode() { let newNode = document.createElement('u'); newNode.innerHTML = "NEW NODE"; range.insertNode(newNode); }, surroundContents() { let newNode = document.createElement('u'); try { range.surroundContents(newNode); } catch(e) { console.log(e) } }, resetExample() { p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`; result.innerHTML = ""; range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } }; for(let method in methods) { document.write(`<div><button title="methods.${method}()">${method}</button></div>`); } methods.resetExample(); </script>3
- Click buttons to run methods on the selection, "resetExample" to reset it.
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<p id="result"></p>
<script>
let range = new Range();
// Each demonstrated method is represented here:
let methods = {
deleteContents() {
range.deleteContents()
},
extractContents() {
let content = range.extractContents();
result.innerHTML = "";
result.append("extracted: ", content);
},
cloneContents() {
let content = range.cloneContents();
result.innerHTML = "";
result.append("cloned: ", content);
},
insertNode() {
let newNode = document.createElement('u');
newNode.innerHTML = "NEW NODE";
range.insertNode(newNode);
},
surroundContents() {
let newNode = document.createElement('u');
try {
range.surroundContents(newNode);
} catch(e) { console.log(e) }
},
resetExample() {
p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
result.innerHTML = "";
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
};
for(let method in methods) {
document.write(`<div><button title="methods.${method}()">${method}</button></div>`);
}
methods.resetExample();
</script>4 – boolean, Click buttons to run methods on the selection, "resetExample" to reset it.
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<p id="result"></p>
<script>
let range = new Range();
// Each demonstrated method is represented here:
let methods = {
deleteContents() {
range.deleteContents()
},
extractContents() {
let content = range.extractContents();
result.innerHTML = "";
result.append("extracted: ", content);
},
cloneContents() {
let content = range.cloneContents();
result.innerHTML = "";
result.append("cloned: ", content);
},
insertNode() {
let newNode = document.createElement('u');
newNode.innerHTML = "NEW NODE";
range.insertNode(newNode);
},
surroundContents() {
let newNode = document.createElement('u');
try {
range.surroundContents(newNode);
} catch(e) { console.log(e) }
},
resetExample() {
p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
result.innerHTML = "";
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
};
for(let method in methods) {
document.write(`<div><button title="methods.${method}()">${method}</button></div>`);
}
methods.resetExample();
</script>5 nếu phạm vi bắt đầu và kết thúc tại cùng một điểm (vì vậy không có nội dung bên trong phạm vi),
- trong ví dụ trên. Click buttons to run methods on the selection, "resetExample" to reset it. <p id="p">Example: <i>italic</i> and <b>bold</b></p> <p id="result"></p> <script> let range = new Range(); // Each demonstrated method is represented here: let methods = { deleteContents() { range.deleteContents() }, extractContents() { let content = range.extractContents(); result.innerHTML = ""; result.append("extracted: ", content); }, cloneContents() { let content = range.cloneContents(); result.innerHTML = ""; result.append("cloned: ", content); }, insertNode() { let newNode = document.createElement('u'); newNode.innerHTML = "NEW NODE"; range.insertNode(newNode); }, surroundContents() { let newNode = document.createElement('u'); try { range.surroundContents(newNode); } catch(e) { console.log(e) } }, resetExample() { p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`; result.innerHTML = ""; range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } }; for(let method in methods) { document.write(`<div><button title="methods.${method}()">${method}</button></div>`); } methods.resetExample(); </script>6
- Click buttons to run methods on the selection, "resetExample" to reset it.
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<p id="result"></p>
<script>
let range = new Range();
// Each demonstrated method is represented here:
let methods = {
deleteContents() {
range.deleteContents()
},
extractContents() {
let content = range.extractContents();
result.innerHTML = "";
result.append("extracted: ", content);
},
cloneContents() {
let content = range.cloneContents();
result.innerHTML = "";
result.append("cloned: ", content);
},
insertNode() {
let newNode = document.createElement('u');
newNode.innerHTML = "NEW NODE";
range.insertNode(newNode);
},
surroundContents() {
let newNode = document.createElement('u');
try {
range.surroundContents(newNode);
} catch(e) { console.log(e) }
},
resetExample() {
p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
result.innerHTML = "";
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
};
for(let method in methods) {
document.write(`<div><button title="methods.${method}()">${method}</button></div>`);
}
methods.resetExample();
</script>7 – tổ tiên chung gần nhất của tất cả các nút trong phạm vi,
- trong ví dụ trên. <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1
Có nhiều phương pháp thuận tiện để thao tác phạm vi
Chúng ta đã thấy <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>1 và <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>2, đây là những phương pháp tương tự khác
Đặt phạm vi bắt đầu
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> From <input id="from" disabled> – To <input id="to" disabled> <script> document.onselectionchange = function() { let selection = document.getSelection(); let {anchorNode, anchorOffset, focusNode, focusOffset} = selection; // anchorNode and focusNode are text nodes usually from.value = `${anchorNode?.data}, offset ${anchorOffset}`; to.value = `${focusNode?.data}, offset ${focusOffset}`; }; </script>1 bắt đầu lúc. vị trí <p id="p">Example: <i>italic</i> and <b>bold</b></p>9 trong <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> From <input id="from" disabled> – To <input id="to" disabled> <script> document.onselectionchange = function() { let selection = document.getSelection(); let {anchorNode, anchorOffset, focusNode, focusOffset} = selection; // anchorNode and focusNode are text nodes usually from.value = `${anchorNode?.data}, offset ${anchorOffset}`; to.value = `${focusNode?.data}, offset ${focusOffset}`; }; </script>4 bắt đầu lúc. ngay trước <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> From <input id="from" disabled> – To <input id="to" disabled> <script> document.onselectionchange = function() { let selection = document.getSelection(); let {anchorNode, anchorOffset, focusNode, focusOffset} = selection; // anchorNode and focusNode are text nodes usually from.value = `${anchorNode?.data}, offset ${anchorOffset}`; to.value = `${focusNode?.data}, offset ${focusOffset}`; }; </script>6 bắt đầu lúc. ngay sau khi <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
Đặt phạm vi kết thúc (phương pháp tương tự)
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> From <input id="from" disabled> – To <input id="to" disabled> <script> document.onselectionchange = function() { let selection = document.getSelection(); let {anchorNode, anchorOffset, focusNode, focusOffset} = selection; // anchorNode and focusNode are text nodes usually from.value = `${anchorNode?.data}, offset ${anchorOffset}`; to.value = `${focusNode?.data}, offset ${focusOffset}`; }; </script>8 đặt kết thúc tại. vị trí <p id="p">Example: <i>italic</i> and <b>bold</b></p>9 trong <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> Cloned: <span id="cloned"></span> <br> As text: <span id="astext"></span> <script> document.onselectionchange = function() { let selection = document.getSelection(); cloned.innerHTML = astext.innerHTML = ""; // Clone DOM nodes from ranges (we support multiselect here) for (let i = 0; i < selection.rangeCount; i++) { cloned.append(selection.getRangeAt(i).cloneContents()); } // Get as text astext.innerHTML += selection; }; </script>1 kết thúc tại. ngay trước <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> Cloned: <span id="cloned"></span> <br> As text: <span id="astext"></span> <script> document.onselectionchange = function() { let selection = document.getSelection(); cloned.innerHTML = astext.innerHTML = ""; // Clone DOM nodes from ranges (we support multiselect here) for (let i = 0; i < selection.rangeCount; i++) { cloned.append(selection.getRangeAt(i).cloneContents()); } // Get as text astext.innerHTML += selection; }; </script>3 kết thúc tại. ngay sau khi <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
Về mặt kỹ thuật, <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); console.log(range); // ample: italic and bol // use this range for selection (explained later) window.getSelection().addRange(range); </script>5 có thể làm bất cứ điều gì, nhưng nhiều phương pháp hơn sẽ mang lại nhiều tiện lợi hơn
Trong tất cả các phương thức này, <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 có thể vừa là nút văn bản hoặc nút phần tử. đối với các nút văn bản <p id="p">Example: <i>italic</i> and <b>bold</b></p>9 bỏ qua nhiều ký tự đó, trong khi đối với các nút phần tử có nhiều nút con
Thậm chí nhiều phương pháp hơn để tạo phạm vi
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> Cloned: <span id="cloned"></span> <br> As text: <span id="astext"></span> <script> document.onselectionchange = function() { let selection = document.getSelection(); cloned.innerHTML = astext.innerHTML = ""; // Clone DOM nodes from ranges (we support multiselect here) for (let i = 0; i < selection.rangeCount; i++) { cloned.append(selection.getRangeAt(i).cloneContents()); } // Get as text astext.innerHTML += selection; }; </script>8 thiết lập phạm vi để chọn toàn bộ <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
- Phạm vi thiết lập <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>0 để chọn toàn bộ nội dung của <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>2 nếu <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>3 đặt kết thúc=bắt đầu, nếu không thì đặt bắt đầu=kết thúc, do đó thu gọn phạm vi
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>4 tạo một phạm vi mới có cùng điểm bắt đầu/kết thúc
Khi phạm vi được tạo, chúng ta có thể thao tác nội dung của nó bằng các phương thức này
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>5 – xóa nội dung phạm vi khỏi tài liệu
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>6 – xóa nội dung phạm vi khỏi tài liệu và trả về dưới dạng
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>7 – sao chép nội dung phạm vi và trả về dưới dạng
- <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>8 – chèn <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 vào tài liệu ở đầu phạm vi
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>00 – quấn <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 xung quanh nội dung phạm vi. Để điều này hoạt động, phạm vi phải chứa cả thẻ mở và thẻ đóng cho tất cả các phần tử bên trong nó. không có phạm vi một phần như <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>02
Với những phương pháp này, về cơ bản chúng ta có thể làm bất cứ điều gì với các nút đã chọn
Đây là giá đỡ thử nghiệm để xem chúng hoạt động
Click buttons to run methods on the selection, "resetExample" to reset it. <p id="p">Example: <i>italic</i> and <b>bold</b></p> <p id="result"></p> <script> let range = new Range(); // Each demonstrated method is represented here: let methods = { deleteContents() { range.deleteContents() }, extractContents() { let content = range.extractContents(); result.innerHTML = ""; result.append("extracted: ", content); }, cloneContents() { let content = range.cloneContents(); result.innerHTML = ""; result.append("cloned: ", content); }, insertNode() { let newNode = document.createElement('u'); newNode.innerHTML = "NEW NODE"; range.insertNode(newNode); }, surroundContents() { let newNode = document.createElement('u'); try { range.surroundContents(newNode); } catch(e) { console.log(e) } }, resetExample() { p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`; result.innerHTML = ""; range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } }; for(let method in methods) { document.write(`<div><button title="methods.${method}()">${method}</button></div>`); } methods.resetExample(); </script>
Cũng tồn tại các phương pháp để so sánh các phạm vi, nhưng chúng hiếm khi được sử dụng. Khi bạn cần chúng, vui lòng tham khảo hướng dẫn hoặc MDN
<p id="p">Example: <i>italic</i> and <b>bold</b></p>1 là một đối tượng chung để quản lý phạm vi lựa chọn. Mặc dù, việc tạo một <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 không có nghĩa là chúng ta thấy một lựa chọn trên màn hình
Chúng tôi có thể tạo <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 đối tượng, chuyển chúng xung quanh – chúng không tự mình chọn bất cứ thứ gì một cách trực quan
Việc lựa chọn tài liệu được đại diện bởi đối tượng <p id="p">Example: <i>italic</i> and <b>bold</b></p>2, có thể được lấy dưới dạng <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>07 hoặc <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>08. Một lựa chọn có thể bao gồm 0 hoặc nhiều phạm vi. Ít nhất, đặc tả API Lựa chọn nói như vậy. Tuy nhiên, trên thực tế, chỉ Firefox mới cho phép chọn nhiều phạm vi trong tài liệu bằng cách sử dụng Ctrl + click (Cmd +< . click for Mac).
Đây là ảnh chụp màn hình của vùng chọn có 3 phạm vi, được tạo trên Firefox
Các trình duyệt khác hỗ trợ tối đa 1 phạm vi. Như chúng ta sẽ thấy, một số phương pháp <p id="p">Example: <i>italic</i> and <b>bold</b></p>2 ngụ ý rằng có thể có nhiều phạm vi, nhưng một lần nữa, trong tất cả các trình duyệt ngoại trừ Firefox, chỉ có tối đa 1 phạm vi.
Đây là một bản trình diễn nhỏ hiển thị lựa chọn hiện tại (chọn thứ gì đó và nhấp) dưới dạng văn bản
cảnh báo (tài liệu. getSelection())
Như đã nói, về lý thuyết, một vùng chọn có thể chứa nhiều phạm vi. Chúng ta có thể lấy các đối tượng phạm vi này bằng phương thức
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>10 – lấy phạm vi thứ i, bắt đầu từ <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>6. Trong tất cả các trình duyệt ngoại trừ Firefox, chỉ có <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>6 được sử dụng
Ngoài ra, tồn tại các thuộc tính thường mang lại sự thuận tiện tốt hơn
Tương tự như một phạm vi, một đối tượng lựa chọn có phần đầu, được gọi là "neo" và phần cuối, được gọi là "tiêu điểm"
Các thuộc tính lựa chọn chính là
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>13 – nút bắt đầu lựa chọn,
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>14 – phần bù trong <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>13 nơi bắt đầu lựa chọn,
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>16 – nút nơi lựa chọn kết thúc,
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>17 – phần bù trong <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>16 khi lựa chọn kết thúc,
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>19 – Click buttons to run methods on the selection, "resetExample" to reset it. <p id="p">Example: <i>italic</i> and <b>bold</b></p> <p id="result"></p> <script> let range = new Range(); // Each demonstrated method is represented here: let methods = { deleteContents() { range.deleteContents() }, extractContents() { let content = range.extractContents(); result.innerHTML = ""; result.append("extracted: ", content); }, cloneContents() { let content = range.cloneContents(); result.innerHTML = ""; result.append("cloned: ", content); }, insertNode() { let newNode = document.createElement('u'); newNode.innerHTML = "NEW NODE"; range.insertNode(newNode); }, surroundContents() { let newNode = document.createElement('u'); try { range.surroundContents(newNode); } catch(e) { console.log(e) } }, resetExample() { p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`; result.innerHTML = ""; range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } }; for(let method in methods) { document.write(`<div><button title="methods.${method}()">${method}</button></div>`); } methods.resetExample(); </script>5 nếu lựa chọn không chọn gì (phạm vi trống) hoặc không tồn tại
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>21 – số phạm vi trong lựa chọn, tối đa <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>7 trong tất cả các trình duyệt ngoại trừ Firefox
Lựa chọn kết thúc/bắt đầu so với Phạm vi
Có một sự khác biệt quan trọng của điểm neo/tiêu điểm lựa chọn so với điểm bắt đầu/kết thúc của <p id="p">Example: <i>italic</i> and <b>bold</b></p>1
Như chúng ta đã biết, <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 đối tượng luôn bắt đầu trước khi kết thúc
Đối với các lựa chọn, không phải lúc nào cũng vậy
Chọn thứ gì đó bằng chuột có thể được thực hiện theo cả hai hướng. “từ trái sang phải” hoặc “từ phải sang trái”
Nói cách khác, khi nút chuột được nhấn và sau đó nó di chuyển về phía trước trong tài liệu, thì điểm kết thúc (tiêu điểm) của nó sẽ ở sau điểm bắt đầu (điểm neo)
E. g. nếu người dùng bắt đầu chọn bằng chuột và chuyển từ “Ví dụ” sang “in nghiêng”
…Nhưng cùng một lựa chọn có thể được thực hiện ngược lại. bắt đầu từ “in nghiêng” đến “Ví dụ” (hướng ngược), sau đó phần cuối của nó (tiêu điểm) sẽ ở trước phần bắt đầu (neo)
Có các sự kiện để theo dõi lựa chọn
- <p id="p">Hello</p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.firstChild, 4);
// toString of a range returns its content as text
console.log(range); // ll
</script>25 – khi một lựa chọn bắt đầu cụ thể trên phần tử <p id="p">Hello</p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.firstChild, 4);
// toString of a range returns its content as text
console.log(range); // ll
</script>26 (hoặc bên trong nó). Chẳng hạn, khi người dùng nhấn nút chuột vào nó và bắt đầu di chuyển con trỏ
- Ngăn chặn hành động mặc định hủy bỏ lựa chọn bắt đầu. Vì vậy, bắt đầu lựa chọn từ phần tử này trở nên không thể, nhưng phần tử vẫn có thể chọn được. Khách truy cập chỉ cần bắt đầu lựa chọn từ nơi khác
- <p id="p">Hello</p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.firstChild, 4);
// toString of a range returns its content as text
console.log(range); // ll
</script>27 – bất cứ khi nào lựa chọn thay đổi hoặc bắt đầu
- Xin lưu ý. trình xử lý này chỉ có thể được đặt trên <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>28, nó theo dõi tất cả các lựa chọn trong đó
Đây là một bản demo nhỏ. Nó theo dõi lựa chọn hiện tại trên <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>28 và hiển thị ranh giới của nó
<p id="p">Select me: <i>italic</i> and <b>bold</b></p> From <input id="from" disabled> – To <input id="to" disabled> <script> document.onselectionchange = function() { let selection = document.getSelection(); let {anchorNode, anchorOffset, focusNode, focusOffset} = selection; // anchorNode and focusNode are text nodes usually from.value = `${anchorNode?.data}, offset ${anchorOffset}`; to.value = `${focusNode?.data}, offset ${focusOffset}`; }; </script>
Có hai cách để sao chép nội dung đã chọn
- Chúng ta có thể sử dụng <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>30 để lấy nó dưới dạng văn bản
- Mặt khác, để sao chép toàn bộ DOM, e. g. nếu chúng ta cần tiếp tục định dạng, chúng ta có thể lấy các phạm vi cơ bản với <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>31. Ngược lại, một đối tượng <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 có phương thức <p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>7 sao chép nội dung của nó và trả về dưới dạng đối tượng <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>34, mà chúng ta có thể chèn vào nơi khác
Đây là bản demo sao chép nội dung đã chọn dưới dạng văn bản và dưới dạng các nút DOM
<p id="p">Select me: <i>italic</i> and <b>bold</b></p> Cloned: <span id="cloned"></span> <br> As text: <span id="astext"></span> <script> document.onselectionchange = function() { let selection = document.getSelection(); cloned.innerHTML = astext.innerHTML = ""; // Clone DOM nodes from ranges (we support multiselect here) for (let i = 0; i < selection.rangeCount; i++) { cloned.append(selection.getRangeAt(i).cloneContents()); } // Get as text astext.innerHTML += selection; }; </script>
Chúng ta có thể làm việc với vùng chọn bằng cách thêm/xóa phạm vi
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>10 – lấy phạm vi thứ i, bắt đầu từ <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>6. Trong tất cả các trình duyệt ngoại trừ Firefox, chỉ có <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>6 được sử dụng
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>38 – thêm <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>39 vào lựa chọn. Tất cả các trình duyệt ngoại trừ Firefox bỏ qua cuộc gọi, nếu lựa chọn đã có một phạm vi liên quan
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>40 – loại bỏ <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>39 khỏi vùng chọn
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>42 – xóa tất cả các phạm vi
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>43 – bí danh của <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>44
Ngoài ra còn có các phương pháp thuận tiện để thao tác trực tiếp phạm vi lựa chọn mà không cần gọi ____2_______1 trung gian
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>46 – thay thế phạm vi đã chọn bằng một phạm vi mới bắt đầu và kết thúc tại <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 đã cho, tại vị trí <p id="p">Example: <i>italic</i> and <b>bold</b></p>9
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>49 – bí danh của <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>50
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>51 – thu gọn (thay thế bằng một phạm vi trống) để bắt đầu lựa chọn,
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>52 – thu gọn đến cuối lựa chọn,
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>53 – di chuyển tiêu điểm của vùng chọn đến <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 đã cho, vị trí <p id="p">Example: <i>italic</i> and <b>bold</b></p>9,
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>56 – thay thế phạm vi lựa chọn bằng bắt đầu đã cho <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>57 và kết thúc <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>58. Tất cả nội dung ở giữa chúng được chọn
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>59 – chọn tất cả con của <p id="p">Example: <i>italic</i> and <b>bold</b></p>7
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>61 – xóa nội dung đã chọn khỏi tài liệu
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>62 – kiểm tra xem lựa chọn có chứa <p id="p">Example: <i>italic</i> and <b>bold</b></p>7 hay không (một phần nếu đối số thứ hai là Click buttons to run methods on the selection, "resetExample" to reset it. <p id="p">Example: <i>italic</i> and <b>bold</b></p> <p id="result"></p> <script> let range = new Range(); // Each demonstrated method is represented here: let methods = { deleteContents() { range.deleteContents() }, extractContents() { let content = range.extractContents(); result.innerHTML = ""; result.append("extracted: ", content); }, cloneContents() { let content = range.cloneContents(); result.innerHTML = ""; result.append("cloned: ", content); }, insertNode() { let newNode = document.createElement('u'); newNode.innerHTML = "NEW NODE"; range.insertNode(newNode); }, surroundContents() { let newNode = document.createElement('u'); try { range.surroundContents(newNode); } catch(e) { console.log(e) } }, resetExample() { p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`; result.innerHTML = ""; range.setStart(p.firstChild, 2); range.setEnd(p.querySelector('b').firstChild, 3); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } }; for(let method in methods) { document.write(`<div><button title="methods.${method}()">${method}</button></div>`); } methods.resetExample(); </script>5)
Đối với hầu hết các tác vụ, các phương thức này đều ổn, không cần truy cập đối tượng <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 bên dưới
Ví dụ, chọn toàn bộ nội dung của đoạn văn <p id="p">Example: <i>italic</i> and <b>bold</b></p> <script> let range = new Range(); range.setStart(p, 0); range.setEnd(p, 2); // toString of a range returns its content as text, without tags console.log(range); // Example: italic // apply this range for document selection (explained later below) document.getSelection().addRange(range); </script>1
<p id="p">Select me: <i>italic</i> and <b>bold</b></p> <script> // select from 0th child of <p> to the last child document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length); </script>
Điều tương tự khi sử dụng phạm vi
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>0
Để chọn thứ gì đó, trước tiên hãy xóa lựa chọn hiện có
Nếu một lựa chọn tài liệu đã tồn tại, hãy làm trống nó trước với <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>42. Và sau đó thêm phạm vi. Mặt khác, tất cả các trình duyệt ngoại trừ Firefox đều bỏ qua các phạm vi mới
Ngoại lệ là một số phương pháp lựa chọn, thay thế lựa chọn hiện có, chẳng hạn như <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>68
Các phần tử biểu mẫu, chẳng hạn như <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>69 và <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>70 cung cấp , không có đối tượng <p id="p">Example: <i>italic</i> and <b>bold</b></p>2 hoặc <p id="p">Example: <i>italic</i> and <b>bold</b></p>1. Vì giá trị đầu vào là một văn bản thuần túy, không phải HTML, nên không cần các đối tượng như vậy, mọi thứ đơn giản hơn nhiều
Của cải
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>73 – vị trí bắt đầu lựa chọn (có thể ghi),
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>74 – vị trí kết thúc lựa chọn (có thể ghi),
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>75 – hướng lựa chọn, một trong. “tiến”, “lùi” hoặc “không” (nếu e. g. được chọn bằng cách nhấp đúp chuột),
Sự kiện
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>76 – kích hoạt khi thứ gì đó được chọn
phương pháp
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>77 – chọn mọi thứ trong điều khiển văn bản (có thể là <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>70 thay vì <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>69),
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>80 – thay đổi lựa chọn để kéo dài từ vị trí <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>81 đến <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>82, theo hướng đã cho (tùy chọn)
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>83 – thay thế một dãy văn bản bằng văn bản mới
Các đối số tùy chọn <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>81 và <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>82, nếu được cung cấp, hãy đặt phạm vi bắt đầu và kết thúc, nếu không thì lựa chọn của người dùng sẽ được sử dụng
Đối số cuối cùng, <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>86, xác định cách thiết lập lựa chọn sau khi văn bản được thay thế. Các giá trị có thể là
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>87 – văn bản mới chèn sẽ được chọn
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>88 – phạm vi lựa chọn thu gọn ngay trước văn bản được chèn (con trỏ sẽ ở ngay phía trước nó)
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>89 – phạm vi lựa chọn thu gọn ngay sau văn bản được chèn (con trỏ sẽ ở ngay sau nó)
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>90 – cố gắng duy trì lựa chọn. Đây là mặc định
Bây giờ hãy xem các phương pháp này hoạt động
Ví dụ: mã này sử dụng sự kiện <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>91 để theo dõi lựa chọn
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>1
Xin lưu ý
- <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>91 kích hoạt khi thứ gì đó được chọn, nhưng không kích hoạt khi lựa chọn bị xóa
- Sự kiện <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>27 không được kích hoạt cho các lựa chọn bên trong điều khiển biểu mẫu, theo , vì nó không liên quan đến lựa chọn và phạm vi của <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>28. Một số trình duyệt tạo ra nó, nhưng chúng ta không nên dựa vào nó
Chúng ta có thể thay đổi <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>95 và <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>96, điều này đặt vùng chọn
Một trường hợp cạnh quan trọng là khi <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>95 và <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>96 bằng nhau. Sau đó, nó chính xác là vị trí con trỏ. Hoặc, để viết lại, khi không có gì được chọn, lựa chọn được thu gọn tại vị trí con trỏ
Vì vậy, bằng cách đặt <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>95 và <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>96 thành cùng một giá trị, chúng tôi di chuyển con trỏ
Ví dụ
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>2
Để sửa đổi nội dung của vùng chọn ta có thể sử dụng phương thức <p id="p">Example: <i>italic</i> and <b>bold</b></p>01. Tất nhiên, chúng ta có thể đọc <p id="p">Example: <i>italic</i> and <b>bold</b></p>02 và, với kiến thức về lựa chọn, thay đổi chuỗi con tương ứng của <p id="p">Example: <i>italic</i> and <b>bold</b></p>03, nhưng <p id="p">Example: <i>italic</i> and <b>bold</b></p>04 mạnh hơn và thường thuận tiện hơn
Đó là một phương pháp hơi phức tạp. Ở dạng một đối số đơn giản nhất, nó thay thế phạm vi người dùng đã chọn và xóa lựa chọn
Ví dụ: ở đây, lựa chọn của người dùng sẽ được bao bọc bởi <p id="p">Example: <i>italic</i> and <b>bold</b></p>05
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>3
Với nhiều đối số hơn, chúng ta có thể đặt phạm vi <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>81 và <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>82
Trong ví dụ này, chúng tôi tìm thấy <p id="p">Example: <i>italic</i> and <b>bold</b></p>08 trong văn bản đầu vào, thay thế nó và giữ lựa chọn thay thế
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>4
Nếu không có gì được chọn, hoặc chúng ta sử dụng <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>81 và <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>82 trong <p id="p">Example: <i>italic</i> and <b>bold</b></p>04 bằng nhau, thì văn bản mới sẽ được chèn vào, không có gì bị xóa
Chúng tôi cũng có thể chèn một cái gì đó "tại con trỏ" bằng cách sử dụng <p id="p">Example: <i>italic</i> and <b>bold</b></p>04
Đây là nút chèn <p id="p">Example: <i>italic</i> and <b>bold</b></p>13 vào vị trí con trỏ và đặt con trỏ ngay sau nó. Nếu lựa chọn không trống, thì nó sẽ được thay thế (chúng ta có thể phát hiện ra nó bằng cách so sánh <p id="p">Example: <i>italic</i> and <b>bold</b></p>14 và làm một việc khác thay thế)
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>5
Để làm cho một cái gì đó không thể chọn, có ba cách
Sử dụng thuộc tính CSS <p id="p">Example: <i>italic</i> and <b>bold</b></p>15
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>6
Điều này không cho phép lựa chọn bắt đầu tại <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>26. Nhưng người dùng có thể bắt đầu lựa chọn ở nơi khác và bao gồm <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>26 vào đó
Sau đó, <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>26 sẽ trở thành một phần của <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>08, vì vậy việc lựa chọn thực sự xảy ra, nhưng nội dung của nó thường bị bỏ qua trong quá trình sao chép-dán
Ngăn hành động mặc định trong các sự kiện <p id="p">Example: <i>italic</i> and <b>bold</b></p>20 hoặc <p id="p">Example: <i>italic</i> and <b>bold</b></p>21
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>7
Điều này ngăn việc bắt đầu lựa chọn trên <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>26, nhưng khách truy cập có thể bắt đầu lựa chọn đó ở một phần tử khác, sau đó mở rộng đến <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>26
Điều đó thuận tiện khi có một trình xử lý sự kiện khác trên cùng một hành động kích hoạt lựa chọn (e. g. <p id="p">Example: <i>italic</i> and <b>bold</b></p>21). Vì vậy, chúng tôi vô hiệu hóa lựa chọn để tránh xung đột, vẫn cho phép sao chép nội dung <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>26
Chúng tôi cũng có thể xóa lựa chọn post-factum sau khi nó xảy ra với <p id="p">Example: <i>italic</i> and <b>bold</b></p>26. Điều đó hiếm khi được sử dụng, vì điều này gây ra hiện tượng nhấp nháy không mong muốn khi lựa chọn xuất hiện-biến mất
Chúng tôi đã đề cập đến hai API khác nhau cho các lựa chọn
- Đối với tài liệu. <p id="p">Example: <i>italic</i> and <b>bold</b></p>2 và <p id="p">Example: <i>italic</i> and <b>bold</b></p>1 đối tượng
- Cho <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>69, <p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>70. các phương thức và thuộc tính bổ sung
API thứ hai rất đơn giản vì nó hoạt động với văn bản
Các công thức nấu ăn được sử dụng nhiều nhất có lẽ là
- Lấy lựa chọn
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>8
- Đặt lựa chọn
<p id="p">Hello</p> <script> let range = new Range(); range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); // toString of a range returns its content as text console.log(range); // ll </script>9
Và cuối cùng, về con trỏ. Vị trí con trỏ trong các thành phần có thể chỉnh sửa, như <p id="p">Example: <i>italic</i> and <b>bold</b></p>31 luôn ở đầu hoặc cuối vùng chọn. Chúng ta có thể sử dụng nó để lấy vị trí con trỏ hoặc để di chuyển con trỏ bằng cách đặt <p id="p">Example: <i>italic</i> and <b>bold</b></p>32 và <p id="p">Example: <i>italic</i> and <b>bold</b></p>33