1. ค้นหาองค์ประกอบ:
document.getElementById ("id"); ค้นหาตาม ID และหาได้มากที่สุด
var a = docunment.getElementById ("id"); วางองค์ประกอบที่พบในตัวแปร
document.getElementsByName ("ชื่อ"); ค้นหาตามชื่อและพบอาร์เรย์;
document.getElementByTagname ("ชื่อ"); ค้นหาอาร์เรย์ตามชื่อแท็ก
document.getElementByClassName ("ชื่อ") ค้นหาตาม className และพบอาร์เรย์;
2. เนื้อหาการดำเนินการ:
1. องค์ประกอบที่ไม่ใช่รูปแบบ:
(1) รับเนื้อหา:
การแจ้งเตือน (a.innerhtml); ได้รับรหัสและข้อความ HTML ในแท็กและเนื้อหาทั้งหมดในแท็กจะได้รับ
ตัวอย่างเช่น: มี div ในร่างกาย:
<div id = "me"> <b> ลองใช้ </b> </div>
ใช้ InnerHTML เพื่อรับเนื้อหาใน DIV ในสคริปต์:
var a = document.getElementById ("me");
การแจ้งเตือน (a.innerhtml);
ผลลัพธ์มีดังนี้:
การแจ้งเตือน (A.InnerText); ใช้ข้อความภายในเท่านั้น
การแจ้งเตือน (a.outerhtml); รวมเนื้อหาของแท็กเอง (ความเข้าใจง่าย ๆ )
(2) ตั้งค่าเนื้อหา:
a.innerhtml = "<font color = สีแดง> Hello World </font>";
หากผลลัพธ์มีดังนี้ด้วยรหัสเนื้อหาการตั้งค่าเนื้อหาใน DIV จะถูกแทนที่:
A.InnerText จะนำเสนอเนื้อหาตามที่เป็นอยู่
ล้างเนื้อหา: กำหนดสตริงว่างเปล่า
2. องค์ประกอบแบบฟอร์ม:
(1) มีสองวิธีในการรับเนื้อหา:
var t = document.f1.t1; แบบฟอร์มฟอร์มฟอร์มฟอร์ม ID เป็นอินพุตด้วย T1 ใน F1;
var t = document.getElementById ("id"); รับโดยตรงกับ ID
การแจ้งเตือน (T.Value); รับค่าค่าในอินพุต;
การแจ้งเตือน (t.innerhtml); รับค่าที่นี่ <textarea> </ytexarea>;
(2) ตั้งค่าเนื้อหา: t.value = "การเปลี่ยนแปลงเนื้อหา";
3. จุดความรู้เล็ก ๆ น้อย ๆ :
<a href = "http://www.baidu.com" onclick = "return false"> หันไปหา baidu </a>; หากเพิ่ม flase return มันจะไม่กระโดดค่าเริ่มต้นจะส่งคืนจริงจะกระโดด เช่นเดียวกับปุ่ม หากตั้งค่า Return Flase ในปุ่มการส่งจะไม่ถูกส่ง สิ่งนี้สามารถใช้ในการควบคุมการส่งการส่ง
3. คุณสมบัติการดำเนินงาน
ก่อนอื่นให้ใช้ ID ขององค์ประกอบเพื่อค้นหาองค์ประกอบและเก็บไว้ในตัวแปร:
var a = document.getElementById ("id");
จากนั้นคุณสามารถใช้งานคุณสมบัติขององค์ประกอบ:
A.SetAttribute ("ชื่อแอตทริบิวต์", "ค่าแอตทริบิวต์"); ตั้งค่าแอตทริบิวต์เพิ่มหรือเปลี่ยนแปลง
A.getAttribute ("ชื่อแอตทริบิวต์"); รับค่าของแอตทริบิวต์
A.RemoveAttribute ("ชื่อแอตทริบิวต์"); ลบแอตทริบิวต์
ตัวอย่างที่ 1: ทำคำถาม หากคำตอบอินพุตถูกต้องจะปรากฏขึ้นอย่างถูกต้องและข้อผิดพลาดจะปรากฏขึ้นข้อผิดพลาด
นี่คือแอตทริบิวต์ DAAN ที่เขียนไว้ในข้อความซึ่งมีค่าคำตอบ เมื่อคลิกเพื่อตรวจสอบคำตอบการป้อนเนื้อหาโดย CHEAK จะเหมือนกับคำตอบ:
รหัสในร่างกาย:
<Form> การก่อตั้งสาธารณรัฐจีนเป็นปีใด <input type = "text" daan = "1912" value = "" id = "t1" name = "t1" /> <อินพุต type = "ปุ่ม" onclick = "ตรวจสอบ ()" id = "t2" name = "t2" value = "ตรวจสอบคำตอบ" /> < /form>
รหัสใน JS:
การตรวจสอบฟังก์ชั่น () {var a = document.getElementById ("t1"); var a1 = a.value; var a2 = a.getAttribute ("daan"); if (a1 == a2) {แจ้งเตือน ("ขอแสดงความยินดีกับการตอบอย่างถูกต้อง!"); } else {Alert ("Idiot!"); -ผลลัพธ์เมื่อคำตอบถูกต้อง:
ตัวอย่างที่ 2: ปุ่มตกลงนับถอยหลังถึง 10 วินาทีปุ่มตกลงจะส่งมา ที่นี่แอตทริบิวต์การดำเนินการ: ปิดใช้งานใช้เพื่อเปลี่ยนสถานะของปุ่ม เมื่อปิดใช้งาน = "ปิดใช้งาน" ไม่สามารถใช้ได้
รหัสในร่างกาย:
<form> <อินพุต type = "subment" id = "b1" name = "b1" value = "เห็นด้วย (10)" disabled = "ปิดใช้งาน" /> </form>
รหัสใน JS:
var n = 10; var a = document.getElementById ("b1"); ฟังก์ชั่น bian () {n--; if (n == 0) {A.RemoveAttribute ("ปิดใช้งาน"); A.value = "เห็นด้วย"; กลับ; } else {a.value = "เห็นด้วย ("+n+")"; window.settimeout ("bian ()", 1,000); }} window.settimeout ("bian ()", 1000);ผลลัพธ์ของการรัน:
4. รูปแบบการทำงาน
ก่อนอื่นให้ใช้ ID ขององค์ประกอบเพื่อค้นหาองค์ประกอบและเก็บไว้ในตัวแปร:
var a = document.getElementById ("id");
จากนั้นคุณสามารถใช้งานคุณสมบัติขององค์ประกอบ:
. - ใช้งานคุณสมบัติของสไตล์ ID นี้
สไตล์เป็นสไตล์ใน CSS และทุกสไตล์สามารถใช้งานได้ด้วยรหัส
document.body.style.backgroundColor = "color"; สีพื้นหลังของหน้าต่างทั้งหมด
คลาสของสไตล์การทำงาน: a.className = "className in style sheet" ทำงานเป็นชุดของสไตล์
ตัวอย่างที่ 1: การสลับภาพการแสดงผลอัตโนมัติและด้วยตนเอง
รหัสในร่างกายเพื่อสร้าง div ที่มีภาพพื้นหลังและวัตถุควบคุมทั้งสองด้าน:
<div id = "tuijian" style = "background-image: url (imges/tj1.jpg);"> <div id = "p1" onclick = "dodo (-1)"> </div> <div id = "p2" onclick = "1)"
รหัสในสไตล์ชีท:
<style type = "text/css"> *{margin: 0px auto; Padding: 0px; Font-Family: "Microsoft Yahei"; } #tuijian {Width: 760px; ความสูง: 350px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; }. หน้า {top: 200px; พื้นหลังสี:#000; ตำแหน่งพื้นหลัง: ศูนย์; พื้นหลังซ้ำ: ไม่ทำซ้ำ; ความทึบ: 0.4; ความกว้าง: 30px; ความสูง: 60px; } #p1 {background-image: url (imges/prev.png); ลอย: ซ้าย; มาร์จิ้น: 150px 0px 0px 10px; } #p2 {background-image: url (imges/next.png); ลอย: ขวา; มาร์จิ้น: 150px 10px 0px; } </style>รหัสใน JS ส่วนใหญ่เรียกฟังก์ชั่น huan () ทุก ๆ 3 วินาทีเพื่อปรับเปลี่ยนรูปแบบของภาพพื้นหลัง เมื่อคลิกสวิตช์ซ้ายและขวามันจะถูกสลับด้วยตนเองและสวิตช์อัตโนมัติหยุด:
<script language = "JavaScript"> var jpg = new Array (); jpg [0] = "url (imges/tj1.jpg)"; jpg [1] = "url (imges/tj2.jpg)"; jpg [2] = "url (imges/tj3.jpg)" var tjimg = document if (xb == jpg.length) {xb = 0; } tjimg.style.backGroundImage = jpg [xb]; if (n == 0) {var id = window.settimeout ("huan ()", 3000); }} ฟังก์ชั่น dodo (m) {n = 1; xb = xb+m; if (xb <0) {xb = jpg.length-1; } อื่นถ้า (xb> = jpg.length) {xb = 0; } tjimg.style.backGroundImage = jpg [xb]; } window.settimeout ("huan ()", 3000); </script>เอฟเฟกต์มีดังนี้:
5. การดำเนินงานองค์ประกอบที่เกี่ยวข้อง:
var a = document.getElementById ("id"); ค้นหา a;
var b = a.nextsibling, ค้นหาองค์ประกอบเพียร์ถัดไปของ a, ให้ความสนใจกับพื้นที่ที่มีช่องว่าง;
var b = a.previoussibling, ค้นหาองค์ประกอบเพียร์ก่อนหน้าของ A, ให้ความสนใจกับช่องว่าง;
var b = a.parentNode, ค้นหาองค์ประกอบหลักก่อนหน้าของ a;
var b = a.childnodes พบอาร์เรย์และพบองค์ประกอบลูกระดับต่อไปของ A;
var b = a.firstchild, องค์ประกอบลูกคนแรก, LastChild Last, ChildNodes [n] ค้นหาจำนวนครั้งแรก;
การแจ้งเตือน (โหนด [i] อินสแตนซ์ของข้อความ); ตรวจสอบว่าเป็นข้อความหรือไม่ส่งกลับจริงไม่ใช่ flase ใช้ถ้าจะพิจารณาว่าค่าของมันเป็นเท็จและคุณสามารถลบช่องว่างได้
6. การสร้างการเพิ่มและการลบองค์ประกอบ:
var a = document.getElementById ("id"); ค้นหา a;
var obj = document.createElement ("ชื่อแท็ก"); สร้างองค์ประกอบ
obj.innerhtml = "Hello World"; เมื่อเพิ่มคุณต้องสร้างองค์ประกอบก่อน
A.AppendChild (OBJ); เพิ่มองค์ประกอบเด็กลงใน
A.RemoveChild (OBJ); ลบองค์ประกอบเด็ก
A.SelectedIndex ในรายการ: จำนวนที่เลือก;
//a.options [SselectIndex] ลบวัตถุตัวเลือกออกจากตัวห้อยตามดัชนี
7. การดำเนินการสตริง:
var s = สตริงใหม่ (); หรือ var s = "aaaa";
var s = "Hello World";
การแจ้งเตือน (S.ToLowerCase ()); ไปยังตัวพิมพ์เล็ก touppercase () เป็นตัวพิมพ์ใหญ่
การแจ้งเตือน (S.Substring (3,8)); สกัดกั้นจากตำแหน่งที่สามไปยังตำแหน่งที่แปด
การแจ้งเตือน (S.Substr (3,8)); เริ่มสกัดกั้นจากตำแหน่งที่สามสกัดกั้นความยาวแปดตัวและอย่าเขียนตัวเลขต่อไปนี้ไปยังจุดสิ้นสุด
S.Split (''); ถอดตัวละครตามอักขระที่ระบุไว้ในอาร์เรย์และเรียงลำดับโดยอัตโนมัติ
S.Length เป็นคุณสมบัติ
s.indexof ("โลก"); เหตุการณ์ครั้งแรกของโลกในสตริงไม่กลับ -1
s.lastindexof ("o"); o โดยที่เกิดครั้งสุดท้ายของ s.lastindexof ("o"); o ในสตริง
8. การดำเนินการวันที่และเวลา
var d = วันที่ใหม่ (); เวลาปัจจุบัน
d.setualear (2015,11,6);/*ลบ 1 การตั้งค่าในเดือนที่คุณต้องการตั้งค่า*/
d.getlyear: ใช้เวลาทั้งปี
d.getMonth (): ใช้เวลาหนึ่งเดือนและยิ่งคุณได้รับน้อยลง
d.getDate (): ใช้ท้องฟ้า;
d.getday (): ใช้วันของสัปดาห์
D.GetHours (): ใช้เวลาชั่วโมง
d.getMinutes (): ใช้เวลานาที; d.getSeconds (): ใช้เวลาวินาที
d.setualear (): ตั้งค่าปีและให้ความสนใจกับ -1 เมื่อตั้งค่าเดือน
9. การทำงานของฟังก์ชั่นทางคณิตศาสตร์
Math.Ceil (); จำนวนเต็มที่เล็กที่สุดมากกว่าทศนิยมปัจจุบัน
Math.floor (); จำนวนเต็มที่ใหญ่ที่สุดของจำนวนทศนิยมในปัจจุบันของปลาตัวเล็ก
Math.sqrt (); เปิดยกกำลังสอง
Math.Round (); กลม(); กลม
Math.random (); หมายเลขสุ่มระหว่าง 0-1
10. เคล็ดลับ
คำพูดสองครั้งด้านนอกและคำพูดสองครั้งภายในจะเปลี่ยนเป็นคำพูดเดียว
เมื่อตั้งค่าความสูงของแถวใน DIV ไม่ว่าการตั้งค่าจะสูงแค่ไหนแถวที่ถูกครอบครองอยู่ในตำแหน่งกลางโดยค่าเริ่มต้น (กลางพื้นที่ด้านบนและล่างของ Div - [ค่าเริ่มต้น] เป็นศูนย์กลางในแนวตั้ง)
ค่าที่นำออกจากกล่องข้อความเป็นสตริงและจำเป็นต้องแปลงเป็นตัวเลขโดยใช้ ParseInt ()
S.Match (reg); S หมายถึงสตริง, reg แสดงถึงสตริงและการจับคู่ทั้งสอง หากทั้งสองสตริงไม่ตรงกันจะส่งคืนค่าว่าง
คำอธิบายโดยละเอียดข้างต้นของวัตถุ JavaScript-Dom Operation-Window.Document คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น