วิธีใช้ HTML & ด้วย Shadow DOM
ช่อง HTML เป็นหนึ่งในมาตรฐานที่โดดเด่นที่สุดที่ทำโดย W3C รวมกับมาตรฐาน W3C อันน่าประทับใจอีกตัวหนึ่งที่เรียกว่า แม่แบบ, และคุณมีการผสมผสานที่ยอดเยี่ยมในการทำงานกับ ความสามารถในการ สร้างและเพิ่มองค์ประกอบ HTML ไปที่หน้า ใช้ JavaScript เป็นงานที่จำเป็นและสำคัญ.
มันจะมีประโยชน์เมื่อมีข้อมูลโค้ดถึง ปรากฏเฉพาะในบางช่วงเวลา, หรือเมื่อคุณไม่ต้องการพิมพ์องค์ประกอบ HTML ที่มีโครงสร้างคล้ายกันหลายร้อยรายการ แต่ต้องการ ทำให้กระบวนการเป็นอัตโนมัติ.
การสร้างองค์ประกอบ HTML ใน JavaScript คือ ไม่ถูกใจ. มันเป็นเรื่องยุ่งยากที่จะต้องตรวจสอบและตรวจสอบอีกครั้งหากคุณครอบคลุมแท็กทั้งหมดวางไว้ในลำดับที่ถูกต้องทั้งหมดมีทั้งหมดเพียง เกินไป มากในการพิมพ์และติดตาม ความวุ่นวายนี้อย่างไร, ได้ทางออก เมื่อ แท็กปรากฏ หากสิ่งที่ต้องการจะเป็น เพิ่มในหน้าแบบไดนามิก, คุณสามารถวางไว้ด้านในของ ธาตุ.
ในโพสต์นี้ฉันจะแสดงให้คุณเห็นว่าคุณสามารถใช้ แท็กพร้อมกับ JavaScript ถึง สร้างโรงงานตารางมินิ HTML ที่สามารถสร้างและเติมตารางที่คล้ายกันหลายร้อยตาราง.
แท็กถือรหัส HTML ที่ เบราว์เซอร์จะไม่แสดงผล จนกว่าจะถูกเพิ่มลงในเอกสารอย่างถูกต้องโดยใช้ JavaScript ธาตุ.
เงา DOM คล้ายกับ DOM ปกติ (โมเดลเอกสารแยกวิเคราะห์จาก HTML) มัน สร้างต้นไม้ที่มีขอบเขต (ต้นไม้เงา DOM) ที่มี รากของมันเอง และยังสามารถมี สไตล์ของตัวเอง.
เมื่อคุณแทรกต้นไม้เงา DOM เข้าไปในองค์ประกอบในเอกสารหลัก - องค์ประกอบนั้นจะถูกเรียกว่า โฮสต์เงา -, องค์ประกอบลูกทั้งหมดของโฮสต์เงาที่มีเครื่องหมาย สล็อต คุณลักษณะ (ไม่เหมือนกับที่กล่าวมาข้างต้น
Shadow DOM ที่เขียนบทความนี้ (กรกฎาคม 2017) คือ รองรับเฉพาะในเบราว์เซอร์ที่ใช้ WebKit และ Blink แต่คุณสามารถตรวจสอบสถานะที่แท้จริงของการสนับสนุนเบราว์เซอร์บน CanIUse ได้ตลอดเวลา.
การตั้งค่า HTML
ยังคงสับสนอยู่ใช่ไหม มาดูโค้ดกันหน่อยเริ่มจาก ธาตุ.
ภายใน ภายในเทมเพลต, ฉันยังเพิ่ม สไตล์พื้นฐานบางอย่าง สำหรับตารางโดยใช้ , มี ดี ใช้เป็นพิมพ์เขียว สำหรับ สร้างบางตาราง ที่จะถูกเพิ่มลงในเอกสาร มี
และ ) ทำหน้าที่เป็นตัวแทน สำหรับชื่อคอลัมน์และค่าของเซลล์ แต่ละช่องมีเอกลักษณ์ ชื่อ คุณลักษณะที่ ระบุมัน.