document.getElementById vs jQuery $ ()

620

นี่คือ:

var contents = document.getElementById('contents');

เช่นเดียวกับสิ่งนี้:

var contents = $('#contents');

ระบุว่าโหลด jQuery แล้วหรือ

javascript jquery jquery-selectors

— Phillip Senn
แหล่งที่มา

10

นอกจากคะแนนที่เพิ่มขึ้นในคำตอบแล้วเวอร์ชั่น jQuery ก็คือแอพ ช้าลง 100x

8

นี่พิสูจน์แล้วไหม

— FranBran

12

@torazaburo ที่จริงแล้วเวอร์ชัน jQuery ไม่ช้ากว่า 3 เท่า (อย่างน้อย Chrome ล่าสุด) ดู: jsperf.com/getelementbyid-vs-jquery-id/44

— MichałPerłakowski

2

@ MichałPerłakowskiในลิงค์นั้น jquery version ช้ากว่า 10 เท่า 26mil vs 2.4mil

— Claudiu Creanga

1

ลิงค์อัปเดตที่ถูกต้องสำหรับ JSPerf คือ: jsperf.com/getelementbyid-vs-jquery-idในกรณีของฉัน (FF 58) มันช้ากว่า 1000 เท่า อย่างไรก็ตาม jQuery ยังคงทำงานได้ 2.5 ล้านครั้งต่อวินาที โดยทั่วไปนั่นไม่ใช่ปัญหาและแน่นอนไม่สามารถเปรียบเทียบในแง่ของการทำงาน

— Diego Jancic

1017

ไม่แน่นอน !!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

ใน jQuery เพื่อให้ได้ผลลัพธ์เดียวกันdocument.getElementByIdคุณสามารถเข้าถึง jQuery Object และรับองค์ประกอบแรกในวัตถุ (จำวัตถุ JavaScript ทำหน้าที่คล้ายกับอาร์เรย์ที่เชื่อมโยง)

var contents = $('#contents')[0]; //returns a HTML DOM Object

— John Hartsock
แหล่งที่มา

24

สำหรับผู้ที่สนใจdocument.getElementByไม่ทำงานอย่างถูกต้องใน <IE8 นอกจากนี้ยังได้รับองค์ประกอบโดยnameดังนั้นคุณสามารถโต้แย้งในทางทฤษฎีdocument.getElementByIdไม่เพียง แต่ทำให้เข้าใจผิด แต่สามารถคืนค่าที่ไม่ถูกต้อง ผมคิดว่า @John ใหม่นี้ แต่ผมคิดว่ามันจะไม่เจ็บเพิ่มใน.

— มะนาว

14

ระวังตัวระบุของคุณไม่ได้รับการแก้ไข $('#'+id)[0]ไม่เท่ากับdocument.getElementById(id)เพราะidอาจมีอักขระที่ถือว่าพิเศษใน jQuery!

— จาคอบ

1

สิ่งนี้มีประโยชน์มาก - ไม่เคยรู้สิ่งนี้! ฉันแน่ใจว่าฉันเคยใช้มันมาก่อนซึ่งเป็นสิ่งที่ทำให้ฉันงงงัน เฮ้คุณเรียนรู้ทุกวัน! ขอบคุณ!

— jedd.ahyoung

3

google jquery equivalent of document.getelementbyidและผลลัพธ์แรกคือโพสต์นี้ ขอบคุณ!!!

— ajakblackgoat

$('#contents')[0].idส่งคืนชื่อ id

— Omar

139

เลขที่

การโทรdocument.getElementById('id')จะส่งคืนวัตถุ DOM ดิบ

การโทร$('#id')จะส่งคืนวัตถุ jQuery ที่ล้อมวัตถุ DOM และให้วิธีการ jQuery

ดังนั้นคุณสามารถเรียกวิธี jQuery เท่านั้นเช่นcss()หรือanimate()ในการ$()โทร

คุณยังสามารถเขียน$(document.getElementById('id'))ซึ่งจะกลับวัตถุ jQuery $('#id')และเทียบเท่ากับ

คุณจะได้รับวัตถุ DOM พื้นฐานจากวัตถุ jQuery $('#id')[0]โดยการเขียน

— SLaks
แหล่งที่มา

4

คุณรู้หรือไม่ว่าอันไหนเร็วกว่า - $ (document.getElementById ('องค์ประกอบ')) เทียบกับ $ ('# องค์ประกอบ')?

— Ivan Ivković

10

@ IvanIvković: คนแรกเร็วกว่าเนื่องจากไม่เกี่ยวข้องกับการแยกสตริง

— slaks

1

@SLaks อะไรคือความแตกต่างหลักระหว่างวัตถุ DOM ดิบและวัตถุ jQuery? เพียงแค่ใช้วัตถุ jQuery เรามีความสามารถในการใช้วิธีการ jQuery?

— Roxy'Pro

@ Roxy'Pro: พวกมันต่างกัน วัตถุ jQuery ล้อมวัตถุ DOM ดูเอกสารประกอบ

— slaks

เอกสารDOM JavaScript ของวัตถุนี้เทียบกับ jQuery Objects นั้นมีประโยชน์

In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.

— user3454439

31

ปิด แต่ไม่เหมือนกัน พวกเขาได้รับองค์ประกอบเดียวกัน แต่รุ่น jQuery ถูกห่อในวัตถุ jQuery

จะเท่ากับนี้

var contents = $('#contents').get(0);

หรือสิ่งนี้

var contents = $('#contents')[0];

สิ่งเหล่านี้จะดึงองค์ประกอบออกมาจากวัตถุ jQuery

— RightSaidFred
แหล่งที่มา

29

หมายเหตุเกี่ยวกับความแตกต่างของความเร็ว แนบ snipet ต่อไปนี้กับการโทรแบบ onclick:

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

สลับการคอมเม้นต์อีกครั้งจากนั้นคอมเม้นต์อีกอัน ในการทดสอบของฉัน

document.getElementbyId โดยเฉลี่ยประมาณ35 มิลลิวินาที (ผันผวนจาก25msมากไปจนถึง52msประมาณ15 runs)

ในทางกลับกัน

jQuery เฉลี่ยประมาณ200ms (ตั้งแต่181msการ222msที่เกี่ยวกับ15 runs)

จากการทดสอบอย่างง่ายนี้คุณสามารถเห็นได้ว่า jQuery ใช้เวลาประมาณ6 ครั้งเป็นเวลานาน

แน่นอนว่ามีมากกว่า10000การทำซ้ำดังนั้นในสถานการณ์ที่ง่ายผมก็อาจจะใช้ jQuery เพื่อความสะดวกในการใช้งานและทั้งหมดของสิ่งดีๆอื่น ๆ เช่นและ.animate .fadeToแต่ใช่ในทางเทคนิคgetElementByIdไม่น้อยเร็วขึ้น

— nurdyguy
แหล่งที่มา

ขอบคุณสำหรับคำตอบนี้ ฉันต้องการถามฉันควรแทนที่ทั้งหมด$('#someID') ด้วยdocument.getElementById("someID") หรือไม่ ฉันกำลังทำงานกับบางสิ่งที่ฉันใช้อย่างกว้างขวาง$('#someID')และเพจของฉันทำงานช้าสำหรับอินพุตไฟล์ขนาดใหญ่ โปรดแนะนำฉันว่าฉันควรทำอย่างไร

— Mazhar MIK

หากคุณกำลังนำหนึ่งเดียวกันหลายครั้งในขอบเขตเดียวกันแล้วบันทึกมันเหมือนและนำมาใช้ตัวแปรที่บันทึกไว้var $myId = $('#myId'); $myIdการค้นหาโดยใช้ ID โดยทั่วไปนั้นเป็นสิ่งที่ค่อนข้างเร็ว แต่ถ้าหน้าเว็บช้าอาจมีเหตุผลอื่น

— nurdyguy

ขอบคุณ @ nurdyguy นั่นเป็นประโยชน์ ฉันจะพยายามทำให้สำเร็จ

— Mazhar MIK

17

ไม่ได้ผลตอบแทนแรกคือองค์ประกอบ DOM หรือค่า null ในขณะที่ค่าที่สองคืนค่าวัตถุ jQuery วัตถุ jQuery จะว่างเปล่าถ้าองค์ประกอบที่มี ID ของไม่contentsถูกจับคู่

องค์ประกอบ DOM ที่ส่งคืนโดยdocument.getElementById('contents')อนุญาตให้คุณทำสิ่งต่าง ๆ เช่นเปลี่ยน.innerHTML(หรือ.value) ฯลฯ อย่างไรก็ตามคุณจะต้องใช้วิธีการ jQuery ในวัตถุ jQuery

var contents = $('#contents').get(0);

มีความเป็นป่าเถื่อนมากขึ้นอย่างไรก็ตามหากไม่มีการcontentsจับคู่องค์ประกอบที่มีรหัสตรงกับdocument.getElementById('contents')จะคืนค่าว่าง แต่$('#contents').get(0)จะคืนค่าไม่ได้กำหนด

ข้อดีอย่างหนึ่งของการใช้วัตถุ jQuery ก็คือคุณจะไม่ได้รับข้อผิดพลาดใด ๆ หากไม่มีการส่งคืนองค์ประกอบเนื่องจากมีการส่งคืนวัตถุเสมอ อย่างไรก็ตามคุณจะได้รับข้อผิดพลาดหากคุณพยายามที่จะดำเนินการเกี่ยวกับการnullส่งคืนโดยdocument.getElementById

— ด้าน
แหล่งที่มา

15

ไม่จริงผลลัพธ์เดียวกันจะเป็น:

$('#contents')[0]

jQuery ไม่ทราบจำนวนผลลัพธ์ที่จะถูกส่งคืนจากแบบสอบถาม สิ่งที่คุณได้รับกลับมาเป็นวัตถุ jQuery พิเศษซึ่งเป็นชุดของตัวควบคุมทั้งหมดที่ตรงกับแบบสอบถาม

ส่วนหนึ่งของสิ่งที่ทำให้ jQuery สะดวกมากคือเมธอด MOST ที่เรียกบนวัตถุนี้ซึ่งดูเหมือนว่ามีความหมายสำหรับการควบคุมเพียงอันเดียวจริง ๆ แล้วอยู่ในวงวนที่เรียกว่าสมาชิกทั้งหมดที่เขารวบรวม

เมื่อคุณใช้ [0] ไวยากรณ์คุณใช้องค์ประกอบแรกจากคอลเลกชันด้านใน ณ จุดนี้คุณจะได้รับวัตถุ DOM

— อันเดรย์
แหล่งที่มา

10

ในกรณีที่คนอื่นพบสิ่งนี้ ... นี่คือข้อแตกต่าง:

หาก id มีอักขระที่ไม่รองรับมาตรฐาน HTML (ดูคำถาม SO ที่นี่ ) ดังนั้น jQuery อาจไม่สามารถค้นหาได้แม้ว่า getElementById จะทำเช่นนั้น

สิ่งนี้เกิดขึ้นกับฉันด้วยรหัสที่มีอักขระ "/" (เช่น: id = "a / b / c") โดยใช้ Chrome:

var contents = document.getElementById('a/b/c');

สามารถค้นหาองค์ประกอบของฉันได้ แต่:

var contents = $('#a/b/c');

ไม่ได้.

Btw การแก้ไขอย่างง่ายคือการย้าย id นั้นไปยังฟิลด์ชื่อ JQuery ไม่มีปัญหาในการค้นหาองค์ประกอบโดยใช้:

var contents = $('.myclass[name='a/b/c']);

— user1435666
แหล่งที่มา

5

ความแตกต่างที่สำคัญคือความจริงที่ว่ามันถูกห่อในวัตถุ jQuery ด้วยการเรียก jQuery เทียบกับวัตถุ DOM ดิบโดยใช้จาวาสคริปต์ตรง วัตถุ jQuery จะสามารถทำหน้าที่ jQuery อื่น ๆ ได้แน่นอน แต่ถ้าคุณต้องการจัดการ DOM อย่างง่ายเช่นการใส่สไตล์พื้นฐานหรือการจัดการเหตุการณ์พื้นฐานวิธี JavaScript ตรงนั้นจะเร็วกว่า jQuery เล็กน้อยเนื่องจากคุณไม่ได้ทำการ jQuery ไม่ต้องโหลดในไลบรารีภายนอกของรหัสที่สร้างขึ้นบน JavaScript มันบันทึกขั้นตอนพิเศษ

— Kobby
แหล่งที่มา

5

var contents = document.getElementById('contents');

var contents = $('#contents');

ข้อมูลโค้ดไม่เหมือนกัน คนแรกส่งคืนElementวัตถุ ( แหล่งที่มา ) อันที่สองเทียบเท่า jQuery จะส่งคืนวัตถุ jQuery ที่มีคอลเลกชันขององค์ประกอบศูนย์หรือหนึ่ง DOM ( เอกสาร jQuery ) jQuery ภายในใช้document.getElementById()เพื่อประสิทธิภาพ

ในทั้งสองกรณีหากพบมากกว่าหนึ่งองค์ประกอบเฉพาะองค์ประกอบแรกจะถูกส่งกลับ

เมื่อตรวจสอบโครงการ github สำหรับ jQuery ฉันพบตัวอย่างบรรทัดต่อไปนี้ซึ่งดูเหมือนว่าจะใช้รหัส document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.jsบรรทัด 68 เป็นต้นไป)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );

— Nipuna
แหล่งที่มา

4

ความแตกต่างอีกประการหนึ่ง: getElementByIdส่งคืนการจับคู่ครั้งแรกในขณะที่$('#...')ส่งคืนชุดการจับคู่ - ใช่ ID เดียวกันสามารถทำซ้ำในเอกสาร HTML ได้

นอกจากนี้getElementIdถูกเรียกจากเอกสารในขณะที่$('#...')สามารถเรียกได้จากตัวเลือก ดังนั้นในรหัสด้านล่างdocument.getElementById('content')จะคืนค่าเนื้อหาทั้งหมด แต่$('form #content')[0]จะส่งคืนภายในฟอร์ม

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

อาจเป็นเรื่องแปลกที่จะใช้ ID ซ้ำกัน แต่ถ้าคุณใช้บางอย่างเช่น Wordpress เทมเพลตหรือปลั๊กอินอาจใช้ id เดียวกันกับที่คุณใช้ในเนื้อหา การเลือกสรรของ jQuery สามารถช่วยคุณได้

— สตีฟแบ๊งส์
แหล่งที่มา

2

jQuery สร้างขึ้นด้วย JavaScript ซึ่งหมายความว่ามันเป็นเพียงแค่จาวาสคริปต์ต่อไป

document.getElementById ()

document.getElementById () วิธีการคืนองค์ประกอบที่มีคุณสมบัติ ID ที่มีค่าที่ระบุและผลตอบแทนที่เป็นโมฆะถ้าไม่มีองค์ประกอบที่มี ID ที่ระบุมีอยู่ ID ควรจะไม่ซ้ำกันภายในหน้า

Jquery $ ()

การเรียก jQuery () หรือ $ () พร้อมตัวเลือก id เนื่องจากอาร์กิวเมนต์จะส่งคืนออบเจ็กต์ jQuery ที่มีคอลเลกชันของศูนย์หรือองค์ประกอบ DOM หนึ่งรายการค่า id แต่ละรายการต้องใช้เพียงครั้งเดียวภายในเอกสาร หากมีมากกว่าหนึ่งองค์ประกอบที่ได้รับการกำหนด ID เดียวกันการสืบค้นที่ใช้ ID นั้นจะเลือกเฉพาะองค์ประกอบที่ตรงกันใน DOM เท่านั้น

— ฮาดีมีร์
แหล่งที่มา

1

ฉันพัฒนาฐานข้อมูล noSQL สำหรับเก็บต้นไม้ DOM ในเว็บเบราว์เซอร์ที่อ้างอิงถึงองค์ประกอบ DOM ทั้งหมดในหน้าจะถูกเก็บไว้ในดัชนีแบบสั้น ดังนั้นไม่จำเป็นต้องใช้ฟังก์ชัน "getElementById ()" เพื่อรับ / แก้ไของค์ประกอบ เมื่อองค์ประกอบในแผนผัง DOM ถูกสร้างอินสแตนซ์บนหน้าฐานข้อมูลจะกำหนดคีย์หลักตัวแทนให้กับแต่ละองค์ประกอบ มันเป็นเครื่องมือฟรีที่http://js2dx.com

— Gonki
แหล่งที่มา

1

คำตอบทั้งหมดข้างต้นถูกต้อง ในกรณีที่คุณต้องการเห็นการทำงานอย่าลืมว่าคุณมี Console ในเบราว์เซอร์ที่คุณสามารถเห็นผลลัพธ์ที่ชัดเจนอย่างแท้จริง:

ฉันมี HTML:

<div id="contents"></div>

ไปที่คอนโซล(cntrl+shift+c)และใช้คำสั่งเหล่านี้เพื่อดูผลลัพธ์ของคุณอย่างชัดเจน

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

อย่างที่เราเห็นในกรณีแรกเราได้รับแท็กเอง (นั่นคือการพูดอย่างเคร่งครัดวัตถุ HTMLDivElement) ในระยะหลังเราจริง ๆ แล้วไม่มีวัตถุธรรมดา แต่เป็นอาร์เรย์ของวัตถุ และตามคำตอบอื่น ๆ ข้างต้นคุณสามารถใช้คำสั่งต่อไปนี้:

$('#contents')[0]
>>> div#contents

— Mazhar MIK
แหล่งที่มา

1

คำตอบทั้งหมดเป็นแบบเก่าวันนี้ในปี 2019 คุณสามารถเข้าถึงรหัสคีย์ filds ใน javascript ได้โดยตรงเพียงลองใช้

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

การสาธิตออนไลน์! - https://codepen.io/frank-dspeed/pen/mdywbre

— ตรงไปตรงมา-Dspeed
แหล่งที่มา