Nó được sử dụng chủ yếu trong các trang web để tạo html động như biểu mẫu đăng ký, biểu mẫu nhận xét, liên kết, v.v.
Ví dụ về thuộc tính InternalHTML
Trong ví dụ này, chúng ta sẽ tạo biểu mẫu html khi người dùng nhấp vào nút
Trong ví dụ này, chúng tôi đang viết động biểu mẫu html bên trong tên div có id mylocation. Chúng tôi đang xác định vị trí này bằng cách gọi tài liệu. phương thức getElementById[]
Khi bạn nhận hoặc thiết lập một phần tử trong JavaScript, bạn có rất nhiều tùy chọn — nhiều tùy chọn trong số đó có vẻ giống hệt nhau
Trong bài đăng này, tôi sẽ phân tích những khác biệt tinh tế giữa
const getValue = document.getElementById['blog-test'];
1, const getValue = document.getElementById['blog-test'];
2 và const getValue = document.getElementById['blog-test'];
3 khi bạn thao tác với mã JavaScript của mìnhĐiều gì là tốt nhất. Nội văn so với. Bên trongHTML so với. Nội dung văn bản?
- NộiHTML. Sử dụng InternalHTML cho phép bạn xem chính xác những gì trong phần đánh dấu HTML chứa trong một chuỗi, bao gồm các yếu tố như khoảng cách, ngắt dòng và định dạng.
- Văn bản bên trong. Điều này gần đúng với nội dung văn bản "kết xuất" của một nút và biết về kiểu dáng và CSS. Nó hiệu quả nhất khi bạn chỉ cần xem có gì trong phần tử mà không cần định dạng
- Nội dung văn bản. Điều này truy xuất và đặt nội dung của thẻ dưới dạng văn bản thuần túy. Nó hiệu quả nhất khi bạn muốn xem có gì trong một phần tử, cộng với kiểu dáng
Hãy bắt đầu với một số mã HTML mẫu mà tôi sẽ sử dụng để minh họa cách hoạt động của từng thuộc tính
This element is strong and has some super fun code
!
Như bạn có thể thấy trong đoạn mã trên, chúng tôi đang thêm một số HTML để làm cho từ
const getValue = document.getElementById['blog-test'];
0 [đậm] và làm cho từ _______11 xuất hiện đơn cách nhau. Trình duyệt sẽ hiển thị mã như thế nàyGiả sử chúng ta đang tạo một biến
const getValue = document.getElementById['blog-test'];
2 và đặt nó bằng với biến const getValue = document.getElementById['blog-test'];
3 của chúng taconst getValue = document.getElementById['blog-test'];
Bây giờ, tôi sẽ giải thích những gì bạn nhận được khi gọi
const getValue = document.getElementById['blog-test'];
1, const getValue = document.getElementById['blog-test'];
5 và const getValue = document.getElementById['blog-test'];
3 trên biến const getValue = document.getElementById['blog-test'];
2 đó
InternalHTML trong JavaScript là gì?
________số 8
InnerHTML trả về cái gì?
InnerHTML trả về chuỗi bên trong mã đánh dấu
const getValue = document.getElementById['blog-test'];
3 và HTML [hoặc XML] có trong chuỗi của chúng tôi, bao gồm mọi khoảng cách, ngắt dòng và bất thường về định dạng
Khi nào nên sử dụng InternalHTML
Bạn nên sử dụng
const getValue = document.getElementById['blog-test'];
1 khi muốn xem đánh dấu HTML và chính xác những gì có trong phần tử của bạn — bao gồm mọi khoảng cách, ngắt dòng và bất thường về định dạng
Ghi chú bổ sung của InternalHTML
If the text inside the element includes the characters
getValue.innerHTML
// => This element is strong and has some super fun code
!
0, getValue.innerHTML
// => This element is strong and has some super fun code
!
1, or getValue.innerHTML
// => This element is strong and has some super fun code
!
2, const getValue = document.getElementById['blog-test'];
1 will return these characters as HTML entities “&”, “”.Thông tin thêm về JavaScript Cách chọn giữa vòng lặp For và vòng lặp While
Nội dung trong JavaScript là gì?
const getValue = document.getElementById['blog-test'];
3
Nội dung nào trả về
InnerText trả về chuỗi bên trong
const getValue = document.getElementById['blog-test'];
3 của chúng tôi. Nó xấp xỉ nội dung văn bản “kết xuất” của một nút và biết về kiểu dáng và CSSNghĩ theo cách này. Nếu người dùng đánh dấu nội dung của một thành phần trên màn hình của họ và sao chép nó vào khay nhớ tạm của họ, thì những gì bạn nhận được với
const getValue = document.getElementById['blog-test'];
2 chính xác là những gì nó sẽ trả về
Khi nào nên sử dụng InnerText
Bạn nên sử dụng
const getValue = document.getElementById['blog-test'];
2 khi bạn chỉ cần xem nội dung trong phần tử mà không cần định dạng
Nội dung ghi chú bổ sung
Khi sử dụng
const getValue = document.getElementById['blog-test'];
2 nó sẽ truy xuất và đặt nội dung của thẻ ở dạng văn bản thuần túy. Trong khi khi bạn sử dụng const getValue = document.getElementById['blog-test'];
1, nó sẽ truy xuất và đặt cùng một nội dung ở định dạng HTML
TextContent trong JavaScript là gì?
const getValue = document.getElementById['blog-test'];
5
Nội dung văn bản nào trả về
TextContent trả về nội dung của tất cả các phần tử trong nút, bao gồm các phần tử script và style. Nó nhận thức được định dạng như khoảng cách và ngắt dòng và cũng sẽ trả về những định dạng đó
Khi nào nên sử dụng TextContent
Bạn nên sử dụng
const getValue = document.getElementById['blog-test'];
3 bạn muốn xem phần tử có gì, cộng với bất kỳ kiểu dáng nào
Nội dung văn bản Ghi chú bổ sung
Mặc dù
const getValue = document.getElementById['blog-test'];
2 rất giống với const getValue = document.getElementById['blog-test'];
3, nhưng có những điểm khác biệt quan trọng giữa chúng. Nói một cách đơn giản, const getValue = document.getElementById['blog-test'];
2 nhận thức được hình thức hiển thị của văn bản trong khi const getValue = document.getElementById['blog-test'];
3 thì khôngNâng cao kỹ năng của bạn 4 cách giúp nhà phát triển phần mềm xây dựng kỹ năng của họ
Nội văn so với. Bên trongHTML so với. Nội dung văn bản
Hãy xem lại mã ban đầu của chúng tôi
const getValue = document.getElementById['blog-test'];
6Đây là những gì
const getValue = document.getElementById['blog-test'];
1, const getValue = document.getElementById['blog-test'];
2 và const getValue = document.getElementById['blog-test'];
3 trả vềconst getValue = document.getElementById['blog-test'];
7Như bạn có thể thấy, có một số điểm khác biệt chính giữa ba điểm mà chúng tôi đã đề cập trong bài đăng này
Ngoài ra, bạn cũng nên lưu ý rằng có những ý nghĩa an toàn khác nhau khi sử dụng từng tài sản — đặc biệt là
const getValue = document.getElementById['blog-test'];
1. Ví dụ: mặc dù const getValue = document.getElementById['blog-test'];
1 thường được dùng để chèn văn bản hoặc tạo kiểu, nhưng nó cũng có thể được dùng để chèn các thẻ const getValue = document.getElementById['blog-test'];
39 thực thi JavaScript. Mặc dù HTML5 chặn bất kỳ thẻ const getValue = document.getElementById['blog-test'];
39 được chèn qua const getValue = document.getElementById['blog-test'];
1 nào thực thi, nhưng có nhiều cách khác để thực thi JavaScript không liên quan đến const getValue = document.getElementById['blog-test'];
39Vì vậy, hãy chú ý khi sử dụng
const getValue = document.getElementById['blog-test'];
1, vì các cuộc tấn công độc hại có thể nhắm mục tiêu vào bất kỳ vị trí nào trong mã của bạn sử dụng const getValue = document.getElementById['blog-test'];
1 để đặt hoặc cập nhật một phần tử.