1. GetElementSbyName (): รับชื่อ
-
ตัวอย่าง:
<p name = "pn"> hello </p> <p name = "pn"> สวัสดี </p> <p name = "pn"> สวัสดี </p> <script> ฟังก์ชั่น getName () {var count = document.getElementByName ("pn"); การแจ้งเตือน (count.length); var p = นับ [2]; P.InnerHtml = "โลก"; } </script>ผลลัพธ์: อินเทอร์เฟซพิมพ์สาม helloes มาพร้อมกับกล่องพรอมต์ "3" เมื่อคลิกตกลงเนื้อหาที่แสดงบนอินเทอร์เฟซจะกลายเป็นสวัสดีโลกสวัสดีโลก
-
2. GetElementByTagname (): รับองค์ประกอบ
-
ตัวอย่าง
<p> สวัสดี </p> <p> สวัสดี </p> <p> สวัสดี </p> <prict> ฟังก์ชั่น getName () {var count = document.getElementByTagname ("P"); การแจ้งเตือน (count.length); var p = นับ [2]; P.InnerHtml = "โลก"; } </script>ผลลัพธ์: อินเทอร์เฟซพิมพ์สาม helloes มาพร้อมกับกล่องพรอมต์ "3" เมื่อคลิกตกลงเนื้อหาที่แสดงบนอินเทอร์เฟซจะกลายเป็นสวัสดีโลกสวัสดีโลก
-
3. GetAttribute (): รับแอตทริบิวต์องค์ประกอบ
-
ตัวอย่าง
<a id = "Aid"> </a> <script> ฟังก์ชั่น getAttr1 () {var anode = document.getElementById ("AID"); var attr = anode.getAttribute ("id"); การแจ้งเตือน ("รหัสของ A คือ:"+attr); } ฟังก์ชั่น getAttr2 () {var anode = document.getElementById ("AID"); var attr = anode.getAttribute ("title"); การแจ้งเตือน ("เนื้อหาชื่อของ A คือ:"+attr); } getAttr1 (); getAttr2 (); </script>ผลลัพธ์: กล่องพรอมต์ "A id คือ: Aid" หลังจากคลิกตกลงกล่องพรอมต์ "เนื้อหาชื่อเรื่อง A คือ: รับแอตทริบิวต์แท็กของ A"
-
4.SetAttribute () ตั้งค่าแอตทริบิวต์องค์ประกอบ
-
ตัวอย่าง
<a id = "Aid2"> Aid2 </a> <script> function setattr () {var anode = document.getElementById ("Aid2"); anode.setAttribute ("title", "การตั้งค่าแบบไดนามิกของแอตทริบิวต์ชื่อเรื่อง"); var attr = anode.getAttribute ("title"); การแจ้งเตือน ("การตั้งค่าแบบไดนามิกของค่าชื่อเรื่องคือ:"+attr); } setAttr (); </script>ผลลัพธ์: กล่องพรอมต์ "ค่าการตั้งค่าแบบไดนามิกคือ: ตั้งค่าคุณสมบัติชื่อเรื่องแบบไดนามิกของ" ป๊อปอัพ
-
5.childnodes (): เข้าถึงโหนดลูก
-
ตัวอย่าง
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <lible> <live> ฟังก์ชั่น getChildNode () {var childNode = document.getElementsByTagname ("ul") [0] .childNodes; การแจ้งเตือน (childNode.length); การแจ้งเตือน (ChildNode [0] .NodeType); } getChildNode (); </script>ผลลัพธ์: อินเทอร์เฟซพิมพ์กล่องโต้ตอบ "3" ปรากฏขึ้นบน. 1.2.3 แล้วกดตกลงเพื่อปรากฏขึ้น
-
6.ParentNode (): เข้าถึงโหนดพาเรนต์
-
ตัวอย่าง
<div> <p id = "PID"> </p> </div> </script> ฟังก์ชั่น getParentNode () {var div = document.getElementById ("PID"); การแจ้งเตือน (div.parentNode.nodename); } getParentNode (); </script>ผลลัพธ์: กล่องพรอมต์ปรากฏขึ้น: Div.
-
7.CreateElement (): สร้างโหนดองค์ประกอบ
-
ตัวอย่าง:
<script> function createNode () {var body = document.body; var input = document.createElement ("input"); input.type = "ปุ่ม"; input.value = "ปุ่ม"; Body.AppendChild (อินพุต); // แทรกโหนด} createNode (); </script>ผลลัพธ์: ปุ่มปรากฏขึ้น
-
8. CreateTextNode (): สร้างโหนดข้อความ
-
ตัวอย่าง:
<script> function createNode () {var element = document.createElement ("div"); element.className = "ข้อความ"; var textNode = document.createTextNode ("Hello World!"); Element.AppendChild (TextNode); document.body.appendchild (องค์ประกอบ); } createNode (); </script>การวิเคราะห์รหัส: ตัวอย่างนี้สร้างองค์ประกอบ <div> ใหม่และระบุแอตทริบิวต์คลาสด้วยค่าของ "ข้อความ" จากนั้นโหนดข้อความอื่นจะถูกสร้างและเพิ่มลงในองค์ประกอบที่สร้างขึ้นก่อนหน้านี้ ขั้นตอนสุดท้ายคือการเพิ่มองค์ประกอบนี้ลงในองค์ประกอบ <body> ในเอกสารเพื่อให้คุณสามารถดูองค์ประกอบและโหนดข้อความที่สร้างขึ้นใหม่ในเบราว์เซอร์
ผลลัพธ์: หน้าแสดง Hello World
-
9.insertbefore (): แทรกโหนด
-
ตัวอย่าง
<div id = "div"> <p id = "pid"> p องค์ประกอบ </p> </div> <script> ฟังก์ชั่น addNode () {var div = document.getElementById ("div"); var node = document.getElementById ("PID"); var newNode = document.createElement ("P"); newNode.innerhtml = "การแทรกแบบไดนามิกขององค์ประกอบ p"; div.insertbefore (newnode, โหนด); } addNode (); </script>ผลลัพธ์: อินเทอร์เฟซพิมพ์ออกมา: แทรกองค์ประกอบ P แบบไดนามิก
องค์ประกอบ P
-
10.removeChild (): ลบโหนด
-
ตัวอย่าง
<div id = "div"> <p id = "pid"> p องค์ประกอบ </p> </div> <script> ฟังก์ชั่น Removenode () {var div = document.getElementById ("div"); var p = div.removeChild (div.childnodes [1]); } Removenode (); </script>ผลลัพธ์: อินเทอร์เฟซไม่แสดงอะไร
-
11.OffSetheight: ขนาดหน้าเว็บ
12.Scrollheight: ขนาดหน้าเว็บ
-
ตัวอย่าง:
<script> ฟังก์ชั่น getsize () {var width = document.documentelement.offsetWidth || document.body.offsetWidth; // แก้ปัญหาความเข้ากันได้ var height = document.documentelement.offSetheight || document.offSetheight; การแจ้งเตือน (ความกว้าง+","+ความสูง); } getSize (); </script>แสดงผลลัพธ์:
บทความนี้ส่วนใหญ่แนะนำ JS DOM เพื่อควบคุมองค์ประกอบ HTML เนื้อหาของบทความส่วนใหญ่รวมถึง DOM, HTML ฯลฯ บทความมาจากอินเทอร์เน็ตโปรดดูที่มัน