Var> thẻ html

Question

Mẫu DOM trong javascript – định dạng thẻ trong tài liệu HTML. Nó mô tả tập tin dẫn đến các trang thẻ bộ bắt trú trong trang web

Nội dung chính Show

Giới thiệu về mô hình DOM
Node in DOM damage
Các loại nút trong DOM
Các tính năng liên tục vá lỗi trong một nút
Thuộc tính trong một nút
Các hamm trong một nút
Chọn nút trong DOM bằng Javascript
At Sao Mình Lại Hồng Dẫn Các Tab Xây Dựng Dúsng
Up Ý Tương
Code Thôi Nào
Mã Javascript

Giới thiệu về mô hình DOM

Khi trình duyệt đọc cấu trúc html của trang web, nó sẽ tạo ra một mô hình phân cấp để hiển thị cấu trúc html của trang, được gọi là mô hình DOM

Mô hình DOM là 1 trong các tiêu chuẩn của W3C – tiêu chuẩn W3C xác định các tiêu chuẩn web. DOM quy định cách nào mà bản gốc của cây nội dung của bạn lạ. Nhờ DOM, bạn có thể sử dụng Javascript

Nội dung của các tag HTML
Các dòng tính các thẻ HTML
Điều chỉnh các thẻ CSS và HTML
Xoá các thẻ và tính toán không mong muốn
Thêm thẻ HTML mới
Tương tác với các sự kiện của thẻ

Node in DOM damage

Mỗi phần của DOM được gọi là 1 Node. Mỗi nút có thuộc tính và chức năng riêng

<html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <a href="index.html">My link</a>
        <h1>My header</h1>
    </body>
</html>

Node de process in DOM beiệt là root (gốc), do là node document
Các nút Midia trong DOM có làm quan trọng là cha, con và anh em (anh chị em)
Tất cả các nút trừ gốc chỉ có một cha
Một nút có thể có nhiều con hoặc không có con nào
Node lá (lá) no con
Nội nút anh em (siblings) Bay nhau có của yên cha

Tóm lại, cấu trúc DOM trong javascript giống như một cái cây có gốc và nhiều nhánh. Góc cây là nút công và các nhánh cần là nút con cần

Các loại nút trong DOM

Có nhiều loại nút trong DOM, xem bảng bên dưới

nút tài liệu. is node is a multi-tản bộ tài liệu
nút phần tử. là tại nút hội tụ các thẻ html đang hoạt động trong trang web. Ví dụ br, img
nút bình luận. là nút ghi chú trong tài liệu
nút thuộc tính. là nút được tính liên tục bởi các thẻ
nút văn bản. is node to the letter in the tag

Các tính năng liên tục vá lỗi trong một nút

Trong mô hình DOM, mỗi nút có nhiều thuộc tính và nhiều chức năng

Thuộc tính trong một nút

Thuộc tính mô tả các thuộc tínhMảng là tận thế đến nodechildElementCountĐếm các phần tử conchildNodesMảng các con đến node, đến cầu văn bản và nút chú thíchcon cáiMảng các phần tử con, đầu cần văn bản và chú thích nodeclassListTrả các class cssclassNameThuộc tính class cssclientHeightĐộ cao sự cố node, lấy cả paddingclientLeftTrả điện cho viền left of ElementclientTopTrả về độ lớn của đường viền trên ElementclientWidthĐộ rộng của nút, bao gồm cả paddingcontentEditableTrạng thái cho phép soạn thảo nội dungfirstChildNode con idId đầu tiên của nodeinnerHTMLCode htmlinnerTextGán hoặc trả về văn bản trong phần tử (không có mã html)lastChildLấy nút con cuối. nextElementSiblingLặt phần tử kfile. nodeNameTrả tên nội bộ nodenodeTypeCho hượng nộing nh node (phần tử, văn bản, thuộc tính…)parentElementTrả nội node chapreviousElementSiblingLặh phần tử node nội nhạn node nội tiền styleTạp hơp các tính toán css nường nodetagNametag

Các hamm trong một nút

appendChild()Add node conclick()Hàm hột khi của bạn và elementblur()Hàm hột khi element tại focuscontains()Hàm hột khi element có focusgetAttribute()Hàm đến đội giá vượt trội đến 1 đồng tình htmlgetBoundingClientRect()Trả về kích thước của một phần tử và vị trí của nó so với viewportgetElementsByClassName()Lắp đặt các phần tử theo class cssgetElementsByTagName()Lắp xếp các phần tử theo taghasAttribute()Trả định true true if phần tử có tùy chọn hạn chế , đến số đếm falseinsert Before()Chèn nút con ội nội nhại node tinhịsetAttribute()Hàm nội gán giá trị ghi cho 1 tính năng html nhạn nodequerySelector() only raremove() Hàn đội tuyển bội node hội tại ra nội DOMremoveAttribute()Xóa tính năng bạn nội ra thuộc tínhremoveChild()Xóa node con phần tử nội dung

Chọn nút trong DOM bằng Javascript

Bạn có thể chọn các nút trong DOM bằng cách sử dụng Javascript

getElementById(id). Quay lại nút có tính id tính tế
getElementsByName(tên). Trả về 1 mảng các nút chỉ có tên
getElementsByTagName(tên). Trả số 1 đặt các nút có tên thẻ tải xuống từ
getElementsByClassName(tên). Trả lời 1mảng các nút có định mức lớp

Ngoài ra, bạn có thể sử dụng mối quan hệ giữa hai nút để truy cập các nút.

Hôm nay mình sẽ hướng dẫn các bạn xây dựng một chức năng rất phổ biến hiện nay trong các trang web đó là tab

At Sao Mình Lại Hồng Dẫn Các Tab Xây Dựng Dúsng

Thì các bạn thử search trên google xem có vài cái trò chơi nười tàn các bảnh làm tab, các plugin như bootstrap tab,. Nhưng mình vẫn muốn viết 1 bài hướng dẫn các bạn. Vậy mục đích sống của tôi là gì?

Mục Đích Bài Viết

Mục đích của bài viết này là giúp bạn cập nhật kiến thức về html, css và js. Đừng phụ thuộc quá nhiều vào thư viện để giúp bạn cải thiện tư duy, logic và kỹ năng giải quyết vấn đề

Bạt Đầu Thôi Nào

Up Ý Tương

Thì tải tab nài nó sinh ra đến lúc thì tối tối nhau theo cầm tab nha nha. Bạn có thể sử dụng html, css để bố trí và sử dụng JS để sử dụng các tab
Ví dụ lại website linh điền đến tử 3M trong phước bổ paệm bạn nội nội chia ra làm ba tab ảnh nha

Code Thôi Nào

Mã HTML

Trước hết bạn cần code code của mình để có thể tạo tab cho nó. Trong tab có hai mặt chính là liên kết tab và nội dung tab
Trong tab liên kết các bên dữ liệu cho các nút trong nút này, các thuộc tính dữ liệu. để có thể tìm kiếm nội dung tab với mục đích sử dụng liên kết tab để thay đổi các tab
Téem theo is in tab content, các bên cho thuê nội dung khách sạn id xác định nhau một số nhóm đánh giá trong data-attributes. Nếu nội dung như vậy bạn có thể tùy chỉnh theo ý muốn
Bạn để nút đầu tiên của link tab sẽ thấy có 1 lớp khác đang active, vậy lớp active dùng để làm gì thì bạn xem ở phần css nhé. Tương tự như trong phần nội dung tab

 <!-- Tab links -->
      <div class="tabs">
         <button class="tablinks active" data-electronic="allproducts">Tất cả sản phẩm</button>
         <button class="tablinks" data-electronic="Microcontrollers">Vi điều khiển - Nhúng</button>
         <button class="tablinks" data-electronic="module">Module ứng dụng</button>
      </div>

      <!-- Tab content -->
      <div class="wrapper_tabcontent">
         <div id="allproducts" class="tabcontent active">
           <img src="https://bizweb.dktcdn.net/thumb/large/100/228/168/products/sp1-949f885f-8d8a-445e-be5c-0cce06cdb4b1.jpg?v=1582441789000" width="100%"/>
           <h3>Combo Trạm Hàn Hakko 936 + Sensor Hàn A1321</h3>
         </div>

         <div id="Microcontrollers" class="tabcontent">
                <img src="https://bizweb.dktcdn.net/thumb/large/100/228/168/products/raspberry-pi-4-model-b.jpg?v=1566526980000" width="100%"/>
           <h3>Raspberry Pi 4 Model B 2019</h3>
         </div>

         <div id="module" class="tabcontent">
           <img src="//bizweb.dktcdn.net/thumb/large/100/228/168/products/sp1-96b83938-650f-4f51-8b0a-61ee9f8f9039.jpg?v=1580721383000" width="100%"/>
           <h3>Module Khuếch Đại Âm Thanh Bluetooth Stereo 30W/40W Công Suất Cao XY-P40W</h3>
         </div>
      </div>

ы ы. tôi sử dụng codepen. io để code tạo tab, ngoài ra bạn có thể dùng text editor hoặc IDE khác để code tạo tab nha
Các bên cầm quyền xem đến khi xuất ra code HTML cho nó nha

Mã CSS

Mà cái mà tabs nườn ta của nội dung khiếu nại, bộ của nội dung ảnh thị nưu ta của css cho nó. Phần CSS này mình sẽ không nói nhiều vì nó hoàn toàn là kiến thức cơ bản
In this side css for two. active đó là .tablinks.active và .tabcontent.active một thứ dùng để hiển thị màu nền, màu chữ còn dùng để hiển thị nội dung của tab ta thêm class vào

/* Tab Links */
.tabs{
  display:flex;
}
.tablinks {
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  padding: 1rem;
  font-size: 13px;
  text-transform: uppercase;
  font-weight:600;
  transition: 0.2s ease;
}
.tablinks:hover{
  background:blue;
  color:#fff;
}
/* Tab active */
.tablinks.active {
   background:blue;
  color:#fff;
}

/* tab content */
.tabcontent {
  display: none;
}
/* Text*/
.tabcontent p {
  color: #333;
  font-size: 16px;
}
/* tab content active */
.tabcontent.active {
  display: block;
}

Các bên cần phải xem thứ tấn tửu khi không cần ta code CSS cho nó nha

คั่ม่วั่มี่มี่มี่มี่ bố cục สี่มี่ ที่มี่ cho các tab

Mã Javascript

Đây là một phần rất quan trọng của câu chuyện. Tuy nó khá quán động đến nó nó không quá khó không đội
Trước hết, bạn sẽ biết cách sử dụng các tab. Thì trong các tab link nướn ta có nút ba thì khi click vào nút thị hai thì nội dung trong taghi thị hai một bội trị vạn thị tại thị nữ dụng trong nút taghi thị ba và thị nhất. Những thẻ nào có thể được thêm vào. hoạt động khi bạn bấm vào nút காட்ட்டுக்க்குத
Vì vậy, bạn nên sử dụng data-attribute và id để có thể lấy nội dung của từng tab khác nhau

var tabLinks = document.querySelectorAll(".tablinks");
var tabContent =document.querySelectorAll(".tabcontent");

tabLinks.forEach(function(el) {
   el.addEventListener("click", openTabs);
});


function openTabs(el) {
   var btn = el.currentTarget; // lắng nghe sự kiện và hiển thị các element
   var electronic = btn.dataset.electronic; // lấy giá trị trong data-electronic
 
   tabContent.forEach(function(el) {
      el.classList.remove("active");
   }); //lặp qua các tab content để remove class active

   tabLinks.forEach(function(el) {
      el.classList.remove("active");
   }); //lặp qua các tab links để remove class active

   document.querySelector("#" + electronic).classList.add("active");
   // trả về phần tử đầu tiên có id="" được add class active
   
   btn.classList.add("active");
   // các button mà chúng ta click vào sẽ được add class active
}

GetElementsByClassName và getElementsByClassName bằng cách sử dụng querySelectorAll, sau đó sử dụng querySelectorAll, sau đó sử dụng querySelectorAll.
Để có thể chuyển tab bạn cần bấm vào nút chuyển tab. tham số el này là một phần tử đa dạng tấm

Thì quay lại tại tab links và tab content nơi chơi bai add class vui nhất. Nên khi nười ta click vô các liên kết tab ọ hai thị tab liên kết, tab nội dung đội bai đi đến đếp hông tại nàu trong tab liên kết hay nội dung tab có thêm. active netizen remove. Khi remove xong, liên kết tab và nội dung tab để thêm hai chủ đề. tích cực

Chung ta cầm xem nội dung tại tab nất thị nhuế nhé

Các bên có tham khảo mã nguồn đầy đủ không thết mã trong codepen thiện

Reaction

Vì vậy Là Xong cuộc chiến Xây dựng Tabs bằng HTML, CSS và Javascript vột nhé. Mình post topic này để các bạn hiểu thêm về kiến thức HTML, CSS và JS. Học được nhiều kiến thức tuy không mới nhưng cũng có thể giúp ích được phần nào cho các bạn. Có tạm thời khách sạn sử dụng nội dự án không được hỗ trợ kết quả đặc biệt bài bạn nó do chị bạn sử dụng thì dịnh coi là thành quả trong quà trịn bạn hỗ trợ thành công

Bạn nào cảm thấy bài viết của mình hay thì ủng hộ mình để mình có thêm động lực đọc những bài viết hay và chất lượng cao nhé.

programming html