Bạn đã nghe nói về thao túng dom chưa? Hãy để xem mô hình đối tượng tài liệu [DOM] là gì là giao diện lập trình cho HTML. Đơn giản là bạn có thể nói, cấu trúc của tài liệu HTML của bạn. DOM là biểu diễn giống như cây của nội dung của trang web bằng các nút thay vì các phần tử. Các nút này đại diện cho các phần tử HTML và chúng có thể được thao tác và kết xuất lại. DOM là phân cấp, theo cấu trúc giống như cây logic, trong đó các nút con được chứa trong các nút mẹ.
Document Object Model [DOM] is a programming interface for HTML. Simply you can say, the structure of your HTML document. The DOM is a tree-like representation of the contents of a webpage using nodes instead of elements. These nodes represent HTML elements, and they can be manipulated and re-rendered. The DOM is hierarchical, following a logical
tree-like structure, where child nodes are contained in parent
nodes.
Bạn sẽ thấy ba thuộc tính trong khi làm việc trên DOM I.E Internal, InsideHtml, TextContent. Bạn cần phải biết cách thay đổi văn bản hoặc HTML xuất hiện trên trang để làm cho các trang web của bạn tương tác hơn. Tất cả các thuộc tính bên trong, bên trong và TextContent cho phép bạn truy cập và thay đổi nội dung của thẻ. Đó là nơi mà các thuộc tính HTML bên trong và bên trong, các thuộc tính HTML TextContent xuất hiện. Đôi khi mọi người bối rối về ba thuộc tính này. Đó là thời gian để xóa tất cả sự nhầm lẫn và tìm hiểu nơi sử dụng các thuộc tính này.
HTML mà chúng tôi sẽ sử dụng cho các ví dụbên trong thuộc tính JavaScriptHTML đặt nội dung HTML của một phần tử trên trang web. InsideHTML là một thuộc tính của HTML DOM và thường được sử dụng để đặt và sửa đổi nội dung của một phần tử. InsideHTML trả về nội dung của một phần tử và bất kỳ khoảng cách và con cháu nào. InsideHTML trả về tất cả các văn bản, bao gồm các thẻ HTML, được chứa bởi một phần tử.
The JavaScript innerHTML property sets the HTML contents of an element on a web page. InnerHTML is a property of the HTML DOM and is often used to set and modify the contents of an
element. innerHTML returns the content of an element and any spacing and descendants. innerHTML returns all text, including HTML tags, that is contained by an element.
Mã JavaScript cho Mã InnerHTMLJavaScript cho InsideHTML [đầu ra]bên trong thuộc tính JavaScript bên trong đặt nội dung văn bản của một phần tử có thể hiển thị trên một trang web được truy cập. Nội dung ẩn không thể lấy được. Nó cũng đặt nội dung của con cháu của nó. Innertext trả về văn bản mà không có bất kỳ hậu duệ hoặc khoảng cách. Bạn sẽ sử dụng bên trong nếu bạn muốn xem nội dung của một phần tử trong văn bản thuần túy. InnerText trả về tất cả các văn bản và thẻ chứa bởi một phần tử và tất cả các phần tử con của nó.
The JavaScript innerText property sets the text content of an element that is visible on a web page are accessed. The hidden content cannot be retrieved. It also sets the contents of its
descendants. innerText returns the text without any descendants or spacing. You would use innerText if you want to see the contents of an element in plain text. innerText returns all text and tags contained by an element and all its child elements.
TextContentIn TextContent, tất cả các văn bản bao gồm các nội dung ẩn có thể được truy cập. TextContents là tất cả các văn bản được chứa bởi một yếu tố và tất cả trẻ em của nó chỉ nhằm mục đích định dạng.
In textContent, all the text including the hidden
contents can be accessed. textContents is all text contained by an element and all its children that are for formatting purposes only.
Cải thiện bài viết
Lưu bài viết
Cải thiện bài viết
Lưu bài viết
Đọc and innerHTML are both properties of JavaScript. However, there are differences in which the text is handled. Let us check the syntax of the two and then take an example to look at the differences.
Syntax:
Bàn luận
var x = document.getElementById['test'];
- Bên trong và bên trong đều là các thuộc tính của JavaScript. Tuy nhiên, có sự khác biệt trong đó văn bản được xử lý. Hãy để chúng tôi kiểm tra cú pháp của cả hai và sau đó lấy một ví dụ để xem xét sự khác biệt. & NBSP;
x.innerText
- Chúng ta hãy giả sử rằng chúng ta có một biến JavaScript gọi là x.
x.innerHTML
Example:
Nội tâm
x.innerText0
x.innerText4
x.innerText5
x.innerText6
x.innerText7
x.innerText0
x.innerText9
x.innerText2
>
x.innerText9
head
>
4
>
7
x.innerText4
>
9x.innerText4
x.innerText01
>
4>
5
>
4
x.innerText05
x.innerText4
>
9x.innerText0
x.innerText9
>
0>
x.innerText9
x.innerHTML6
>
x.innerText9
html
>
Output
Trước khi nhấp vào:
Sau khi nhấp vào bên trong
Sau khi nhấp vào bên trong:
Differences:
Như chúng ta có thể thấy từ ví dụ ở trên thuộc tính bên trong đặt hoặc trả về nội dung văn bản dưới dạng văn bản đơn giản của nút được chỉ định và tất cả các hậu duệ của nó trong khi thuộc tính bên trong nhận được và đặt nội dung văn bản hoặc HTML đơn giản trong các phần tử. Không giống như bên trong, HTML bên trong cho phép bạn làm việc với văn bản phong phú HTML và không tự động mã hóa và giải mã văn bản.innerText property sets or returns the text content as plain text of the specified node, and all its descendants whereas the innerHTML property gets and sets the plain text or HTML contents in the elements. Unlike innerText, inner HTML lets you work with HTML rich text and doesn’t automatically encode and decode text.