CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN này giải thích về Document Object (DOM) trong JavaScript, được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này thì nhớ like nhé.

Xin chào mọi người, tôi là người chia sẻ CNTT, được gọi là Pippi.

Lời nói đầu

Tôi tin rằng bạn đã quen thuộc với JavaScript khi xây dựng một trang web. Nó là một ngôn ngữ kịch bản lệnh. Khác với Python, nó là ngôn ngữ kịch bản trình duyệt, trong khi Python là ngôn ngữ kịch bản máy chủ. vì nó rất hữu ích trong việc tạo trang web.

1. Đối tượng tài liệu (DOM)

1) Đối tượng tài liệu

Đây là đối tượng tài liệu được sử dụng phổ biến nhất, đặc biệt được sử dụng để vận hành các nút DOM.

1)).Lấy phần tử.

1. document.getElementById() #Tìm phần tử HTML theo id 
2. document.getElementsByName() #passtênTìm phần tử HTML 
3. document.getElementsByTagName() #Tìm phần tử HTML theo tên thẻ 
4. document.getElementsByClassName() #Tìm phần tử HTML theo tên lớp  
5. tài liệu.querySelector(".h") #Tên lớp đầu tiên là "h" các yếu tố của 
6. tài liệu.querySelectorAll("div.no, div#h") #Tất cả các lớp đều"KHÔNG"Hoặc id là"h"phần tử div 
7. document.body #Lấy thẻ body 
8. document.documentElement #Nhận thẻ html 

2)). Nhận nội dung web.

1. document.cookie #Cookie trang web 
2. document.domain #Tên miền của tài liệu 
3. document.lastModified #Ngày và giờ tài liệu được sửa đổi lần cuối 
4. document.referrer #Load URL của tài liệu của tài liệu hiện tại 
5. document.title #Tiêu đề của tài liệu hiện tại 
6. document.URL #URL của tài liệu hiện tại 
7. document.doctype #doctype của tài liệu hiện tại 
8. document.baseURI #URI tuyệt đối của tài liệu hiện tại 
9. document.documentMode #Chế độ được trình duyệt sử dụng 
10. document.documentURI #URI của tài liệu 
11. document.implementation #DOM triển khai 
12. document.inputEncoding #Mã hóa tài liệu (bộ ký tự) 
13. trạng thái document.readyState #Document (đang tải) 
14. document.strictErrorChecking #Có thực thi việc kiểm tra lỗi không 

3)).Viết tài liệu.

1. tài liệu.viết('xin chào thế giới') ghi văn bản vào tài liệu 
2. document.writeln('xin chào thế giới') viết văn bản vào tài liệu và gói nó 

4)).Nhận bộ sưu tập.

1. tài liệu.tất cả        #Tất cả các phần tử html 
2. document.anchors #Tất cả tài liệu tham khảo Anchor 
3. document.forms #Tất cả tham chiếu biểu mẫu 
4. document.images #Tất cả các tài liệu tham khảo hình ảnh 
5. document.links #Tất cả các tham chiếu siêu liên kết 
6. document.scripts #Tất cả tài liệu tham khảo tập lệnh 
7. document.embeds #Tất cả các tài liệu tham khảo về phương tiện truyền thông trực tuyến 

5)).Nhận nút.

1. childNodes #Lấy tập hợp các nút con, trả về một mảng và coi các dòng mới và dấu cách là thông tin về nút. 
2. trẻ em #Lấy tập hợp các nút con và trả về một mảng    
3. firstChild #Lấy phần tử con đầu tiên và coi dòng mới và dấu cách là thông tin nút 
4. firstElementChild #Lấy nút con đầu tiên 
5. LastChild #Lấy nút con cuối cùng và coi các dòng mới và dấu cách là thông tin về nút 
6. LastElementChild #Lấy nút con cuối cùng 
7. parentNode #Lấy nút cha 
8. parentElement #Lấy nút cha (IE) 
9. offsetParent #Nhận tất cả các nút cha. Giá trị tương ứng là tất cả thông tin nút bên dưới phần thân. 
10. trướcAnh chị em #Nhận các ký tự khớp với nút anh chị em trước đó, bao gồm dòng mới và dấu cách, không phải nút 
11. trướcElementSibling #Lấy nút anh chị em trước đó và khớp trực tiếp với nút 
12. nextSibling #Nhận các ký tự khớp với nút anh chị em tiếp theo, bao gồm dòng mới và dấu cách, không phải nút 
13. nextElementSibling #Nhận nút anh chị em tiếp theo và khớp trực tiếp với nút 
14. ownerDocument #Nút gốc của phần tử 

Ở đây chúng ta đã thu được tất cả các phần tử Div. Chúng ta có thể lấy cụ thể các phần tử con của Div theo ID và các phần tử anh em, phần tử cha và phần tử con của nó, như sau:

6)).Tạo các nút.

Chúng ta có thể tùy chỉnh các nút và thêm giá trị, nhưng để thêm nó vào tài liệu, chúng ta phải thêm các nút, thường được sử dụng cùng với việc thêm các nút bên dưới.

1. document.createElement(tag) #Tạo phần tử HTML 
2. document.createTextNode(text) #Thêm văn bản vào tài liệu 
3. document.createComment(text) #Tạo nút nhận xét 
4. document.createDocumentFragment() #Tạo nút phân mảnh tài liệu 

7)).Thêm nút.

1. appendChild(node) #Node được thêm vào cuối phần tử 
2. InsertBefore(a,b) #nút a sẽ được chèn vào trước nút b 

8)).Xóa nút.

1. RemoveChild(tên nút) #Nút bị xóa vẫn còn trong tài liệu, nhưng vị trí của nó không còn trong tài liệu. 

9)).Thay thế nút.

1. thay thếChild(nút được chèn, nút được thay thế) 

10)).Sao chép nút.

1. a.cloneChild() #Sao chép một nút và nút được sao chép sẽ được sử dụng làm giá trị trả về.ĐÚNG VẬYKhi đó, phần tử con của phần tử a cũng được sao chép. Mặt khác, chỉ có phần tử a được sao chép 

11)).Thuộc tính nút.

1. #Node type nodeType có ba tình huống 
2. #1.Nút phần tử 2.Nút thuộc tính 3.Nút văn bản 
3.  
4. #Tên nút Tên nút  
5.  
6. #Node giá trị nodeValue  
7. #Nút phần tử không có giá trị nút, tức làvô giá trị  
8. #Giá trị nút của nút văn bản là văn bản 
9. #Giá trị nút của nút thuộc tính là giá trị thuộc tính 
10.  
11. #Thu thập thuộc tính Node 
12. a. chiều rộng 
13. Một['chiều rộng'] 
14. a.gerAttribution(tên thuộc tính) trả về giá trị thuộc tính đã chỉ định 
15. a.gerAttributionNode(tên thuộc tính) trả về nút thuộc tính đã chỉ định 
16. Cài đặt thuộc tính nút 
17. a. chiều rộng = 400 
18. Một['chiều rộng']=400 
19. a.thuộc tính['chiều rộng']=400 
20. a.setAttribute('chiều rộng',400) Thêm thuộc tính được chỉ định 
21. a.setAttributionNode(b) thêm nút thuộc tính được chỉ định 
22.  
23. #Xóa thuộc tính Node 
24. a.removeChild(child node) loại bỏ các nút con khỏi các phần tử 
25. a.removeAttribution(attribute) xóa thuộc tính đã chỉ định khỏi phần tử 
26. a.removeAttributionNode(attribute) xóa nút thuộc tính đã chỉ định và trả về nút đã xóa 
27.  
28. a.id lấy id của phần tử hiện tại 
29. a.className lấy lớp của phần tử hiện tại 
30. a.classList Lấy danh sách lớp của phần tử hiện tại 
31.  
32. a.accessKey='TRONG'    Đặt hoặc trả về phím tắt cho một phần tử 
33. a.namespaceURI trả về URI của không gian tên của nút đã chỉ định 
34. a.dir đặt hoặc trả về nội dung của phần tử có thể chỉnh sửa được hay không 
35. a.normalize() hợp nhất các nút văn bản liền kề trong phần tử và loại bỏ các nút văn bản trống 
36. a.tabIndex='3'     Đặt hoặc trả về thứ tự điều khiển phím tab của các phần tử 
37. a.tagName trả về tên thẻ của phần tử 
38. a.textContent đặt hoặc trả về nội dung văn bản của nút và các nút con của nó 
39. a.title đặt hoặc trả về thuộc tính tiêu đề của phần tử 
40. a.item(num) trả về nút tại chỉ mục đã chỉ định trong danh sách nút 
41. a.length trả về số lượng nút trong danh sách nút 

12)).Lấy văn bản phần tử.

1. a.innerHTML Lấy hoặc đặt HTML trong đối tượng 
2. a.innerText lấy hoặc đặt văn bản trong đối tượng 
3. a.outerHTML Lấy hoặc đặt HTML bên ngoài đối tượng 
4. a.outerText lấy hoặc đặt văn bản bên ngoài đối tượng 
5. a.value Lấy hoặc đặt giá trị của một phần tử biểu mẫu 

Tóm tắt

Bài viết này chủ yếu giới thiệu đối tượng tài liệu JavaScript. Trong bài viết tiếp theo, chúng tôi sẽ tiếp tục giới thiệu về JavaScript, vì vậy hãy chú ý theo dõi.

Liên kết gốc: https://mp.weixin.qq.com/s/QFEvlY4AV4tXSwYlv4_DJQ.

Cuối cùng, bài viết này về cách diễn giải một bài viết về Đối tượng Tài liệu (DOM) trong JavaScript kết thúc tại đây. Nếu bạn muốn biết thêm về cách diễn giải một bài viết về Đối tượng Tài liệu (DOM) trong JavaScript, vui lòng tìm kiếm các bài viết CFSDN hoặc. tiếp tục duyệt các bài viết liên quan, tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .