document.getEuityById vs jQuery $ ()

Có phải đây là:

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

Giống như thế này:

var contents = $('#contents');

Cho rằng jQuery đã được tải?

Không chính xác!!

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

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

Trong jQuery, để có được kết quả tương tự document.getElementById, bạn có thể truy cập Đối tượng jQuery và lấy phần tử đầu tiên trong đối tượng (Ghi nhớ các đối tượng JavaScript hoạt động tương tự như các mảng kết hợp).

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

Không.

Gọi document.getElementById('id')sẽ trả về một đối tượng DOM thô.

Việc gọi $('#id')sẽ trả về một đối tượng jQuery bao bọc đối tượng DOM và cung cấp các phương thức jQuery.

Vì vậy, bạn chỉ có thể gọi các phương thức jQuery như css()hoặc animate()trên $()cuộc gọi.

Bạn cũng có thể viết $(document.getElementById('id')) , nó sẽ trả về một đối tượng jQuery và tương đương với $('#id').

Bạn có thể lấy đối tượng DOM cơ bản từ một đối tượng jQuery bằng cách viết $('#id')[0].

Đóng, nhưng không giống nhau. Chúng có cùng một phần tử, nhưng phiên bản jQuery được gói trong một đối tượng jQuery.

Tương đương sẽ là

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

hoặc cái này

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

Chúng sẽ kéo phần tử ra khỏi đối tượng jQuery.

Một lưu ý về sự khác biệt về tốc độ. Đính kèm đoạn trích sau vào một cuộc gọi 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));
}

Thay thế bình luận một ra và sau đó bình luận khác. Trong các thử nghiệm của tôi,

document.getEuitybyId trung bình khoảng 35ms (dao động từ 25mslên đến 52mskhoảng 15 runs)

Mặt khác,

jQuery trung bình khoảng 200ms (từ 181msđến 222mskhoảng 15 runs).

Từ thử nghiệm đơn giản này, bạn có thể thấy rằng jQuery mất khoảng 6 lần thời gian.

Tất nhiên, điều đó đã qua các 10000lần lặp lại nên trong một tình huống đơn giản hơn, tôi có thể sẽ sử dụng jQuery để dễ sử dụng và tất cả những thứ hay ho khác như .animatevà .fadeTo. Nhưng vâng, về mặt kỹ thuật getElementByIdthì nhanh hơn một chút .

Không. Cái đầu tiên trả về một phần tử DOM hoặc null, trong khi cái thứ hai luôn trả về một đối tượng jQuery. Đối tượng jQuery sẽ trống nếu không có phần tử nào có id củacontents được khớp.

Phần tử DOM được trả về document.getElementById('contents')cho phép bạn thực hiện những việc như thay đổi .innerHTML(hoặc .value), v.v., tuy nhiên, bạn sẽ cần sử dụng các phương thức jQuery trên Đối tượng jQuery.

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

Tương đương hơn, tuy nhiên nếu không có phần tử nào có id của contentskhớp, document.getElementById('contents')sẽ trả về null, nhưng$('#contents').get(0) sẽ trả về không xác định.

Một lợi ích khi sử dụng đối tượng jQuery là bạn sẽ không gặp phải bất kỳ lỗi nào nếu không có phần tử nào được trả về, vì một đối tượng luôn được trả về. Tuy nhiên, bạn sẽ gặp lỗi nếu bạn cố gắng thực hiện các thao tác trên nulltrả về bởidocument.getElementById

Không, thực tế kết quả tương tự sẽ là:

$('#contents')[0] 

jQuery không biết có bao nhiêu kết quả sẽ được trả về từ truy vấn. Những gì bạn nhận lại là một đối tượng jQuery đặc biệt là tập hợp tất cả các điều khiển khớp với truy vấn.

Một phần của điều làm cho jQuery trở nên tiện lợi là các phương thức MOST được gọi trên đối tượng này trông giống như chúng được dùng cho một điều khiển, thực sự nằm trong một vòng lặp được gọi trên tất cả các thành viên mà anh ta thu thập

Khi bạn sử dụng cú pháp [0], bạn lấy phần tử đầu tiên từ bộ sưu tập bên trong. Tại thời điểm này, bạn nhận được một đối tượng DOM

Trong trường hợp người khác đánh thứ này ... Đây là một điểm khác biệt:

Nếu id chứa các ký tự không được hỗ trợ bởi tiêu chuẩn HTML (xem câu hỏi SO tại đây ) thì jQuery có thể không tìm thấy nó ngay cả khi getEuityById thực hiện.

Điều này đã xảy ra với tôi với một id chứa các ký tự "/" (ví dụ: id = "a / b / c"), sử dụng Chrome:

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

đã có thể tìm thấy yếu tố của tôi nhưng:

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

đã không.

Btw, cách khắc phục đơn giản là chuyển id đó sang trường tên. JQuery không gặp khó khăn khi tìm phần tử bằng cách sử dụng:

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

Giống như hầu hết mọi người đã nói, sự khác biệt chính là thực tế là nó được gói trong một đối tượng jQuery với lệnh gọi jQuery so với đối tượng DOM thô sử dụng JavaScript thẳng. Tất nhiên, đối tượng jQuery sẽ có thể thực hiện các chức năng jQuery khác với nó, nhưng, nếu bạn chỉ cần thực hiện các thao tác DOM đơn giản như kiểu cơ bản hoặc xử lý sự kiện cơ bản, phương thức JavaScript thẳng luôn nhanh hơn một chút so với jQuery vì bạn không ' Tôi phải tải trong một thư viện mã bên ngoài được xây dựng trên JavaScript. Nó tiết kiệm thêm một bước.

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

var contents = $('#contents');

Các đoạn mã không giống nhau. đầu tiên trả về một Elementđối tượng ( nguồn ). Cái thứ hai, tương đương jQuery sẽ trả về một đối tượng jQuery chứa một tập hợp gồm 0 hoặc một phần tử DOM. ( Tài liệu jQuery ). JQuery sử dụng document.getElementById()cho hiệu quả.

Trong cả hai trường hợp, nếu có nhiều hơn một phần tử được tìm thấy thì phần tử đầu tiên sẽ được trả về.

Khi kiểm tra dự án github cho jQuery, tôi đã tìm thấy các đoạn mã sau có vẻ như đang sử dụng mã document.getEuityById ( https://github.com/jquery/jquery/blob/master/src/core/init.js dòng 68 trở đi)

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

Một sự khác biệt khác: getElementByIdtrả về kết quả khớp đầu tiên , trong khi $('#...')trả về một tập hợp các kết quả khớp - có, cùng một ID có thể được lặp lại trong tài liệu HTML.

Hơn nữa, getElementIdđược gọi từ tài liệu, trong khi $('#...')có thể được gọi từ một bộ chọn. Vì vậy, trong mã dưới đây, document.getElementById('content')sẽ trả về toàn bộ cơ thể nhưng $('form #content')[0]sẽ trở lại bên trong biểu mẫu.

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

Việc sử dụng ID trùng lặp có vẻ lạ, nhưng nếu bạn đang sử dụng một cái gì đó như Wordpress, một mẫu hoặc plugin có thể sử dụng cùng một id như bạn sử dụng trong nội dung. Tính chọn lọc của jQuery có thể giúp bạn ra khỏi đó.

jQuery được xây dựng qua JavaScript. Điều này có nghĩa là dù sao nó cũng chỉ là javascript.

document.getEuityById ()

Phương thức document.getEuityById () trả về phần tử có thuộc tính ID có giá trị được chỉ định và Trả về null nếu không có phần tử nào có ID được chỉ định tồn tại. Một ID phải là duy nhất trong một trang.

Jquery $ ()

Gọi jQuery () hoặc $ () bằng bộ chọn id làm đối số của nó sẽ trả về một đối tượng jQuery có chứa một tập hợp bằng 0 hoặc một phần tử DOM. Mỗi giá trị id chỉ được sử dụng một lần trong tài liệu. Nếu có nhiều phần tử được gán cùng một ID, các truy vấn sử dụng ID đó sẽ chỉ chọn phần tử phù hợp đầu tiên trong DOM.

Tôi đã phát triển cơ sở dữ liệu noQuery để lưu trữ các cây DOM trong Trình duyệt web nơi các tham chiếu đến tất cả các thành phần DOM trên trang được lưu trữ trong một chỉ mục ngắn. Do đó, hàm "getEuityById ()" không cần thiết để lấy / sửa đổi một phần tử. Khi các phần tử trong cây DOM được khởi tạo trên trang, cơ sở dữ liệu sẽ gán các khóa chính thay thế cho từng phần tử. Nó là một công cụ miễn phí http://js2dx.com

Tất cả các câu trả lời trên là chính xác. Trong trường hợp bạn muốn xem nó hoạt động, đừng quên bạn có Console trong trình duyệt nơi bạn có thể thấy kết quả thực sự rõ ràng:

Tôi có một HTML:

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

Đi tới bàn điều khiển (cntrl+shift+c)và sử dụng các lệnh này để xem kết quả của bạn rõ ràng

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

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

Như chúng ta có thể thấy, trong trường hợp đầu tiên, chúng ta đã có thẻ (nghĩa là, nói đúng ra, một đối tượng HTMLDivEuity). Về sau chúng ta thực sự không có một đối tượng đơn giản, mà là một mảng các đối tượng. Và như được đề cập bởi các câu trả lời khác ở trên, bạn có thể sử dụng lệnh sau:

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

Tất cả các câu trả lời đã cũ ngày hôm nay kể từ năm 2019, bạn có thể truy cập trực tiếp filds khóa id trong javascript chỉ cần thử nó

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

Demo trực tuyến! - https://codepen.io/frank-dspeed/pen/mdywename