บทความนี้อธิบายการใช้ JavaScript สำหรับโหนดหน้าเว็บ แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
1. แนวคิดพื้นฐาน
ส่วนนี้เรียกว่า "HTML DOM" HTML DOM ที่เรียกว่าเป็นกฎการโหลดหน้าเว็บซึ่งเป็นกฎซึ่งเป็นสูตรพื้นฐานสำหรับหน้าเว็บ
นั่นคือหน้าเว็บทั้งหมดจะต้องเขียนตามกฎของ: <html> <body> </body> </html> ... และยังโหลดตามกฎดังกล่าว
"หน้าเว็บหน้าเว็บ" ที่เรียกว่าเป็นคำอธิบายยอดนิยมของ "Dom Node" ตัวอย่างเช่นเนื้อหาภายใต้โหนด HTML คือเนื้อหาทั้งหมดระหว่าง <html> </html> และเนื้อหาภายใต้โหนดร่างกายเป็นเนื้อหาทั้งหมดระหว่าง <body> </body>
HTML DOM กำหนดดังนี้: 1. เอกสารทั้งหมดเป็นโหนดเอกสาร; 2. แต่ละแท็ก HTML (หมายถึง <body> <body> <body> และแท็ก HTML อื่น ๆ แทนที่จะเป็นแท็ก <Html> ง่าย ๆ ) เป็นโหนดองค์ประกอบ 3. ข้อความที่มีอยู่ในองค์ประกอบ HTML เป็นโหนดข้อความ 4. แต่ละแอตทริบิวต์ HTML เป็นโหนดแอตทริบิวต์
ตัวอย่างเช่นคุณสามารถวาดหน้าเว็บลงในทรีโหนด DOM ต่อไปนี้:
คำจำกัดความอย่างเป็นทางการของ HTML DOM มีดังนี้: HTML DOM คือตัวย่อของโมเดลวัตถุเอกสาร HTML และ HTML DOM เป็นโมเดลวัตถุเอกสารที่ใช้เป็นพิเศษกับ HTML/XHTML ผู้คนที่คุ้นเคยกับการพัฒนาซอฟต์แวร์สามารถเข้าใจ HTML DOM เป็นเว็บเพจ API มันถือว่าแต่ละองค์ประกอบในหน้าเว็บเป็นวัตถุเพื่อให้องค์ประกอบในหน้าเว็บสามารถรับหรือแก้ไขด้วยภาษาคอมพิวเตอร์ได้ ตัวอย่างเช่น JavaScript สามารถใช้ HTML DOM เพื่อแก้ไขเว็บเพจแบบไดนามิก
การใช้ JavaScript สามารถควบคุมการเพิ่มการลบการปรับเปลี่ยนและการค้นหาโหนดหน้าเว็บสำหรับโหนด DOM เหล่านี้ได้อย่างง่ายดาย
2. วัตถุประสงค์พื้นฐาน
ใช้ JavaScript เพื่อเพิ่มลบแก้ไขและตรวจสอบโหนดของหน้าเว็บ ในหน้าเว็บ:
1. ปุ่ม "เพิ่มโหนด" ในขณะที่เพิ่มตัวเลือกโหนดในเมนูแบบเลื่อนลงที่เกี่ยวข้องกับปุ่ม "แทนที่" หากมี 9 โหนดในหน้าเว็บจะไม่อนุญาตให้เพิ่มและคำเตือนป๊อปอัพ
2. ปุ่ม "ลบโหนดสุดท้าย" ในขณะที่ลดตัวเลือกโหนดในเมนูแบบเลื่อนลงที่เกี่ยวข้องกับ "แทนที่ปุ่ม"
3. ปุ่ม "แทนที่โหนดเนื้อหา" ก่อนอื่นเลือกโหนดเพื่อทำงานจากนั้นป้อนเนื้อหาที่จะถูกแทนที่และจะเปลี่ยนโหนดที่เกี่ยวข้อง
4. หากไม่มีโหนดในหน้าเว็บไม่อนุญาตให้มีการลบหรือเปลี่ยนการเปลี่ยนและจะได้รับคำเตือนแบบป๊อปอัพ
3. กระบวนการผลิต
โดยไม่ต้องกำหนดค่าสภาพแวดล้อมใด ๆ เพียงเขียนรหัสต่อไปนี้บนหน้าเว็บ รหัสเฉพาะมีดังนี้และจะอธิบายต่อไปนี้ในส่วน:
คัดลอกรหัสรหัสดังต่อไปนี้: <! doctype html public "-// w3c // pd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/pd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javascript">
var i = 0;
ฟังก์ชั่น createNode () {
ถ้า (i <9) {
i ++;
ตัวเลือก var = document.createElement ("ตัวเลือก");
Option.value = i;
Option.innerhtml = "Node" + i.toString ();
document.getElementById ("หมายเลข"). ภาคผนวก (ตัวเลือก);
var p = document.createElement ("P");
p.innerhtml = "โหนด" + i.toString ();
document.getElementById ("D"). AppendChild (P);
} อื่น
การแจ้งเตือน ("ฉันสบายดีมีโหนดมากเกินไปฉันไม่สามารถทำได้ ~");
-
ฟังก์ชั่น Removenode () {
ถ้า (i> 0) {
ฉัน--;
var s = document.getElementById ("หมายเลข");
S.RemoveChild (S.LastChild);
var d = document.getElementById ("D");
D.RemoveChild (D.LastChild);
} อื่น
การแจ้งเตือน ("ไม่มีโหนดลบเส้นด้าย ~");
/*var ps = d.getElementsByTagname ("p");*/
/*document.getElementByid("d" ).RemoveChild(PS'S 9]); -
-
ฟังก์ชัน replacEnode () {
ถ้า (i> 0) {
var d = document.getElementById ("D");
var p = document.createElement ("P");
p.innerhtml = document.getElementById ("ข้อความ") ค่า;
var ps = d.getElementByTagname ("P")
d.replacechild (p, ps [document.getElementById ("number"). ค่า - 1]);
} อื่น
การแจ้งเตือน ("ไม่มีโหนด, แทนที่เส้นด้าย ~");
-
</script>
</head>
<body>
<อินพุต type = "button" value = "สร้างโหนด" onClick = "createNode ()" />>>
<input type = "button" value = "ลบโหนดสุดท้าย" onclick = "removenode ()" />
<เลือก id = "number"> </select>
<อินพุต type = "text" id = "text" />>>
<input type = "button" value = "replacenode content" onclick = "replacenode ()" />
<div id = "d">
</div>
</body>
</html>
1. <body> โหนด
คัดลอกรหัสดังนี้: <body>
<!-ปุ่ม x2 ปุ่มทั้งสองมีการกระทำ onclick ชี้ไปที่ฟังก์ชั่นที่เกี่ยวข้อง->
<อินพุต type = "button" value = "สร้างโหนด" onClick = "createNode ()" />>>
<input type = "button" value = "ลบโหนดสุดท้าย" onclick = "removenode ()" />
<!-เมนูแบบหล่นลงโดยไม่มีโหนดเด็ก <เลือก> จะถูกเพิ่มในเวลาเดียวกันโดยโหนด CreateNode () -
<เลือก id = "number"> </select>
<!-กล่องอินพุต x1 ให้ความสนใจกับการตั้งค่า ID, replacEnode () เพื่อรับค่าของกล่องข้อความนี้->
<อินพุต type = "text" id = "text" />>>
<!-ปุ่ม x1 เหมือนกับปุ่ม x2->
<input type = "button" value = "replacenode content" onclick = "replacenode ()" />
<!-เลเยอร์ที่ว่างเปล่าที่ไม่มีอะไรเป็นโหนดหลักของ <p> เด็กทั้งหมดของโหนด <div> นี้จะถูกเพิ่มเข้ามา
<div id = "d">
</div>
</body>
2. <head> โหนด
คัดลอกรหัสดังนี้: <head>
<!-การเข้ารหัสและชื่อเรื่องที่ใช้โดยหน้าเว็บไม่สำคัญคีย์คือส่วนสคริปต์ JS ต่อไปนี้->
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javascript">
/*บันทึกตัวแปรส่วนกลางของจำนวนโหนดที่มีอยู่ในหน้าเว็บปัจจุบัน*//
var i = 0;
/*มี 3 ฟังก์ชั่นด้านล่าง เมื่อคลิกปุ่มจะถูกเรียกว่า*/
ฟังก์ชั่น createNode () {
/*หากมีน้อยกว่า 9 โหนดในหน้าเว็บมันจะใช้งานได้ไม่เช่นนั้นหน้าต่างป๊อปอัพ*//
ถ้า (i <9) {
/*เพิ่มโหนดอีกหนึ่งโหนดสำหรับแต่ละบันทึกตัวแปรส่วนกลาง i+1*//
i ++;
/*สร้างโหนดตัวเลือกจากนั้นชื่อตัวชี้ก็เป็นตัวเลือก*//
ตัวเลือก var = document.createElement ("ตัวเลือก");
/*ประกาศแอตทริบิวต์ค่าของโหนดตัวเลือกที่สร้างขึ้นคือค่าปัจจุบันของ i นั่นคือเมื่อ i = 1 มีโหนดลูกเช่น <ตัวเลือกค่า = 1> </petion> -
/*หน้าเว็บบางหน้าบอกว่าการใช้เมธอด setAttribute () ในการตั้งค่าแอตทริบิวต์ แต่การฝึกฝนโดยส่วนตัวนั้นไม่ใช่เรื่องง่ายที่จะใช้*/
Option.value = i;
/*ตั้งค่าข้อความด้านล่างโหนดตัวเลือก หลังจากคำสั่งนี้โหนดลูกจะกลายเป็น <ค่าตัวเลือก = 1> node1 </potion>*//
Option.innerhtml = "Node" + i.toString ();
/*<elect> ID ของโหนดพาเรนต์คือหมายเลข คำสั่งนี้ต้องการให้ <ตัวเลือกค่า = 1> node1 </potion>*/ถูกเพิ่มลงในโหนดพาเรนต์ใน <Select> </Select>
document.getElementById ("หมายเลข"). ภาคผนวก (ตัวเลือก);
/*หลักการเหมือนกับข้างต้น เพิ่ม <p> โหนดลูกภายใต้โหนด <Div> parent node และค่าข้อความภายใต้ <p> โหนดลูกคือ node1*/
var p = document.createElement ("P");
p.innerhtml = "โหนด" + i.toString ();
document.getElementById ("D"). AppendChild (P);
} อื่น
การแจ้งเตือน ("ฉันสบายดีมีโหนดมากเกินไปฉันไม่สามารถทำได้ ~");
-
ฟังก์ชั่น Removenode () {
/*หากมีมากกว่า 0 โหนดในหน้าเว็บนั่นคือมีโหนดและจากนั้นมีเพียงหน้าต่างป๊อปอัพเท่านั้น
ถ้า (i> 0) {
/*สำหรับการลดโหนดทุกครั้งตัวแปรส่วนกลาง I-1 ของหน้าเว็บปัจจุบันจะถูกบันทึกไว้
ฉัน--;
/*กำหนดตัวชี้ s ไปยังโหนดพาเรนต์ของ <elect>*/
var s = document.getElementById ("หมายเลข");
/*ลบโหนดลูกสุดท้ายภายใต้โหนดพาเรนต์ของ <elect> นั่นคือ <petion> หากคุณต้องการลบอันแรกพารามิเตอร์จะกลายเป็น s.firstchild*/
S.RemoveChild (S.LastChild);
/*หลักการเดียวกับข้างต้นลบโหนดลูกสุดท้ายภายใต้ชั้น <div> เลเยอร์*//
var d = document.getElementById ("D");
D.RemoveChild (D.LastChild);
/*หากคุณต้องการลบ 8th <p> ภายใต้ <div> โปรดทำดังนี้*/
/*PS เป็นตัวชี้ไปที่ <p> ชุดโหนดลูก*//
/*var ps = d.getElementsByTagname ("p");*/
/*document.getElementByid("d" ).RemoveChild(PS'S 9]); -
} อื่น
การแจ้งเตือน ("ไม่มีโหนดลบเส้นด้าย ~");
-
ฟังก์ชัน replacEnode () {
/*หากมีมากกว่า 0 โหนดในหน้าเว็บนั่นคือมีโหนดและจากนั้นมีเพียงหน้าต่างป๊อปอัพเท่านั้น
ถ้า (i> 0) {
/*กำหนดตัวชี้ไปยังโหนดพาเรนต์ d*/
var d = document.getElementById ("D");
/*สร้าง <p> </p> โหนด*/
var p = document.createElement ("P");
/*รับเนื้อหาที่ป้อนในกล่องข้อความและใส่ไว้ใน <p> </p> โหนด*//
p.innerhtml = document.getElementById ("ข้อความ") ค่า;
/*PS เป็นตัวชี้ไปยังชุดโหนดเด็ก <p>
var ps = d.getElementByTagname ("P")
/*ให้โหนดที่คุณเพิ่งสร้างแทนที่โหนด nth <p> ภายใต้ <div> โดยที่ n คือค่า -1 ที่เลือกในรายการดรอปดาวน์ตอนนี้ เหตุผลของ -1 คือการนับจำนวนโหนดเด็กและกลุ่มเด็กเริ่มต้นจาก 0 ในขณะที่การนับมนุษย์ของเราเริ่มต้นจาก 1 */
d.replacechild (p, ps [document.getElementById ("number"). ค่า - 1]);
} อื่น
การแจ้งเตือน ("ไม่มีโหนด, แทนที่เส้นด้าย ~");
-
</script>
</head>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน