วิธีการ JavaScript document.querySelector() ส่งคืนองค์ประกอบแรกในเอกสาร (วัตถุองค์ประกอบ) ที่ตรงกับตัวเลือกที่ระบุหรือกลุ่มของตัวเลือก หากไม่พบรายการที่ตรงกัน ระบบจะส่งคืนค่าว่าง
โปรดทราบว่าไม่อนุญาตให้ใช้องค์ประกอบหลอก CSS เป็นตัวเลือกในการค้นหาองค์ประกอบ ในกรณีนี้ ค่าที่ส่งคืนจะเป็นโมฆะเสมอ
หากคุณต้องการรายการองค์ประกอบทั้งหมดที่ตรงกับตัวเลือกหรือตัวเลือกที่ระบุ ให้ใช้เมธอด querySelectorAll() เพื่อดำเนินการนี้
นอกจากนี้ เมธอด .querySelector() ยังถูกกำหนดไว้บนออบเจ็กต์ Element อีกด้วย ด้วยเหตุนี้จึงสามารถเรียกใช้บนอิลิเมนต์ใดก็ได้ ไม่ใช่แค่ออบเจ็กต์เอกสารเท่านั้น องค์ประกอบที่ถูกเรียกจะถูกใช้เป็นองค์ประกอบรูทสำหรับการค้นหา
เบราว์เซอร์รองรับไวยากรณ์ JavaScript: document .querySelector( ตัวเลือก) ตัวเลือก- ตัวเลือกข้อกำหนดสตริงค่าพารามิเตอร์ API ระดับ 1| ตัวเลือก | อาร์กิวเมนต์ต้องตรงกับสตริงตัวเลือกที่ถูกต้องที่มีตัวเลือกตั้งแต่หนึ่งตัวขึ้นไป เมื่อระบุตัวเลือกหลายตัว คุณต้องคั่นค่าด้วยเครื่องหมายจุลภาค ในกรณีนี้ องค์ประกอบแรกที่พบจากตัวเลือกที่กำหนดจะถูกเลือก หากด้วยเหตุผลบางอย่างคุณใช้อักขระในชื่อตัวเลือกที่ไม่ได้เป็นส่วนหนึ่งของไวยากรณ์มาตรฐาน ซีเอสเอสจากนั้นเมื่อค้นหาอักขระดังกล่าวจะต้องหลีกหนีโดยใช้อักขระแบ็กสแลช ( "\" - เนื่องจากแบ็กสแลชยังเป็นอักขระพิเศษ ( หนี) วี จาวาสคริปต์จากนั้นเมื่อป้อนสตริงตามตัวอักษร จะต้อง Escape สองครั้ง พารามิเตอร์ที่จำเป็น |
ในตัวอย่างนี้ การใช้แอตทริบิวต์เหตุการณ์ onclick เมื่อมีการคลิกปุ่ม (องค์ประกอบ HTML) เราจะเรียกใช้ฟังก์ชัน myFunc() ซึ่งใช้ จาวาสคริปต์เอกสาร .querySelector() วิธีการเลือกองค์ประกอบต่อไปนี้:
- อันดับแรกองค์ประกอบที่มีคลาสบล็อกในเอกสารและการตั้งค่า สีดำสีพื้นหลังขององค์ประกอบที่พบ
- อันดับแรกองค์ประกอบจากตัวเลือกที่กำหนด (องค์ประกอบที่มีคลาสเป็นอันดับแรก องค์ประกอบที่มีคลาสบล็อก ) และตั้งค่าสีข้อความขององค์ประกอบที่พบเป็นสีแดง ในกรณีนี้ก็จะถูกเลือก อันดับแรกองค์ประกอบที่พบจากตัวเลือกที่กำหนด
- องค์ประกอบนั้นก็คือ ที่สององค์ประกอบลูกขององค์ประกอบหลักและตั้งค่าเป็นองค์ประกอบที่พบ สีเขียวสีข้อความ
- องค์ประกอบที่เป็นองค์ประกอบสุดท้ายขององค์ประกอบหลักและตั้งค่าเป็นองค์ประกอบที่พบ สีฟ้าสีข้อความ
ผลลัพธ์ของตัวอย่างของเรา
ดังที่คุณทราบ เมื่อพัฒนาแอปพลิเคชัน JS ขนาดใหญ่ที่ใช้ไลบรารี jQuery ยอดนิยม ก็ถึงเวลาที่ปัญหาด้านประสิทธิภาพจะรุนแรงขึ้น ความพยายามทั้งหมดตกอยู่ที่อ้อมกอดของผู้สร้างโปรไฟล์ ทุกความท้าทายได้รับการตรวจสอบอย่างถี่ถ้วน ทุกชิ้นส่วนของการนำไปใช้งานจะถูกดมกลิ่นจากทุกด้านและแก้ไข แต่ปัญหาไม่ได้มาจากทิศทางที่นักพัฒนา 90% คาดหวัง Selectors - มีมากมายในคำนี้
เรามาดูกันว่าเวทมนตร์นี้ทำงานอย่างไร และเหตุใดการค้นหาองค์ประกอบ DOM จึงทำให้ประสิทธิภาพของแอปพลิเคชันลดลง
ฉันขอยกตัวอย่างง่ายๆ:
ตัวเลือกทั้งสองที่แสดงนั้นแทบไม่มีความแตกต่างกันและจะส่งกลับชุดองค์ประกอบเดียวกัน อย่างไรก็ตาม ตัวเลือกแรกจะส่งกลับผลลัพธ์ของ querySelectorAll() และตัวเลือกที่สองจะส่งกลับผลลัพธ์ของการกรองตามปกติตามองค์ประกอบ
$("#my_form อินพุต")
$("#my_form input") การแยกวิเคราะห์ตัวเลือกและการค้นหา หาก querySelectorAll() ล้มเหลว Sizzle จะพยายามใช้ฟังก์ชันเบราว์เซอร์ปกติ getElementById(), getElementsByName(), getElementsByTagName() และ getElementByClass() ในกรณีส่วนใหญ่ก็เพียงพอแล้ว แต่ (sic!) ใน IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
โดยทั่วไป Sizzle จะแยกวิเคราะห์ตัวเลือกจากขวาไปซ้าย เพื่อแสดงให้เห็นคุณลักษณะนี้ ต่อไปนี้คือตัวอย่างบางส่วน:
$(".divs.my_class")
ก่อนอื่นมันจะค้นหาองค์ประกอบ .my_class แล้วกรองเฉพาะองค์ประกอบที่มี .div อยู่ในพาเรนต์ ดังที่เราเห็น นี่เป็นการดำเนินการที่ค่อนข้างแพง และการใช้บริบทไม่สามารถแก้ปัญหาได้ (เราจะพูดถึงบริบทด้านล่าง)
อย่างที่ฉันบอกไป - ในกรณีส่วนใหญ่ Sizzle จะแยกวิเคราะห์ตัวเลือกจากขวาไปซ้าย แต่ไม่ใช่เมื่อใช้องค์ประกอบที่มี ID:
$("#divs .my_class")
ในกรณีนี้ ตัวเลือกจะทำงานตามที่คาดไว้ และองค์ประกอบ #divs จะถูกนำมาใช้เป็นบริบททันที พารามิเตอร์ตัวที่สองที่ส่งผ่านพร้อมกับตัวเลือกไปยังฟังก์ชัน $() เรียกว่าบริบท ได้รับการออกแบบมาเพื่อจำกัดการค้นหาองค์ประกอบให้แคบลง อย่างไรก็ตาม ในระหว่างการแยกวิเคราะห์ บริบทจะถูกเชื่อมต่อที่จุดเริ่มต้นของตัวเลือก ซึ่งไม่ได้ให้ประโยชน์ใดๆ เลย ชุดค่าผสมการใช้บริบทที่ชนะเลิศคือตัวเลือกที่ถูกต้องสำหรับ querySelectorAll() เนื่องจากฟังก์ชันนี้สามารถใช้ได้ไม่เพียงแต่ในนามของเอกสารเท่านั้น แต่ยังรวมถึงองค์ประกอบด้วย จากนั้นตัวเลือกที่มีบริบทจะถูกแปลงเป็นรูปเป็นร่างเป็นสิ่งก่อสร้างต่อไปนี้:
$(".divs", document.getElementById("wrapper"));
document.getElementById("wrapper").querySelectorAll(".divs"); // ถ้าเป็นไปได้ ให้ใช้ querySelectorAll()
ในตัวอย่างนี้ หากไม่สามารถใช้ querySelectorAll() ได้ Sizzle จะกรององค์ประกอบโดยใช้การวนซ้ำแบบง่ายๆ
หมายเหตุอีกประการหนึ่งเกี่ยวกับบริบท (เราไม่ได้พูดถึงตัวเลือก) - หากคุณส่งวัตถุ jQuery เป็นพารามิเตอร์ตัวที่สองไปยังตัวเลือกสำหรับฟังก์ชัน .live() เหตุการณ์จะถูกตรวจจับใน document(!) และถ้า มันเป็นออบเจ็กต์ DOM ดังนั้นเหตุการณ์จะแสดงขึ้นมาที่องค์ประกอบนี้เท่านั้น ฉันพยายามที่จะไม่จำรายละเอียดปลีกย่อยดังกล่าว แต่ใช้ .delegate()
$(".root > .child")
ดังที่เราทราบ การแยกวิเคราะห์ตัวเลือกและการค้นหาจะเริ่มต้นด้วยองค์ประกอบ all.child บนเพจ (โดยที่ querySelectorAll() ไม่พร้อมใช้งาน) การดำเนินการนี้ค่อนข้างแพงและเราสามารถเปลี่ยนตัวเลือกได้ดังนี้:
$(".child", $(".root")); // การใช้บริบทจะไม่ทำให้การค้นหาง่ายขึ้น
$(".root").find(".child"); // ทำไมเราต้องวนซ้ำองค์ประกอบทั้งหมดภายใน .root?
$(".root").children(".child"); // ตัวเลือกที่ถูกต้องที่สุด
อย่างไรก็ตาม หากจำเป็นต้องใช้ตัวกรองตามแอตทริบิวต์ใดๆ (:visible, :eq ฯลฯ) และตัวเลือกมีลักษณะดังนี้:
$(".some_images:มองเห็นได้")
จากนั้นตัวกรองจะถูกนำไปใช้ครั้งสุดท้าย - เช่น เรากำลังเบี่ยงเบนจากกฎ "ขวาไปซ้าย" อีกครั้ง
- หากเป็นไปได้ ให้ใช้ตัวเลือกที่ถูกต้องซึ่งตรงกับ querySelectorAll()
- แทนที่การอยู่ใต้บังคับบัญชาภายในตัวเลือกด้วยแบบสอบถามย่อย (.children(...) ฯลฯ )
- ชี้แจงบริบทของตัวเลือก
- กรองชุดองค์ประกอบสำเร็จรูปให้เล็กที่สุดเท่าที่จะเป็นไปได้
ขึ้นอยู่กับชั้นเรียนปริญญาโท
JavaScript เช่นเดียวกับ CSS มีฟังก์ชันที่ช่วยให้คุณเข้าถึงองค์ประกอบ HTML เพื่อแปลงเนื้อหาของหน้า ใน CSS สามารถทำได้โดยการเขียนตัวเลือก มีหลายวิธีในการจัดระเบียบฟังก์ชันนี้ใน JavaScript และนี่คือหนึ่งในนั้น:
Var primaryHeadings = document.getElementsByTagName("h1");
โค้ดนี้จะแยกส่วนหัว h1 ทั้งหมดและวางไว้ในตัวแปร primaryHeadings หากมีหลายหัวข้อในหน้านั้น ส่วนหัวทั้งหมดจะถูกวางไว้ในอาร์เรย์
Var ou812 = document.getElementById("เอ็ดดี้");
รหัสนี้เลือกองค์ประกอบที่มี id = “eddie”
Var กีต้าร์ = document.getElementsByClassName("แกน");
นอกจากนี้เรายังสามารถเลือกองค์ประกอบตามชื่อคลาสได้อีกด้วย
มาเติม Sizzle กันกรอบงาน JavaScript ต่างๆ มีตัวเลือกของตนเองสำหรับการสร้างตัวเลือก หนึ่งในความสำเร็จสูงสุดคือ Sizzle ซึ่งต่อมากลายเป็น jQuery Sizzle ต่างจากรุ่นลูกหลานตรงที่สามารถทำงานร่วมกับและจัดการ DOM เท่านั้น หากคุณไม่ต้องการฟังก์ชัน jQuery อื่นๆ ทั้งหมด คุณยังสามารถดาวน์โหลด Sizzle เป็นไลบรารีแยกต่างหากได้ตั้งแต่วันนี้
ด้วยการพัฒนาไลบรารีเหล่านี้ การเขียนตัวเลือกจึงลดลงและเปลี่ยนแปลงไปอย่างมาก:
$("#เดฟ").css()
โค้ดนี้จะแยกองค์ประกอบ html ด้วย id=”dave” และช่วยให้คุณสามารถทำงานกับสไตล์ css ของมันได้
Sizzle ไม่ใช่ไลบรารี JavaScript เดียวสำหรับจัดการโค้ด HTML นอกจากนี้ยังมีตัวเลือกอื่น ๆ เช่น หลากหลาย อย่างไรก็ตามในความคิดของฉันทั้งหมดที่กล่าวมาข้างต้นล้าสมัยก่อนที่สิ่งที่รอคุณอยู่ต่อไปในบทความนี้
ระดับถัดไปของ JavaScriptนักพัฒนาหลายคนเริ่มใช้ jQuery บ่อยมากจนไม่สังเกตเห็นการเปลี่ยนแปลงครั้งใหญ่ในตัว JavaScript เลยด้วยซ้ำ
“JavaScript Selector API” เป็นส่วนอย่างเป็นทางการของข้อกำหนด HTML5 และยังสามารถใช้เพื่อเขียนหน้า XHTML ได้อีกด้วย ไวยากรณ์ใหม่นั้นง่ายมาก:
Document.querySelector("#เอ็ดดี้")
รหัสนี้เทียบเท่ากับ document.getElementById("eddie") อย่างแน่นอน ไม่น่าประทับใจใช่ไหม? แล้วสิ่งนี้ล่ะ:
Document.querySelector("#เอ็ดดี้ h1 + p")
ฟังก์ชันการทำงานใหม่ช่วยให้คุณสามารถจัดการ DOM โดยใช้นิพจน์ CSS ที่ซับซ้อน
เมธอด querySelector ดึงข้อมูลเฉพาะองค์ประกอบแรกที่พบ ในการดึงข้อมูลทั้งหมดที่คุณต้องใช้ querySelectorAll:
Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")
รหัสนี้จะดึงทุกแถวที่สามจากตารางด้วย id="frets"
ประเด็นที่สำคัญมากบางประการมีข้อจำกัดหลายประการที่คุณควรทราบหากคุณใช้เมธอด querySelector / All:
เบราว์เซอร์บางรุ่นไม่รองรับฟังก์ชันการทำงานใหม่ หากเป็นสิ่งสำคัญสำหรับคุณที่โค้ดใช้งานได้บน IE6-7 ก็ควรใช้ไลบรารีที่สามารถจัดการ DOM: Sizzle หรือ jQuery ได้ดีกว่า
ต้องเขียนตัวเลือกอย่างระมัดระวัง มิฉะนั้นเบราว์เซอร์จะไม่เข้าใจ และวิธีการข้างต้นจะคืนค่าเป็นโมฆะ โดยทั่วไป โปรดใช้ความระมัดระวังเป็นอย่างยิ่ง โดยเฉพาะอย่างยิ่งเมื่อใช้ตัวเลือก CSS3
ต่างจาก getElementsByTagName ตรงที่เมธอด querySelectorAll ส่งคืนรายการคงที่ขององค์ประกอบที่ดึงข้อมูลตามที่ปรากฏบนเพจในปัจจุบัน ซึ่งหมายความว่าเมื่อทำการเปลี่ยนแปลงแบบไดนามิกกับโค้ด (การเพิ่มและการลบองค์ประกอบผ่าน JavaScript) คุณจะต้องใช้เมธอด querySelectorAll อีกครั้ง
ลองใช้ฟังก์ชันใหม่เพื่อขจัดความจำเป็นในการดาวน์โหลดไลบรารีประเภทต่างๆ
งานที่นักพัฒนา JavaScript มือใหม่เผชิญบ่อยมากคือการเลือกองค์ประกอบบนหน้าเว็บตามแอตทริบิวต์ id
สมมติว่าเรามีโค้ดอยู่ในหน้า
บล็อกเนื้อหา
คุณจะเลือกองค์ประกอบด้วย id="elem" และดำเนินการหลายอย่างกับองค์ประกอบนั้นได้อย่างไร
มีหลายทางเลือกในการแก้ปัญหา ลองดูพวกเขาตอนนี้
ตัวเลือกที่ 1: ใช้เมธอด Javascript getElementById
มีวิธีเข้าถึงองค์ประกอบด้วยรหัสโดยใช้โค้ดจาวาสคริปต์ "บริสุทธิ์" โดยไม่ต้องใช้ไลบรารีของบุคคลที่สาม วิธีนี้คือการใช้วิธี ggetElementById(“element_id”) ดังนั้นเราจึงเข้าถึงองค์ประกอบที่เราต้องการด้วยรหัสของมัน
เรามาดูวิธีการทำงานด้วยตัวอย่างง่ายๆ
บล็อกเนื้อหา
alert(document.getElementById("elem").innerHTML);
โปรดทราบว่าบรรทัดโค้ด (สคริปต์) เหล่านี้อยู่ใต้องค์ประกอบนั้น นี่เป็นข้อกำหนดเบื้องต้นสำหรับการทำงานของสคริปต์นี้ เนื่องจาก... รหัส Javascript จะถูกดำเนินการในขณะที่โหลดเพจ หากเราวางโค้ดไว้ด้านบน เราจะเข้าถึงองค์ประกอบบนหน้าที่ยังไม่ได้โหลด เช่น มันจะยังไม่อยู่ในโค้ดในขณะที่เรียกใช้สคริปต์ มีวิธีหลีกเลี่ยงปัญหานี้มากมาย แต่อยู่นอกเหนือขอบเขตของบทความนี้
ดังนั้นหากทุกอย่างถูกต้อง เราจะพบหน้าต่างป๊อปอัป หน้าต่างนี้จะแสดงข้อความที่อยู่ภายในบล็อก div
ตอนนี้เรามาดูกันว่าเราจะแก้ไขปัญหานี้ในอีกทางหนึ่งได้อย่างไร
ตัวเลือกที่ 2 การใช้ไลบรารี Jquery
ตัวเลือกที่สองสำหรับการเลือกองค์ประกอบตามรหัสคือการใช้ไลบรารี Jquery ในทางปฏิบัติในสคริปต์สมัยใหม่มักใช้วิธีนี้ สะดวกและจดจำง่ายกว่ามาก
ในการอ้างถึงองค์ประกอบด้วยรหัส คุณต้องใช้โครงสร้างต่อไปนี้:
$("#องค์ประกอบ")
องค์ประกอบนี้คือชื่อที่มีอยู่ในแอตทริบิวต์ id
มีการเพิ่มไว้ในส่วนนี้ วิธีหนึ่งที่สามารถทำได้คือการเพิ่มบรรทัดโค้ดต่อไปนี้:
ในการที่จะโหลดห้องสมุดนั้นจะต้องมีการเชื่อมต่ออินเทอร์เน็ต
บล็อกเนื้อหา
alert($("#elem").html());
ตัวสคริปต์ตามตัวอย่างก่อนหน้านี้ควรอยู่ใต้โค้ดขององค์ประกอบที่คุณต้องการโต้ตอบด้วย
ดังนั้นเราจึงได้พูดคุยกันสองวิธีในการเลือกองค์ประกอบบนหน้าเว็บด้วยแอตทริบิวต์ id และโต้ตอบกับองค์ประกอบนั้น เลือกวิธีการที่เหมาะกับคุณและนำไปปฏิบัติ
ภายในเอกสารที่ตรงกับตัวเลือกที่ระบุ หรือกลุ่มตัวเลือก หากไม่พบรายการที่ตรงกัน ระบบจะส่งคืนค่าว่าง
หมายเหตุ: การจับคู่เสร็จสิ้นโดยใช้การแวะผ่านโหนดของเอกสารที่สั่งซื้อล่วงหน้าตามความลึกโดยเริ่มจากองค์ประกอบแรกในมาร์กอัปของเอกสาร และวนซ้ำผ่านโหนดตามลำดับตามลำดับของจำนวนโหนดย่อยองค์ประกอบไวยากรณ์ = document.querySelector (ตัวเลือก); ตัวเลือกพารามิเตอร์ DOMString ที่มีตัวเลือกตั้งแต่หนึ่งตัวขึ้นไปที่จะจับคู่ สตริงนี้ต้องเป็นสตริงตัวเลือก CSS ที่ถูกต้อง หากไม่เป็นเช่นนั้น ข้อยกเว้น SYNTAX_ERR จะถูกส่งออกไป โปรดดูที่ การค้นหาองค์ประกอบ DOM โดยใช้ตัวเลือก สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกและวิธีจัดการองค์ประกอบเหล่านั้น
หมายเหตุ: อักขระที่ไม่ได้เป็นส่วนหนึ่งของไวยากรณ์ CSS มาตรฐานจะต้องถูกหลีกโดยใช้อักขระแบ็กสแลช เนื่องจาก JavaScript ยังใช้การหลีกแบ็กสแลช ดังนั้นควรระมัดระวังเป็นพิเศษเมื่อเขียนตัวอักษรสตริงโดยใช้อักขระเหล่านี้ ดูข้อมูลเพิ่มเติมส่งคืนค่าข้อยกเว้น SYNTAX_ERR ไวยากรณ์ของตัวเลือกที่ระบุไม่ถูกต้อง หมายเหตุการใช้งาน
หากตัวเลือกที่ระบุตรงกับ ID ที่ใช้อย่างไม่ถูกต้องมากกว่าหนึ่งครั้งในเอกสาร องค์ประกอบแรกที่มี ID นั้นจะถูกส่งกลับการหลบหนีอักขระพิเศษ หากต้องการจับคู่กับ ID หรือตัวเลือกที่ไม่เป็นไปตามไวยากรณ์ CSS มาตรฐาน (เช่น การใช้โคลอนหรือการเว้นวรรคอย่างไม่เหมาะสม) คุณต้องหลีกอักขระด้วยเครื่องหมายแบ็กสแลช (" \ ") เนื่องจากแบ็กสแลชยังเป็นอักขระหลีกใน JavaScript ดังนั้น หากคุณกำลังป้อนสตริงลิเทอรัล คุณต้องใช้ Escapeสองครั้ง
console.log("#foo\bar"); // "#fooar" (\b คืออักขระควบคุม backspace) document.querySelector("#foo\bar"); // ไม่ตรงกับสิ่งใดเลย console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // จับคู่ div แรก document.querySelector("#foo:bar"); // ไม่ตรงกับสิ่งใดเลย document.querySelector("#foo\\:bar"); // จับคู่ div ที่สอง
ตัวอย่าง การค้นหาองค์ประกอบแรกที่ตรงกับคลาสในตัวอย่างนี้ องค์ประกอบแรกในเอกสารที่มีคลาส " myclass " จะถูกส่งคืน:
Var el = document.querySelector(".myclass");
ตัวเลือกที่ซับซ้อนมากขึ้นตัวเลือกยังสามารถมีประสิทธิภาพได้มาก ดังตัวอย่างต่อไปนี้ ที่นี่องค์ประกอบแรกที่มีชื่อ "login" () อยู่ภายในซึ่งมีคลาสเป็น "user-panel main" () ในเอกสารจะถูกส่งคืน:
Var el = document.querySelector("div.user-panel.main อินพุต");
ข้อมูลจำเพาะ| ดอม คำจำกัดความของ "document.querySelector()" ในข้อกำหนดนั้น |
มาตรฐานการครองชีพ |
ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา
อัปเดตข้อมูลความเข้ากันได้บน GitHub
| เดสก์ท็อปมือถือ | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome สำหรับ Android Firefox สำหรับ Android Opera สำหรับ Android Safari บน iOS Samsung Internet | |||||||||||
| การสนับสนุน Chrome เต็มรูปแบบ 1 | รองรับ Edge เต็มรูปแบบ 12 | Firefox รองรับเวอร์ชัน 3.5 เต็มรูปแบบ | การสนับสนุน IE เต็มรูปแบบ 8 | โอเปร่าสนับสนุนอย่างเต็มที่ 10 | Safari รองรับเวอร์ชัน 3.2 เต็มรูปแบบ | รองรับ WebView Android เต็มรูปแบบ ใช่ | รองรับ Chrome Android เต็มรูปแบบใช่ | รองรับ Firefox Android อย่างเต็มรูปแบบ ใช่ | Opera Android รองรับเวอร์ชัน 10.1 เต็มรูปแบบ | Safari iOS รองรับเวอร์ชัน 3.2.1 เต็มรูปแบบ | ซัมซุงอินเทอร์เน็ต Android ? |
