JavaScript - การดำเนินการ DOM - Window.Document รายละเอียดวัตถุ

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 มากขึ้น