Làm cách nào để lấy thẻ HTML <html> bằng JavaScript / jQuery?


161

Sử dụng $('html').html()Tôi có thể lấy mã HTML trong <html>thẻ ( <head>, <body>, vv). Nhưng làm cách nào tôi có thể nhận được HTML thực tế của <html>thẻ (có thuộc tính)?

Ngoài ra, có thể lấy toàn bộ HTML của trang (bao gồm doctype <html>, v.v.) bằng jQuery (hoặc JavaScript cũ đơn giản) không?

Câu trả lời:


305

Cách đơn giản nhất để có được htmlphần tử nguyên bản là:

document.documentElement

Đây là tài liệu tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/Document.documentEuity .

CẬP NHẬT: Để sau đó lấy htmlphần tử dưới dạng chuỗi bạn sẽ làm:

document.documentElement.outerHTML

1
Xem thêm câu hỏi này để biết thêm thông tin về documentElementkhả năng tương thích trình duyệt: stackoverflow.com/q/11391827/177710 .
Oliver

Bạn có thường xuyên tham khảo phần tử html không!? Tôi không nghĩ rằng hiệu suất nên là một mối quan tâm, nói chung. Dù sao, đây thực sự là câu trả lời tốt hơn, nhưng nó đã đến trong CÁCH sau giải thưởng.
phòng thí nghiệm posit

42

Đây là cách lấy phần tử DOM DOM hoàn toàn bằng JS:

var htmlElement = document.getElementsByTagName("html")[0];

hoặc là

var htmlElement = document.querySelector("html");

Và nếu bạn muốn sử dụng jQuery để lấy các thuộc tính từ nó ...

$(htmlElement).attr(INSERT-ATTRIBUTE-NAME);

Câu trả lời của bạn sẽ tốt hơn đáng kể nếu bạn có thể giải thích tại sao điều này trả lời câu hỏi. Ngoài ra, vui lòng tô sáng mã và nhấp vào {}nút hoặc nhấn ctrl + k để đánh dấu mã đó dưới dạng mã.
Ben

18

Ngoài một số câu trả lời khác, bạn cũng có thể truy cập phần tử HTML thông qua:

var htmlEl = document.body.parentNode;

Sau đó, bạn có thể nhận được nội dung HTML bên trong:

var inner = htmlEl.innerHTML;

Làm như vậy theo cách này có vẻ là nhanh hơn một chút . Tuy nhiên, nếu bạn chỉ nhận được phần tử HTML, document.body.parentNodecó vẻ như sẽ nhanh hơn một chút .

Sau khi bạn có phần tử HTML, bạn có thể gây rối với các thuộc tính bằng getAttributesetAttributephương thức.

Đối với DOCTYPE, bạn có thể sử dụng document.doctype, được xây dựng trong câu hỏi này .


4
Cũng như một lưu ý: Điều này sẽ thất bại nếu cơ thể chưa có sẵn trên tài liệu.
DataDink

3
Trong trường hợp đó, document.head.parentNodevẫn sẽ hoạt động nếu có phần tử head.
mahemoff

15

Trong jQuery:

var html_string = $('html').outerHTML()

Trong Javascript đơn giản:

var html_string = document.documentElement.outerHTML

4

nếu bạn muốn có được một thuộc tính của một phần tử HTML với jQuery, bạn có thể sử dụng .attr();

vì vậy $('html').attr('someAttribute');sẽ cung cấp cho bạn giá trị của someAttributephần tửhtml

http://api.jquery.com/attr/

Ngoài ra:

có một plugin jQuery ở đây: http://plugins.jquery.com/project/getAttribut

cho phép bạn lấy tất cả các thuộc tính từ một phần tử HTML


1
Dự án getAttribut () bây giờ hơi cũ (tháng 2 năm 2009).
gligoran
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.