Thuộc tính
6 chỉ định một id duy nhất cho phần tử HTML [giá trị phải là duy nhất trong tài liệu HTML]Thuộc tính
6 được sử dụng nhiều nhất để trỏ đến một kiểu trong biểu định kiểu và bằng JavaScript [thông qua HTML DOM] để thao tác phần tử với id cụ thể ví dụ
Lấy id của neo đầu tiên
để id = tài liệu. getElementsByTagName["a"][0]. Tôi;
Tự mình thử »Thay đổi id của một phần tử
tài liệu. getElementById["bản trình diễn"]. id = "newid";
Tự mình thử »Thay đổi kích thước phông chữ của "myP"
phần tử const = tài liệu. getElementById["myP"];
phần tử. Phong cách. fontSize="30px";
Định nghĩa và cách sử dụng
Thuộc tính
6 đặt hoặc trả về giá trị của thuộc tính id của phần tửcú pháp
Trả lại thuộc tính id
Đặt thuộc tính id
Giá trị tài sản
ValueDescriptionidId của phần tửGiá trị trả về
TypeDescriptionStringId của phần tửHỗ trợ trình duyệt
9 được hỗ trợ trong tất cả các trình duyệtChromeEdgeFirefoxSafariOperaIECóCóCóCóCóCóHôm nay tôi được biết rằng các trình duyệt thêm các phần tử HTML có thuộc tính
6 hoặc var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
1 vào đối tượng var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
2. Kết quả là chúng trở thành biến toàn cục trong JavaScript. Lấy ví dụ này
// Output:
Tôi đã tìm thấy một bài viết về StackOverflow từ 12 năm trước hỏi về hành vi này. Hóa ra các biến toàn cục này là các phần tử được đặt tên, trong khi tính năng này được gọi là Truy cập được đặt tên trên đối tượng cửa sổ. Internet Explorer đã giới thiệu chức năng này và sau đó, các trình duyệt khác đã sử dụng chức năng này vì một số trang web dựa vào hành vi. Lôi cuốn
suy nghĩ đầu tiên của tôi là. "Ồ, tại sao hành vi này chưa bao giờ xung đột với bất kỳ mã JavaScript nào của tôi?" . Nếu bạn khai báo một biến trùng tên thì nó sẽ đứng trước biến toàn cục
// Output: "Something else"
Bạn cũng không nên sử dụng thẻ id hoặc tên để truy cập DOM. Thay vào đó, với vanilla JavaScript, hãy sử dụng các phương thức
var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
3 hoặc var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
4 Bạn chỉ có thể sử dụng biến Javascript trong HTML bằng cách liên kết biến Javascript với phần tử HTML bằng thuộc tính
6 hoặc var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
6Liên kết biến Javascript với phần tử HTML
- Tạo một phần tử trong HTML
Mã số
Content is loading ...
Gán id cho phần tử
Mã số
Content is loading ...
Nếu bạn kiểm tra điều này bây giờ, tất cả những gì bạn sẽ thấy là
Giờ đây, bạn có thể thêm Javascript vào trang của mình bằng thẻ script
Bây giờ, bạn có thể bắt đầu làm việc với Javascript. Tạo biến Javascript của bạn
Mã số
var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
Bạn lấy phần tử trong Javascript bằng giá trị id được gán
Mã số
var contentHolder = document.getElementById['content-holder'];
Để hiển thị biến trong HTML, hãy gán biến cho phần tử trong Javascript bằng thuộc tính InternalHTML
Mã số
contentHolder.innerHTML = newContent;
Kết quả
Hoàn thành mã
________số 8
Bạn có thể sử dụng phương pháp trên cho các biến chuỗi và số
Sử dụng biến mảng Javascript trong HTML
Để xem các biến mảng và đối tượng trong HTML, bạn phải lặp qua các mục trong Javascript trước khi chuyển chúng sang HTML
Ví dụ
Kết quả
Bạn cũng có thể tương tác với mã cho dự án này
Chào bạn. Tôi là Avic Ndugu
Tôi đã xuất bản hơn 100 bài đăng trên blog về HTML, CSS, Javascript, React và các chủ đề liên quan khác. Khi tôi không viết, tôi thích đọc sách, đi bộ đường dài và nghe podcast
Bạn có biết rằng các phần tử DOM có ID có thể truy cập được trong JavaScript dưới dạng các biến toàn cục không?
Nếu đây là lần đầu tiên bạn nghe về nó, hãy chuẩn bị tinh thần. Chúng ta có thể thấy nó hoạt động đơn giản bằng cách thêm ID vào một phần tử trong HTML
// Output: "Something else"
0Thông thường, chúng tôi sẽ xác định một biến mới bằng cách sử dụng
var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
7 hoặc var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
8 để chọn phần tử đó
// Output: "Something else"
1Nhưng chúng tôi thực sự đã có quyền truy cập vào
var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
9 mà không cần sự khắt khe đóDự phòng nhúng CodePen
Vì vậy, bất kỳ thuộc tính
// Output: "Something else"
10 — hoặc
// Output: "Something else"
11 nào — trong HTML đều có thể được truy cập bằng JavaScript bằng cách sử dụng
// Output: "Something else"
12. Một lần nữa, điều này không chính xác là "mới" nhưng nó thực sự không phổ biến để xemNhư bạn có thể đoán, truy cập phạm vi toàn cầu với các tham chiếu được đặt tên không phải là ý tưởng hay nhất. Một số người đã gọi đây là “kẻ gây ô nhiễm phạm vi toàn cầu. ” Chúng ta sẽ tìm hiểu lý do tại sao lại như vậy, nhưng trước tiên…
Một số bối cảnh
Cách tiếp cận này được phác thảo trong đặc tả HTML, nơi nó được mô tả là “quyền truy cập được đặt tên trên đối tượng
// Output: "Something else"
13. ”Internet Explorer là người đầu tiên triển khai tính năng này. Tất cả các trình duyệt khác cũng đã thêm nó. Gecko là trình duyệt duy nhất vào thời điểm đó không hỗ trợ nó trực tiếp ở chế độ tiêu chuẩn, thay vào đó chọn biến nó thành một tính năng thử nghiệm. Đã có sự do dự khi triển khai nó, nhưng nó đã tiến lên nhờ khả năng tương thích với trình duyệt [Gecko thậm chí đã cố thuyết phục WebKit chuyển nó ra khỏi chế độ tiêu chuẩn] và cuối cùng đã chuyển sang chế độ tiêu chuẩn trong Firefox 14
Một điều có thể không được biết rõ là các trình duyệt phải đưa ra một số biện pháp phòng ngừa — với mức độ thành công khác nhau — để đảm bảo các toàn cầu được tạo không phá vỡ trang web. Một biện pháp như vậy là…
bóng biến
Có lẽ phần thú vị nhất của tính năng này là các tham chiếu phần tử được đặt tên không che khuất các biến toàn cục hiện có. Vì vậy, nếu một phần tử DOM có
// Output: "Something else"
10 đã được xác định là toàn cầu, thì phần tử đó sẽ không ghi đè lên phần tử hiện có. Ví dụ
// Output: "Something else"
7Và điều ngược lại cũng đúng
// Output: "Something else"
8Hành vi này là cần thiết vì nó vô hiệu hóa các ghi đè nguy hiểm chẳng hạn như
// Output: "Something else"
15, nếu không sẽ tạo ra xung đột bằng cách vô hiệu hóa API
// Output: "Something else"
16. Kỹ thuật bảo vệ này rất có thể là lý do tại sao bạn - nếu bạn giống tôi - đang tìm hiểu về điều này lần đầu tiênTrường hợp chống lại toàn cầu được đặt tên
Trước đó, tôi đã nói rằng sử dụng các phần tử được đặt tên chung làm tham chiếu có thể không phải là ý tưởng hay nhất. Có rất nhiều lý do cho điều đó, mà TJ VanToll đã trình bày rất hay trên blog của anh ấy và tôi sẽ tóm tắt ở đây
- Nếu DOM thay đổi, thì tham chiếu cũng vậy. Điều đó làm cho một số mã thực sự "dễ gãy" [thuật ngữ của thông số kỹ thuật dành cho nó] trong đó sự tách biệt giữa các mối quan tâm giữa HTML và JavaScript có thể là quá nhiều
- Tài liệu tham khảo tình cờ là quá dễ dàng. Một lỗi đánh máy đơn giản rất có thể dẫn đến việc tham chiếu đến một toàn cầu được đặt tên và cho bạn kết quả không mong muốn
- Nó được triển khai khác nhau trong các trình duyệt. Ví dụ: chúng ta sẽ có thể truy cập một mỏ neo bằng một
10 — e. g.// Output: "Something else"
18 — nhưng một số trình duyệt [cụ thể là Safari và Firefox] trả về một// Output: "Something else"
19 trong bảng điều khiển// Output: "Something else"
- Nó có thể không trả lại những gì bạn nghĩ. Theo thông số kỹ thuật, khi có nhiều phiên bản của cùng một phần tử được đặt tên trong DOM - giả sử, hai phiên bản của
70 - trình duyệt sẽ trả về một// Output: "Something else"
71 với một mảng các phiên bản. Tuy nhiên, Firefox chỉ trả về phiên bản đầu tiên. Sau đó, một lần nữa, thông số kỹ thuật nói rằng dù sao thì chúng ta cũng nên sử dụng một phiên bản của// Output: "Something else"
10 trong cây của một phần tử. Nhưng làm như vậy sẽ không ngăn một trang hoạt động hoặc bất cứ thứ gì tương tự// Output: "Something else"
- Có lẽ có một chi phí hiệu suất? . Một số người đã chạy thử nghiệm trong luồng StackOverflow này, trong đó các toàn cầu được đặt tên thực sự hiệu quả hơn trong một thử nghiệm và kém hiệu quả hơn trong một thử nghiệm gần đây hơn
cân nhắc bổ sung
Giả sử chúng ta bỏ qua những lời chỉ trích chống lại việc sử dụng tên toàn cầu và vẫn sử dụng chúng. Tất cả đều tốt. Nhưng có một số điều bạn có thể muốn xem xét khi bạn làm
polyfill
Nghe có vẻ như edge-case-y, các loại kiểm tra toàn cầu này là yêu cầu thiết lập điển hình đối với polyfill. Hãy xem ví dụ sau, nơi chúng tôi đặt cookie bằng cách sử dụng API
// Output: "Something else"
73 mới, điền vào nó trên các trình duyệt chưa hỗ trợ cookieContent is loading ...
8Mã này hoạt động hoàn toàn tốt trong Chrome, nhưng gây ra lỗi sau trong Safari
Content is loading ...
9Safari thiếu hỗ trợ cho API
// Output: "Something else"
73 khi viết bài này. Do đó, polyfill không được áp dụng vì ID phần tử
// Output: "Something else"
75 tạo ra một biến toàn cục xung đột với biến toàn cầu
// Output: "Something else"
76Cập nhật API JavaScript
Chúng tôi có thể lật ngược tình huống và tìm ra một vấn đề khác trong đó các bản cập nhật cho công cụ JavaScript của trình duyệt có thể phá vỡ các tham chiếu chung của phần tử được đặt tên
Ví dụ
Content is loading ...
3Tập lệnh đó lấy một tham chiếu đến phần tử đầu vào và gọi
// Output: "Something else"
77 trên đó. Nó hoạt động chính xác. Tuy nhiên, chúng tôi không biết nó sẽ tiếp tục hoạt động trong bao lâuBạn thấy đấy, biến toàn cục mà chúng ta đang sử dụng để tham chiếu phần tử đầu vào sẽ ngừng hoạt động ngay khi các trình duyệt bắt đầu hỗ trợ API
// Output: "Something else"
78. Tại thời điểm đó, toàn cầu của
// Output: "Something else"
79 sẽ không còn là tham chiếu đến phần tử đầu vào và
// Output: "Something else"
80 sẽ đưa ra lỗi “
// Output: "Something else"
81 không phải là một chức năng”.Phần kết luận
Hãy tóm tắt cách chúng tôi đến đây
- Tất cả các trình duyệt chính tự động tạo các tham chiếu toàn cầu cho từng thành phần DOM bằng một thuộc tính
10 [hoặc, trong một số trường hợp, thuộc tính// Output: "Something else"
11]// Output: "Something else"
- Việc truy cập các phần tử này thông qua các tham chiếu toàn cầu của chúng là không đáng tin cậy và có khả năng gây nguy hiểm. Sử dụng
84 hoặc// Output: "Something else"
85 để thay thế// Output: "Something else"
- Vì các tham chiếu chung được tạo tự động nên chúng có thể có một số tác dụng phụ đối với mã của bạn. Đó là lý do chính đáng để tránh sử dụng thuộc tính
10 trừ khi bạn thực sự cần nó// Output: "Something else"
Vào cuối ngày, có lẽ nên tránh sử dụng tên toàn cầu được đặt tên trong JavaScript. Tôi đã trích dẫn thông số kỹ thuật trước đó về cách nó dẫn đến mã "dễ gãy", nhưng đây là toàn bộ văn bản để đưa điểm chính về nhà
Theo nguyên tắc chung, dựa vào điều này sẽ dẫn đến mã dễ gãy. ID nào kết thúc ánh xạ tới API này có thể thay đổi theo thời gian, chẳng hạn như các tính năng mới được thêm vào nền tảng web. Thay vì điều này, hãy sử dụng
87 hoặc// Output: "Something else"
88// Output: "Something else"
Tôi nghĩ rằng bản thân thông số kỹ thuật HTML khuyên bạn nên tránh xa tính năng này đã nói lên điều đó