DOM คืออะไร? DOM เป็นชุดของอินเทอร์เฟซ API ที่ใช้การเขียนโปรแกรมเบราว์เซอร์ (ในบทช่วยสอนนี้อาจกล่าวได้ว่าเป็นการเขียนโปรแกรม DHTML) W3C มีความแตกต่างเล็กน้อยในแต่ละเบราว์เซอร์ ในหมู่พวกเขาเบราว์เซอร์ของ Mozilla นั้นคล้ายกับมาตรฐานมากที่สุด JavaScript ง่าย ๆ จะต้องรวม DOM เพื่อดำเนินการเขียนโปรแกรม DHTML และสามารถสร้างเอฟเฟกต์ที่สวยงามและนำไปใช้กับเว็บ เกือบจะเหมือนกับภาษาอื่น ๆ เช่นเดียวกับ C/C ++ ต้องการการสนับสนุนห้องสมุด มิฉะนั้นมันเป็นเพียงการวิจัยทางไวยากรณ์ สิ่งที่เรากังวลมากที่สุดคือ DOM เชื่อมต่อเว็บเพจกับสคริปต์และภาษาการเขียนโปรแกรมอื่น ๆ DOM เป็นของเบราว์เซอร์ไม่ใช่เนื้อหาหลักที่ระบุไว้ในข้อกำหนดภาษา JavaScript
ค้นหาองค์ประกอบ
1. ค้นหาโดยตรง
| ชื่อวิธี | อธิบาย |
| GetElementById (ID) (เอกสาร) | รับองค์ประกอบในเอกสารที่มีค่าแอตทริบิวต์ ID ที่ไม่ซ้ำกันที่ระบุ |
| getElementsByTagname_r (ชื่อ) | ส่งคืนอาร์เรย์ขององค์ประกอบเด็กด้วย tagname ที่ระบุในองค์ประกอบปัจจุบัน |
| document.getElementsByClassName | รับแท็กคอลเลกชันตามแอตทริบิวต์ |
| getAttribute (ชื่อ) | ส่งคืนค่าแอตทริบิวต์ขององค์ประกอบแอตทริบิวต์จะถูกระบุตามชื่อ |
1> document.getElementById ('id')
<body> <div id = "Zhang"> ไม่หล่อ </div> <script type = "text/javascript"> var i = document.getElementById ('Zhang'); // ค้นหา ID ที่ระบุ i.innerText = 'หล่อมาก'; // innerText แก้ไขสตริงที่ระบุ </script> </body>ผลการแสดงผลเมื่อเราเปิด IE มันจะถูกปรับเปลี่ยนให้หล่อมาก
2> getElementsByTagname_r (ชื่อ)
<body> <div name = "zhang"> ไม่หล่อ </div> <script type = "text/javascript"> var i = document.getElementByTagnmae ('Zhang'); // ค้นหาชื่อชื่อที่ระบุ i.innerText = 'หล่อมาก'; // innerText แก้ไขสตริงที่ระบุ </script> </body>เอฟเฟกต์การแสดงผลเดียวกัน
3> document.getElementsByClassName
<body> <div> ไม่หล่อ </div> <script type = "text/javascript"> var i = document.getElementClassName ('Zhang'); // ค้นหาชื่อคลาสที่ระบุ i.innerText = 'หล่อมาก'; // innerText แก้ไขสตริงที่ระบุ </script> </body>2. การค้นหาทางอ้อม
| ชื่อแอตทริบิวต์ | อธิบาย |
| เด็ก | ส่งคืนอาร์เรย์ขององค์ประกอบเด็กทั้งหมดขององค์ประกอบปัจจุบัน |
| เด็ก | ส่งคืนองค์ประกอบลูกทั้งหมดขององค์ประกอบปัจจุบัน |
| FirstChild | ส่งคืนองค์ประกอบลูกล่างแรกขององค์ประกอบปัจจุบัน |
| LastChild | ส่งคืนองค์ประกอบลูกสุดท้ายขององค์ประกอบปัจจุบัน |
| Nextsibling | ส่งคืนองค์ประกอบทันทีตามองค์ประกอบปัจจุบัน |
| ก่อนหน้า | ส่งคืนองค์ประกอบก่อนหน้าองค์ประกอบปัจจุบันทันที |
| การปกครอง | ส่งคืนองค์ประกอบฉลากโหนดพาเรนต์ |
| เด็ก | ส่งคืนคำบรรยายทั้งหมด |
| FirstElementChild | ส่งคืนองค์ประกอบคำบรรยายแรก |
| LastelementChild | ส่งคืนองค์ประกอบ subtag สุดท้าย |
| NextElementtsibling | กลับ下一个兄弟标签元素 |
| preventelementsibling | กลับไปที่องค์ประกอบแท็กพี่น้องก่อนหน้า |
ด้วย W3C DOM คุณสามารถเขียนสคริปต์ Cross-Browser อย่างง่ายโดยใช้ประโยชน์จากพลังงานและความยืดหยุ่นของ XML เพื่อใช้ XML เป็นสื่อการสื่อสารระหว่างเบราว์เซอร์และเซิร์ฟเวอร์
องค์ประกอบการดำเนินงาน
1. คุณสมบัติและวิธีการ W3C DOM ที่ใช้ในการสร้างเนื้อหาแบบไดนามิก
| คุณสมบัติ/วิธีการ | อธิบาย |
| document.createElement_x (tagname) | เมธอด createElement_x บนวัตถุเอกสารสามารถสร้างองค์ประกอบที่ระบุโดย tagname หากใช้สตริง div เป็นพารามิเตอร์วิธีการจะสร้างองค์ประกอบ div |
| document.createTextNode (ข้อความ) | วิธี createTextNode ของวัตถุเอกสารจะสร้างโหนดที่มีข้อความคงที่ |
| <Element> .AppendChild (ChildNode) | วิธีการภาคผนวกเพิ่มโหนดที่ระบุในรายการโหนดลูกขององค์ประกอบปัจจุบัน (เป็นโหนดเด็กใหม่) |
| <element> .setAttribute (ชื่อ, ค่า) | วิธีการเหล่านี้ตามลำดับได้รับและตั้งค่าของแอตทริบิวต์ชื่อในองค์ประกอบ |
| <element> .insertbefore (NewNode, TargetNode) | แทรกโหนด newNode เป็นโหนดลูกขององค์ประกอบปัจจุบันด้านหน้าขององค์ประกอบ targetNode |
| <element> .RemoveAttribute (ชื่อ) | วิธีนี้จะลบชื่อแอตทริบิวต์ออกจากองค์ประกอบ |
| <element> .removeChild (ChildNode) | วิธีนี้จะลบองค์ประกอบเด็กที่เป็นเด็กออกจากองค์ประกอบ |
| <element> .replacechild (Newnode, oldNode) | วิธีนี้แทนที่โหนด oldNode ด้วยโหนด newNode |
| <element> .haschildnodes () | วิธีนี้ส่งคืนค่าบูลีนที่ระบุว่าองค์ประกอบมีองค์ประกอบลูก |
2. แท็กเนื้อหา
InnerText รับเนื้อหาข้อความแท็ก innerhtml รับค่าเนื้อหา HTML รับค่านั่นคือค่าของแบบฟอร์มที่ส่ง
นั่นคือสิ่งต่อไปนี้มีดังต่อไปนี้:
<div> 1111 </div> <div> 2222 </div> <อินพุต type = "text" value = "Zhang Yanlin"> <script> document.getElementsByClassName ("Zhang") innerText = 123; // รับแท็กด้วยชื่อคลาส Zhang และเปลี่ยนเนื้อหาเป็น 123 document.getElementByClassName ("yan"). innerhtml = 456; // รับแท็กด้วยชื่อคลาส yan และเปลี่ยนเนื้อหาเป็น 456 document.getElementsByClassName ("lin"). value = "Zhang Yanlin เป็นรูปหล่อ"; // รับแท็กด้วยชื่อคลาส Lin และเปลี่ยนเนื้อหาเป็น Zhang Yanlin นั้นหล่อ </script>3. คุณลักษณะ
แอตทริบิวต์ // รับแอตทริบิวต์แท็กทั้งหมด setAttribute (คีย์, ค่า) // ตั้งแอตทริบิวต์แท็ก getAttribute (คีย์) // รับแอตทริบิวต์แท็กที่ระบุ
ผ่านคุณสมบัติที่กำหนดเองคุณสามารถสร้างกรณีของการเลือกทั้งหมดที่ไม่ได้เลือกและยกเลิกการเลือก รหัสมีดังนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <อินพุต type = "button" value = "select onClick =" curnal (curm) value = "undelect" onclick = "recvall ();"> </div> <div id = "i1"> <ul> <li> <อินพุต type = "ช่องทำเครื่องหมาย" value = "1"> บาสเก็ตบอล </li> <li> checkall () {var b = document.getElementsByClassName ("C1"); สำหรับ (var i = 0; i <b.length; i ++) {var check = b [i]; check.checked = true}} function cancleall () {var b = document.getElementsByClassName ("C1"); สำหรับ (var i = 0; i <var i = 0; i <b.length; i ++) {var check = b [i]; check.checked = false}} function recvall () {var b = document.getElementsByClassName ("C1"); สำหรับ (var i = 0; i <b.length; i ++) {var check = b [i]; if (check.checked) {check.checked = false} else {check.checked = true}}} </script> </body> </html> เลือกทั้งหมดย้อนกลับยกเลิกกรณีหมายเหตุ: OnClick เป็นเหตุการณ์คลิกซึ่งจะกล่าวถึงในภายหลัง
4. การดำเนินการในชั้นเรียน
classname // รับชื่อคลาสทั้งหมด classlist.remove (cls) // ลบคลาส classlist.list.add (cls) // เพิ่มคลาสคลาสที่ระบุ
สิ่งนี้มีประโยชน์มาก ตัวอย่างเช่นใน JD.com เมื่อเมาส์ของเราถูกวางไว้ในผลิตภัณฑ์ทั้งหมดผลิตภัณฑ์จำนวนมากปรากฏด้านล่าง ผลิตภัณฑ์จะถูกซ่อนและปรากฏขึ้นหลังจากเหตุการณ์ทริกเกอร์คือการกำหนดแอตทริบิวต์ที่ซ่อนอยู่ CSS หลังจากวางเมาส์แล้วแอตทริบิวต์ CSS ที่ซ่อนจะถูกลบออก เมาส์จะถูกลบออกและเพิ่มแอตทริบิวต์ที่ซ่อนอยู่
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> ซ่อน </title> <style> .hide {display: none; } </style> </head> <body> <span onMouseOver = "moUover ();"> นำบางสิ่งออกมา แต่มันหายไปโดยไม่ต้องใส่มัน </span> <div id = "zhangyanlin" สไตล์ = "font-size: 60px"> Zhang Yanlin document.getElementById ("Zhangyanlin"). classlist.remove ("ซ่อน"); } function mouout () {document.getElementById ("zhangyanlin"). classlist.add ("ซ่อน"); } </script> </body> </html> มาปลุกสมองด้วยเคสกันเถอะ5. การดำเนินการแท็ก
เราสามารถสร้างแท็กผ่าน DOM และเพิ่มลงในตำแหน่งที่ระบุ นี่คือสองวิธีในการใช้งานแท็ก
// เมธอดหนึ่ง var zhang = "<อินพุต type = 'text' />"—xxx.insertadjacenthtml("beforedend",zhang); วิธีการสอง var tag = document.createElement ('div') xxx.appendchild (แท็ก) // เพิ่มองค์ประกอบ div xxx.insertbefore (แท็ก, xxx [1]) // แทรกลงในตำแหน่งที่ระบุคุณสามารถใช้ดัชนี <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <div> <อินพุต type = "text"/> /> </div> <div style = "ตำแหน่ง: ญาติ;"> <ul id = "ความคิดเห็น"> <li> อเล็กซ์ </li> <li> eric </li></ul> </div> </div> ths.previouselementibling.value = ""; var cimmentlist = document.getElementById ('commentlist'); // รูปแบบแรกวิธีการสตริง // var str = "<li>" + val + "</li>"; // 'ก่อนหน้า', 'Afterbegin', 'Bardend', 'Afterend' // ก่อนหน้านี้ // ก่อนหน้านี้อยู่ด้านนอก // หลังการปิดการปิดภายใน // หลังการวางกำแพงภายนอก //commentlist.insertadjacenthtml("beforend // วิธีที่สองคือเมธอดองค์ประกอบ var tag = document.createelement ('li'); tag.innerText = val; var temp = document.createElement ('a'); temp.innertext = 'baidu'; temp.href = "http://etiantian.org"; Tag.AppendChild (อุณหภูมิ); // commentlist.appendchild (แท็ก); commentlist.insertbefore (tag, commentlist.children [1]); } </script> </body> </html> เพิ่มกรณีการทำงานของแท็ก6. การทำงานสไตล์
<body> <div id = i1> Zhang Yanlin เป็นรูปหล่อ </div> <pristm> var obj = document.getElementById ('i1'); obj.style.fontsize = "32px"; obj.style.backgroundcolor = "red";ผลกระทบมีดังนี้:
มาดูกันเถอะ เพียงแค่ดูจุดความรู้ก็น่าเบื่อ เรามักจะเห็นตัวอักษรที่มืดกว่าในกล่องอินพุตซึ่งแจ้งให้คุณป้อนบางสิ่ง เมื่อคุณคลิกเข้าไปมันจะหายไป เป็นการดำเนินการที่น่าอัศจรรย์ มันประสบความสำเร็จผ่าน DOM เพียงแค่อ่านรหัสโดยไม่พูดเรื่องไร้สาระมาก
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> .bb {color: #9a9a9a; } .aa {color: black; } </style> </head> <body> <ค่าอินพุต = "โปรดป้อนเนื้อหา" onfocus = "inpatu (นี่);" onblur = "onbtu (this);"> <script> ฟังก์ชั่น inpatu (ths) {ths.className = "aa"; var text = ths.value; if (text == "โปรดป้อนเนื้อหา") {ths.value = ""; }} ฟังก์ชั่น onbtu (ths) {var text = ths.value; if (text == "โปรดป้อนเนื้อหา" || text.trim (). length == 0) {ths.className = "bb"; ths.value = "โปรดป้อนเนื้อหา"; }} </script> </body> </html> พรอมต์อินพุต7. การทำงานของตำแหน่ง
เอกสารความสูงของเอกสารรวม DocumentElement.offSetheight เอกสารปัจจุบันใช้งานเอกสารความสูงของหน้าจอ DocumentElement.ClientHeight แท็กความสูงตนเอง
คุณคิดว่ามีการกลับไปที่ด้านบนที่มุมขวาล่างของหน้าเว็บแล้วกลับไปที่ด้านบนที่จุดน้อยที่สุด? ใช่มันคือการคำนวณความสูงเหล่านี้ และเมื่อคุณดึงเมาส์ลงรูปแบบที่สอดคล้องกันของแถบเมนูทางด้านซ้ายจะเปลี่ยนไป
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> ร่างกาย {margin: 0px; } img {ชายแดน: 0; } ul {padding: 0; มาร์จิ้น: 0; รายการสไตล์: ไม่มี; } h1 {padding: 0; มาร์จิ้น: 0; } .ClearFix: หลังจาก {เนื้อหา: "."; แสดง: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; ทัศนวิสัย: ซ่อน; } .wrap {width: 980px; มาร์จิ้น: 0 อัตโนมัติ; } .pg-header {พื้นหลังสี: #303a40; -webkit-box-shadow: 0 2px 5px RGBA (0,0,0, .2); -moz-box-shadow: 0 2px 5px RGBA (0,0,0, .2); Box-Shadow: 0 2px 5px RGBA (0,0,0, .2); } .pg-header .logo {float: ซ้าย; Padding: 5px 10px 5px 0px; } .pg-header .logo img {แนวตั้ง-แนว: กลาง; ความกว้าง: 110px; ความสูง: 40px; } .pg-header .nav {line-height: 50px; } .pg-header .nav ul li {float: ซ้าย; } .pg-header .nav ul li a {display: block; สี: #CCC; Padding: 0 20px; การตกแต่งข้อความ: ไม่มี; ขนาดตัวอักษร: 14px; } .pg-header .nav ul li a: hover {color: #fff; พื้นหลังสี: #425A66; } .pg-body {} .pg-body .catalog {ตำแหน่ง: สัมบูรณ์; ด้านบน: 60px; ความกว้าง: 200px; พื้นหลังสี: #fafafa; ด้านล่าง: 0px; } .pg-body .catalog.fixed {ตำแหน่ง: แก้ไข; ด้านบน: 10px; } .pg-body .catalog .Catalog-item.active {color: #FFF; พื้นหลังสี: #425A66; } .pg-body .content {ตำแหน่ง: สัมบูรณ์; ด้านบน: 60px; ความกว้าง: 700px; ขอบซ้าย: 210px; พื้นหลังสี: #fafafa; ล้น: อัตโนมัติ; } .pg-body .content .section {ความสูง: 500px; ชายแดน: 1px ของแข็งสีแดง; } </style> <body onscroll = "scrollevent ();"> <div> <div> <div> <a href = "#"> <img src = "http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn href = "#"> home </a> </li> <li> <a href = "#"> ฟังก์ชั่น 1 </a> </li> <li> <a href = "#"> ฟังก์ชั่น 2 </a> </li> </ul> </div> </div> 1 </a> </div> <div auto-to = "function2"> <a> รูปภาพ 2 </a> </div> <div auto-to = "function3"> <a> รูปภาพ 3 </a> </div> </div> <div id = "เนื้อหา"> <div menu = "ฟังก์ชั่น <div menu = "function3"> <h1> บทที่ 3 </h1> </div> </div> </div> </script> <script> ฟังก์ชั่น scrollevent () {var bodyscrolltop = document.body.scrolltop; if (bodyscrolltop> 50) {document.getElementsByClassName ('แคตตาล็อก') [0] .classlist.add ('แก้ไข'); } else {document.getElementsByClassName ('แคตตาล็อก') [0] .classlist.remove ('แก้ไข'); } var content = document.getElementById ('เนื้อหา'); ส่วน var = content.children; สำหรับ (var i = 0; i <sections.length; i ++) {var current_section = ส่วน [i]; // ความสูงสัมบูรณ์ของฉลากปัจจุบันจากด้านบน var scofftop = current_section.offsettop + 60; // ฉลากปัจจุบันจากด้านบนความสูงสัมพัทธ์ var offtop = scofftop - bodyscrolltop; // ความสูงของฉลากปัจจุบัน var height = current_section.scrollheight; if (Offtop <0 && -offtop <ความสูง) {// ฉลากปัจจุบันเพิ่มการใช้งาน // การลบเมนู var ที่ใช้งานอยู่อื่น = document.getElementById ('แคตตาล็อก') เด็ก; var current_menu = เมนู [i]; current_menu.classlist.add ('active'); สำหรับ (var j = 0; j <menus.length; j ++) {ถ้า (เมนู [j] == current_menu) {} else {menus [j] .classlist.remove ('active'); } } หยุดพัก; }}}} </script> </body> </html> เมนูเลื่อน <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> .pg-top {ตำแหน่ง: แก้ไข; พื้นหลังสี: #0095BB; ความสูง: 40px; ความกว้าง: 40px; ด้านล่าง: 50px; ขวา: 40px; สี: Whitesmoke; } .hide {display: none; } </style> </head> <body onscroll = "func ();"> <div style = "ความสูง: 3000px;" id = "i1"> <h1> Zhang Yanlin </h1> </div> <div id = "i2"> <a href = "JavaScript: void (0);" onclick = "gotop ();"> กลับไปด้านบน </a> </viv> <pristr> ฟังก์ชั่น func () {var scrolltop = document.body.scrolltop; var i1 = document.getElementById ("i2"); if (scrolltop> 20) {i1.classlist.remove ("ซ่อน")} else {i1.classlist.add ("ซ่อน")}} ฟังก์ชั่น gotop () {document.body.scrolltop = 0; } </script> </body> </html> กลับไปด้านบน8. การดำเนินการอื่น ๆ
Console.log Box Output Box Box Pop-Up Box ยืนยันการยืนยันกล่องยืนยัน // url และ refresh location.href รับ urllocation.href = "url" redirect location.reload () reload // timer setInterval หลายตัวจับเวลา ClearInterval clear หลายตัวจับเวลา
ให้ฉันบอกคุณเกี่ยวกับตัวจับเวลา ตัวจับเวลามีประโยชน์มากกว่า ตัวอย่างเช่นเมื่อเราลบอีเมลเราจะพบการสนทนาป๊อปอัพ อีเมลถูกลบไปแล้ว นี่คือตัวจับเวลาเดียว ตัวจับเวลาหลายตัวสามารถใช้งานได้เมื่อคุณมีความต้องการเฉพาะ
// กรณีตัวจับเวลาหลายตัว <อินพุต type = "ปุ่ม" value = "Interval" onClick = "interval ();"> <อินพุตประเภท = "ปุ่ม" value = "stopInterval" onClick = "stopInterval ();"> <pristm> ฟังก์ชัน () {s1 = setInterval (ฟังก์ชั่น (ฟังก์ชั่น) s1 = setInterval (ฟังก์ชัน () {console.log (123)}, 500); } function stopInterval () {clearInterval (S1); // ล้างตัวจับเวลาหลายตัว} </script>จับเวลาเดี่ยว
<div> <อินพุต type = "ปุ่ม" value = "ลบ" onClick = "ลบ ();"> <อินพุตประเภท = "ปุ่ม" value = "keal สถานะปัจจุบัน" onClick = "undelete ();"> <div id = "สถานะ" t1 = settimeout (Clearstatus, 1500); } function clearstatus () {document.getElementById ("สถานะ"). innerText = ""; } ฟังก์ชั่น undelete () {cleartimeout (t1); // หลังจากล้างตัวจับเวลามันจะแสดงต่อไป} </script>เหตุการณ์
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> // เหตุการณ์ปกติ <button id = "btn1" btn1 "btn-get. btn ฟังก์ชั่น func () {การแจ้งเตือน ("การประมวลผลเวลาปกติ")} </script> // ระดับ 0 เหตุการณ์การประมวลผล <ปุ่ม ID = "BTN2"> ระดับ 0 ปุ่มประมวลผล </button> <script> var btn = document.getElementById ("BTN2"); btn.onclick = function () {การแจ้งเตือน ("ปุ่มประมวลผลระดับ 0 ระดับ")}; // btn.onclick = null; // ล้างการประมวลผลเหตุการณ์หลายเหตุการณ์จะถูกเขียนทับโดยเหลือเฉพาะเหตุการณ์สุดท้าย </script> // ระดับ 2 เหตุการณ์การประมวลผล <ปุ่ม ID = "BTN3"> ปุ่มการประมวลผลระดับ 2 </button> <script> var btn = document.getElementById ("BTN3") var btn1 = document.getElementById ("btn3"). addeventListener ("คลิก", ฟังก์ชัน () {แจ้งเตือน ("เหตุการณ์การประมวลผลรอง 2")}); // ไม่ได้เขียนทับ </script> <button id = "btn4"> ปุ่มที่ใช้งานร่วมกันได้เต็มรูปแบบ </button> <script> var btn = document.getElementById ("BTN4"); if (btn.addeventListener) {btn.addeventListener ("คลิก", ตัวอย่าง); } อื่นถ้า (btn.attachevent) {btn.attachevent ("onclick", ตัวอย่าง); } else {btn.onclick = การสาธิต; } ฟังก์ชัน Demo () {Alert ("การจัดการเหตุการณ์ความเข้ากันได้แบบรวม")} </script> </body> </html>รายการกิจกรรม:
| คุณสมบัติ | เหตุการณ์นี้เกิดขึ้นเมื่อใด (เมื่อถูกทริกเกอร์) |
| มีความหมาย | การโหลดภาพถูกขัดจังหวะ |
| onblur | องค์ประกอบสูญเสียโฟกัส |
| การเปลี่ยน | เนื้อหาของพื้นที่ได้รับการแก้ไข |
| onclick | มือจับเหตุการณ์ที่เรียกว่าเมื่อผู้ใช้คลิกที่วัตถุ (ดำเนินการตัวอย่างรหัสด้านบนเมื่อคลิกแท็กอินพุต) |
| ondblclick | ด้ามจับเหตุการณ์ที่เรียกว่าเมื่อผู้ใช้ดับเบิลคลิกวัตถุ |
| ผู้กระทำความผิด | เกิดข้อผิดพลาดขณะโหลดเอกสารหรือรูปภาพ |
| onfocus | องค์ประกอบได้รับโฟกัส |
| onkeydown | กดปุ่มคีย์บอร์ด |
| onkeypress | คีย์บอร์ดคีย์จะถูกกดและปล่อยออกมา |
| onkeyup | คีย์บอร์ดเปิดตัว |
| การบรรทุก | โหลดหน้าหรือรูปภาพ |
| Onmousedown | กดปุ่มเมาส์ |
| Onmousemove | หลังจากเมาส์เคลื่อนที่ไป |
| Onmouseout | เมาส์จะถูกลบออกจากองค์ประกอบ |
| Onmouseover | เลื่อนเมาส์ไปที่องค์ประกอบ |
| onmouseup | ปุ่มเมาส์ถูกปล่อยออกมา |
| onreset | คลิกปุ่มรีเซ็ต |
| ทำให้เป็นสี | หน้าต่างหรือเฟรมมีการปรับขนาด |
| การเลือก | เลือกข้อความ |
| ออนซูบมิท | คลิกปุ่มยืนยัน |
| การโหลด | หน้าออกจากผู้ใช้ |
หมายเหตุ: แท็กสามารถผูกหลายเหตุการณ์แท็กนี้กำลังทำงานและเหตุการณ์สรุปเนื้อหาของเหตุการณ์ปัจจุบัน
มามีบางกรณีมิฉะนั้นฉันรู้สึกว่าฉันไม่ได้เห็นมันหลังจากอ่านมัน
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> ul {list-style: none; Padding: 0; มาร์จิ้น: 0; } ul li {float: ซ้าย; พื้นหลังสี: #038CAE; สี: สีขาว; Padding: 15px 20px; } .ClearFix: หลัง {display: block; เนื้อหา: '.'; ความสูง: 0; ทัศนวิสัย: ซ่อน; ชัดเจน: ทั้งสอง; } .hide {display: none; } .tab-menu {border: 1px solid #dddddd; } .tab-menu .title {พื้นหลังสี: #DDDDDD; } .tab-menu .title .active {พื้นหลังสี: สีขาว; สี: สีดำ; ชายแดนด้านบน: 2px Solid Red; } .tab-menu .content {border: 1px solid #dddddd; ต่ำสุด: 150px; } </style> </head> <body> <div> <div> <div> <ul> <li target = "h1" onclick = "แสดง (นี่);"> แนวโน้มราคา </li> <li target = "h2" onclick = "show (this);"> การกระจายตลาด </li> "เนื้อหา"> <div con = "h1"> content1 </div> <div con = "h2"> content2 </div> <div con = "H3"> เนื้อหา 3 </div> </div> </div> </div> ths.className = 'active'; var brother = ths.parentelement.children; สำหรับ (var i = 0; i <brother.length; i ++) {ถ้า (ths == พี่ชาย [i]) {} else {พี่ชาย [i] .removeattribute ("คลาส"); }} var content = document.getElementById ("เนื้อหา") เด็ก; สำหรับ (var j = 0; j <content.length; j ++) {var current_content = เนื้อหา [j]; var con = current_content.getAttribute ("con"); if (con == เป้าหมาย) {current_content.classlist.remove ("ซ่อน"); } else {current_content.className = "ซ่อน"; }}}} </script> </body> </html> เคสเมนูแท็ก <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <อินพุต type = "ปุ่ม" onclick = "func ();" value = "คลิกฉัน"/> <div id = "i1"> <div> 123 </div> <div Alex = "SB"> 123 </div> <div> 123 </div> <div Alex = "SB"> 123 </div> </div> 123 </div> <! func () {// i1 // i1 เด็กทุกคนวนลูปเด็กแต่ละคนตัดสินว่า Alex = 'sb' var i1 = document.getElementById ('i1'); var divs = i1.children; สำหรับ (var i = 0; i <divs.length; i ++) {var current_div = divs [i]; var result = current_div.getAttribute ('Alex'); // console.log (ผลลัพธ์); if (result == "sb") {current_div.innertext = "456"; }}} </script> </body> </html> เปลี่ยนค่าองค์ประกอบผ่านแอตทริบิวต์ที่กำหนดเองบทความข้างต้นมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับวัตถุ DOM JavaScript บทความนี้เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น