Mục lục
2° thường thấy phương pháp biểu
Nhị, DOM ứng dụng ví dụ thực tế
Vận hành hiệu quả ( như sau GIF đồ ):
2. Nhiều tuyển khung trường hợp:
Vận hành hiệu quả: ( như sau GIF đồ )
Vận hành hiệu quả ( như sau GIF đồ sở kỳ ):
4. Động thái gia tăng hình ảnh trường hợp:
Vận hành hiệu quả: ( như sau GIF đồ )
2. Tiết điểm thường dùng thuộc tính cùng phương pháp:
2° vận hành kết quả: ( như sau GIF đồ )
Một, DOM nhanh chóng nhập môn
1. Cơ bản giới thiệu:
(1)DOM toàn xưng là Document Object Model,Hồ sơ <---> đối tượngMô hình,Chính là đem hồ sơ trung nhãn, thuộc tính, văn bản chờ thay đổi trở thành đối tượng tới quản lý.
(2)Hồ sơ sẽ bị chiếu rọi vì một cây từ nhiều đối tượng tạo thành có trình tự kết cấu thụ tới tiến hành quản lý,Đây làDOM cơ chế.
(3)DOM cũng có thể chia làm HTML DOM, CSS DOM, cùng với XML DOM.
Quan trọng nhất chính là html DOM; đương trang web bị thêm tái khi, trình duyệt sẽ sáng tạoGiao diệnHồ sơ đối tượng mô hình (Document Object Model).html dom thụ như sau đồ sở kỳ:
2.Document:
1° tóm tắt
(1) document quản lý sở hữu HTML hồ sơ nội dung
(2) document là một loại có tầng cấp quan hệ thụ kết cấu hồ sơ.
(3) ở dom trung, sở hữu nhãn đều đối tượng hóa. Chỉ cần được đến nhãn đối ứng dom đối tượng, liền có thể thông qua dom đối tượng thuộc tính cùng phương pháp tới khống chế nhãn bày ra phương thức.(Chú ý hồ sơ bản thân là trạng thái tĩnh, không có biến hóa, thông qua trình tự thay đổi chỉ là ở trình duyệt nội tồn trung nguyên tố.)
(4) thông qua document có thể phỏng vấn sở hữu nhãn đối tượng
2° thường thấy phương pháp biểu
Tra tìm HTML nguyên tố:
| Phương pháp | Miêu tả |
|---|---|
| document.getElementById(id) | Thông qua nguyên tố id tới tra tìm nguyên tố |
| document.getElementsByTagName(name) | Thông qua nhãn danh tới tra tìm nguyên tố |
| document.getElementsByClassName(name) | Thông qua loại danh tới tra tìm nguyên tố |
Thay đổi HTML nguyên tố:
| Phương pháp | Miêu tả |
|---|---|
| element.innerHTML =new html content | Thay đổi nguyên tố inner HTML |
| element.attribute =new value | Thay đổi HTML nguyên tố thuộc tính giá trị |
| element.setAttribute(attribute,value) | Thay đổi HTML nguyên tố thuộc tính giá trị |
| element.style.property =new style | Thay đổi HTML nguyên tố hình thức |
Tăng thêm cùng xóa bỏ nguyên tố:
| Phương pháp | Miêu tả |
|---|---|
| document.createElement(element) | Sáng tạo HTML nguyên tố |
| document.removeChild(element) | Xóa bỏ HTML nguyên tố |
| document.appendChild(element) | Tăng thêm HTML nguyên tố |
| document.replaceChild(element) | Thay đổi HTML nguyên tố |
| document.write(text) | Viết nhập HTML phát ra lưu |
Tăng thêm sự kiện xử lý trình tự:
| Phương pháp | Miêu tả |
|---|---|
| document.getElementById(id).onclick = function(){code} | Hướng onclick sự kiện tăng thêm sự kiện xử lý trình tự |
Nhị, DOM ứng dụng ví dụ thực tế
1. Bắn ra cửa sổ trường hợp:
Số hiệu biểu thị:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>first application</title>
<script type= "text/javascript" >
//Dynamic register
window.onload = function () {
var button_1 = document.getElementById( "button_1" );
button_1.onclick = function () {
// thu hoạch button_1dom đối tượng đối ứng nhãn, sở bao hàm văn bản nội dung
alert(button_1.innerText); //innerText, cường điệu văn bản
alert(button_1.innerHTML); //innerHTML, cường điệu nhãn
}
}
</script>
</head>
<body>
<button id= "button_1" ><span>Cyan_RA9</span></button>
<p> điểm đánh cái nút tới thu hoạch nó giá trị </p>
</body>
</html>Vận hành hiệu quả ( như sau GIF đồ ):
2. Nhiều tuyển khung trường hợp:
Số hiệu biểu thị:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Second application</title>
</head>
<script type= "text/javascript" >
function selectAll() {
// thu hoạch đến fruit này tổ phục tuyển khung
var fruits = document.getElementsByName( "fruit" ); //fruits là một cái NodeList, tức là một cái tập hợp.
for (var i = 0; i < fruits.length; ++i) {
fruits[i].checked = true;
}
}
function selectNone() {
var fruits = document.getElementsByName( "fruit" );
for (var i = 0; i < fruits.length; ++i) {
fruits[i].checked = false;
}
}
function selectReverse() {
var fruits = document.getElementsByName( "fruit" );
for (var i = 0; i < fruits.length; ++i) {
fruits[i].checked =!fruits[i].checked;
}
}
</script>
<body>
<span> ngươi thích ăn trái cây: </span> <br/>
<input type= "checkbox" name= "fruit" value= "grape" />Grape
<input type= "checkbox" name= "fruit" value= "watermelon" />Watermelon
<input type= "checkbox" name= "fruit" value= "strawberry" />Strawberry
<input type= "checkbox" name= "fruit" value= "blueberry" />Blueberry <br/><br/>
<button onclick= "selectAll()" > toàn tuyển </button>
<button onclick= "selectNone()" > toàn không chọn </button>
<button onclick= "selectReverse()" > phản tuyển </button>
</body>
</html>Vận hành hiệu quả: ( như sau GIF đồ )
3. Hình ảnh cắt trường hợp:
Số hiệu biểu thị:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Third application</title>
<script type= "text/javascript" >
function changeImages() {
//getElementsByTagName phương pháp có thể thông qua nhãn danh tới thu hoạch đối ứng dom đối tượng.
var images = document.getElementsByTagName( "img" );
var input1 = document.getElementById( "input1" );
if (input1.value == "Điểm đánh đem màu lam cây xa cúc cắt vì hồng nhạt" ) {
for (var i = 0; i < images.length; ++i) {
images[i].src = "../../../cornflower/" + (i+4) + ".jpg";
}
input1.value = "Điểm đánh đem hồng nhạt cây xa cúc cắt vì màu lam";
} else if (input1.value == "Điểm đánh đem hồng nhạt cây xa cúc cắt vì màu lam" ) {
for (var i = 0; i < images.length; ++i) {
images[i].src = "../../../cornflower/" + (i+1) + ".jpg";
}
input1.value = "Điểm đánh đem màu lam cây xa cúc cắt vì hồng nhạt";
}
}
</script>
</head>
<body>
<img src= "../../../cornflower/1.jpg" height= "100px" />
<img src= "../../../cornflower/2.jpg" height= "100px" />
<img src= "../../../cornflower/3.jpg" height= "100px" /> <br/>
<input type= "button" value= "Điểm đánh đem màu lam cây xa cúc cắt vì hồng nhạt" id= "input1" onclick= "changeImages()" />
</body>
</html>Vận hành hiệu quả ( như sau GIF đồ sở kỳ ):
4. Động thái gia tăng hình ảnh trường hợp:
Số hiệu biểu thị:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Fourth application</title>
<script type= "text/javascript" >
/*
Δ chú ý: Sáng tạo tân hình ảnh không phải sửa chữa, mà là gia tăng!
Bởi vậy, nơi này muốn phải dùng documentDOM đối tượng createElement phương pháp.
*/
var addCornFlower = function () {
// ở trình duyệt nội tồn trung "Sáng tạo" <img/> nguyên tố
var img = document.createElement( "img" );
img.src = "../../../cornflower/4.jpg";
img.width = "100";
// lợi dụng appendChild phương pháp "Tăng thêm" HTML nguyên tố ( đem sáng tạo img nguyên tố quải tái đến dom trên cây )
document.body.appendChild(img);
}
</script>
</head>
<body>
<input type= "button" value= "Điểm đánh tăng thêm một đóa cây xa cúc" onclick= "addCornFlower()" />
</body>
</html>Vận hành hiệu quả: ( như sau GIF đồ )
Tam, DOM tiết điểm
1.html dom thuyết minh:
ỞHTML DOM ( hồ sơ đối tượng mô hình )Trung, mỗi cái bộ phận đều là tiết điểm, tức hết thảy đều nhưng coi như là Node.
1)Hồ sơ bản thân làHồ sơ tiết điểm
2)Sở hữu HTMLNguyên tốLà nguyên tố tiết điểm
3)Sở hữu HTMLThuộc tínhLà thuộc tính tiết điểm
4)HTMLNguyên tố nội văn bảnLà văn bản tiết điểm
5)Chú thích là chú thích tiết điểmNếu tưởng xem xét cụ thể Element thuộc tính cùng phương pháp, có thể xem xét ——
2. Tiết điểm thường dùng thuộc tính cùng phương pháp:
1° thường dùng thuộc tính
1. childNodes Thuộc tính, thu hoạch trước mặt tiết điểm sở hữu tử tiết điểm2. firstChild Thuộc tính, thu hoạch trước mặt tiết điểm cái thứ nhất tử tiết điểm3. lastChild Thuộc tính, thu hoạch trước mặt tiết điểm cuối cùng một cái tử tiết điểm4. parentNode Thuộc tính, thu hoạch trước mặt tiết điểm phụ tiết điểm5. nextSibling Thuộc tính, thu hoạch trước mặt tiết điểm tiếp theo cái tiết điểm ( Sau một cái )6. previousSibling Thuộc tính, thu hoạch trước mặt tiết điểm thượng một cái tiết điểm ( Trước một cái )7. className Dùng cho thu hoạch hoặc thiết trí nhãn class Thuộc tính giá trị8. innerHTML Thuộc tính, tỏ vẻ thu hoạch / Thiết trí lúc đầu nhãn cùng kết thúc nhãn trung nội dung9. innerText Thuộc tính, tỏ vẻ thu hoạch / Thiết trí lúc đầu nhãn cùng kết thúc nhãn trung văn bản
2° thường dùng phương pháp
1°getElementsByTagName(tagName) phương pháp,Thu hoạch chỉ định nhãn danh dom đối tượng; thông qua cụ thể nguyên tố tiết điểm thuyên chuyển nên phương pháp, nhưng thu hoạch trước mặt tiết điểm chỉ định nhãn danh hài tử tiết điểm, phản hồiHTMLCollection loại hình.
2°appendChild(ChildNode) phương pháp,Có thể tăng thêm một cái tử tiết điểm ( đem chỉ định tiết điểm quải tái đến dom trên cây ), ChildNode là muốn tăng thêm hài tử tiết điểm.3°getElementById(id) phương pháp,Thông qua id tới thu hoạch chỉ định tiết điểm, phản hồiHTMLXxxElement loại hình.
4°getElementsByName(name) phương pháp,Thông qua name thuộc tính giá trị tới thu hoạch chỉ định tiết điểm, nhưng dùng cho thu hoạch một tổ phục tuyển khung ( cùng name giá trị ), phản hồiNodeList loại hình.
3. Thu hoạch tiết điểm:
1° số hiệu biểu thị:
Giao diện như sau:
Thông qua id thu hoạch đối ứng cái nút dom đối tượng, sau đó thông qua “dom đối tượng.onclick = function() {}”Tới cấp dom đối tượng trói định điểm đánh sự kiện, thông qua biên soạn số hiệu, thực hiện bất đồng cái nút công năng.
Số hiệu như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title>methods to get Nodes</title>
<style type= "text/css" >
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 220px;
height: 30px;
margin-bottom: 10px;
text-align: left;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{ /* hậu đại lựa chọn khí, tỏ vẻ là.inner trung li nhãn */
border: 1px darkblue dashed;
padding: 5px;
margin: 5px;
float:left; // làm vô danh sách biểu nguyên tố theo thứ tự xếp hạng một khối
}
.inner{
width:400px;
border:2px cornflowerblue solid;
/*border-width: 2px;*/
margin-bottom: 10px;
padding: 10px;
float: left;
}
</style>
<script type= "text/javascript" >
// động thái trói định sự kiện
window.onload = function () {
//1. Tra tìm id=java tiết điểm
var btn_1 = document.getElementById( "btn_1" );
btn_1.onclick = function () {
var java = document.getElementById( "java" );
alert( "java tiết điểm văn bản nội dung =" + java.innerText);
}
//2. Tra tìm sở hữu option tiết điểm
var btn_2 = document.getElementById( "btn_2" );
btn_2.onclick = function () {
var options = document.getElementsByTagName( "option" );
alert( "options =" + options); //HTMLCollection
for (var i = 1; i < options.length; ++i) {
alert( "innerText =" + options[i].innerText)
}
}
//3. Tra tìm name=fruit tiết điểm
var btn_3 = document.getElementById( "btn_3" );
btn_3.onclick = function () {
var fruits = document.getElementsByName( "fruit" );
alert( "fruits =" + fruits); //NodeList
for (var i = 0; i < fruits.length; ++i) {
if (fruits[i].checked) {
alert( "fruits[" + i + "] =" + fruits[i].value);
}
}
}
//4. Tra tìm id=language hạ sở hữu li tiết điểm
var btn_4 = document.getElementById( "btn_4" );
btn_4.onclick = function () {
// nơi này rút nhỏ dom đối tượng phạm vi!
var lis = document.getElementById( "language" ).getElementsByTagName( "li" );
alert( "lis =" + lis); //HTMLCollection
for (var i = 0; i < lis.length; ++i) {
alert( "lis[" + i + "] =" + lis[i].innerText);
}
}
//5. Tra tìm id=sel_1 sở hữu tử tiết điểm
/* PS:
(1) hạ kéo khung sở hữu tử tiết điểm ———— cho rằng <br/> đổi hành cũng là một cái tử tiết điểm ( văn bản loại hình ).
(2) có thể thông qua childNodes thuộc tính tới thu hoạch trước mặt tiết điểm sở hữu tử tiết điểm.
(3) có thể thông qua selected thuộc tính tới đối thu hoạch đến tiết điểm tiến hành lọc.
*/
var btn_5 = document.getElementById( "btn_5" );
btn_5.onclick = function () {
var sel_1 = document.getElementById( "sel_1" );
alert( "sel_1 =" + sel_1); //object HTMLSelectElement
var childNodes = sel_1.childNodes;
alert( "childNodes =" + childNodes); //NodeList
alert( "childNodes' length =" + childNodes.length);
for (var i = 0; i < childNodes.length; ++i) {
if (childNodes[i].selected) {
alert(childNodes[i].innerText); //Text | HEMLOptionElement
}
}
// phương thức nhị:
/*
Bởi vì sel_1 là HTMLSelectElement, bản thân có tập hợp đặc tính,
Trình duyệt ở phân tích lúc ấy chắc hẳn phải vậy mà cho rằng <select> hạ có <option> nguyên tố, bởi vậy nhưng trực tiếp thông qua hạ tiêu tới chơi hỏi.
*/
for (var i = 0; i < sel_1.length; ++i) {
alert( "sel_1[" + i + "] =" + sel_1[i].innerText);
}
}
//6. Tra tìm id=sel_1 cái thứ nhất tử tiết điểm
//PS: firstChild thuộc tính là dựa theo childNodes thuộc tính được đến cái thứ nhất byte điểm.
var btn_6 = document.getElementById( "btn_6" );
btn_6.onclick = function () {
var firstChild = document.getElementById( "sel_1" ).firstChild;
alert( "sel_1's firstChild =" + firstChild.innerText);
alert( "sel_1's firstChild =" + sel_1[0].innerText);
}
//7. Tra tìm id=java phụ tiết điểm
var btn_7 = document.getElementById( "btn_7" );
btn_7.onclick = function () {
var java = document.getElementById( "java" );
alert( "java =" + java); //HTMLLIElement
var javaParent = java.parentNode;
alert( "javaParent =" + javaParent); //HTMLUListElement
for (var i = 0; i < javaParent.childNodes.length; ++i) {
alert(javaParent.childNodes[i].innerText);
}
}
//8. Tra tìm id=moderate trước sau huynh đệ tiết điểm
var btn_8 = document.getElementById( "btn_8" );
btn_8.onclick = function () {
var moderate = document.getElementById( "moderate" );
alert( "moderate =" + moderate); //object HTMLOptionElement
alert( "moderate =" + moderate.innerText);
alert(moderate.previousSibling.previousSibling.innerText);
alert(moderate.nextSibling.nextSibling.innerText);
}
//9. Đọc lấy id=moderate value thuộc tính giá trị
var btn_9 = document.getElementById( "btn_9" );
btn_9.onclick = function () {
var moderate = document.getElementById( "moderate" );
alert(moderate.value);
}
//10. Thiết trí #person văn bản vực
var btn_10 = document.getElementById( "btn_10" );
btn_10.onclick = function () {
var person = document.getElementById( "person" );
person.innerText = "My name's Cyan, nice to meet you!";
}
}
</script>
</head>
<body>
<div id= "total" >
<div class= "inner" >
<p>
The FRUIT you relish:
</p>
<input type= "checkbox" name= "fruit" value= "grape" checked= "checked" >Grape
<input type= "checkbox" name= "fruit" value= "strawberry" >Strawberry
<input type= "checkbox" name= "fruit" value= "blueberry" >blueberry <br/>
<hr/>
<p>
What about your health state?
</p>
<select id= "sel_1" >
<option>-- khỏe mạnh trạng huống --</option>
<option> ngưu bức </option>
<option id= "moderate" value= "good" > hại ⭐</option>
<option> bay múa </option>
</select>
<hr/>
<p>
The processing language you master:
</p>
<ul id= "language" >
<li id= "java" >Java</li>
<li>C</li>
<li>C++</li>
<li>Python</li>
</ul> <br/><br/>
<hr/>
<p>
Self-introduce.
</p>
<textarea name= "person" id= "person" > cá nhân giới thiệu </textarea>
</div>
</div>
<div id= "btnList" >
<div>
<button id= "btn_1" > tra tìm id=java tiết điểm </button>
</div>
<div>
<button id= "btn_2" > tra tìm sở hữu option tiết điểm </button>
</div>
<div>
<button id= "btn_3" > tra tìm name=fruit tiết điểm </button>
</div>
<div>
<button id= "btn_4" > tra tìm id=language hạ sở hữu li tiết điểm </button>
</div>
<div>
<button id= "btn_5" > tra tìm id=sel_1 sở hữu tử tiết điểm </button>
</div>
<div>
<button id= "btn_6" > tra tìm id=sel_1 cái thứ nhất tử tiết điểm </button>
</div>
<div>
<button id= "btn_7" > tra tìm id=java phụ tiết điểm </button>
</div>
<div>
<button id= "btn_8" > tra tìm id=moderate trước sau huynh đệ tiết điểm </button>
</div>
<div>
<button id= "btn_9" > đọc lấy id=moderate value thuộc tính giá trị </button>
</div>
<div>
<button id= "btn_10" > thiết trí #person văn bản vực </button>
</div>
</div>
</body>
</html>2° vận hành kết quả: ( như sau GIF đồ )
PS: GIF biểu thị thời gian so trường ( 2mins )
Bốn, DOM tổng kết
Trọng điểm muốn nắm giữ ——
①DOM cơ chế:Đem hồ sơ chiếu rọi thành từ từng cái có trình tự quan hệ tiết điểm tạo thành thụ; html hồ sơ bản thân bị chiếu rọi vì hồ sơ tiết điểm, mà html hồ sơ nội nguyên tố cùng thuộc tính, cùng với nguyên tố nội văn bản, đều nhưng bị chiếu rọi vì dom đối tượng, mà dom đối tượng chính là trên cây một cái tiết điểm ( or giao điểm ). Thu hoạch nào đó dom đối tượng sau, có thể thông qua sự kiện trói định ( sự kiện đăng ký ) tới khống chế nên đối tượng bày ra phương thức, mà có dom cơ chế thêm vào, có thể thông qua mỗ một cái tiết điểm ( mỗ một cái dom đối tượng ) tới thu hoạch mặt khác tiết điểm, dễ bề khống chế cùng quản lý. ( html dom thụ biểu thị đồ muốn nhớ rục )
②DOM thường dùng thuộc tính cùng phương pháp:Như là getElementById, getElementsByTagName từ từ, muốn thuần thục vận dụng.
③DOM bản thân cũng không phải trước mặt chủ lưu công cụ, nhưng làDOM cơ chế là Vue tầng dưới chót chống đỡ,Nguyên lý muốn rõ ràng.
System.out.println( "END---------------------------------------------------------------------" );
Quét qua
5619
Đến 【 tưới nước nhạc viên 】 lên tiếng
