Outerhtml là gì

Mục Lục

• 1. DOM là gì?
• 2. HTML DOM là gì?
• 3. DOM Selector
• 4. Thao tác với DOM trong JavaScript
• Tổng kết

Một công việc phổ biến khi làm việc với JavaScript phía Web Front end là thao tác với DOM. Vậy DOM là gì? Thao tác với DOMnhư thế nào? Hãy cùng tìm hiểu trong bài học này nhé.

1. DOM là gì?

DOM là viết tắt của từ Document Object Model [khá khó hiểu đúng không nào? :D]

Giải thích một chút DOM là một giao diện lập trình ứng dụng [API] để thao tác với các tài liệu HTML và XML.

DOM đại diện cho một tài liệu dưới dạng một cây tài liệu[Document Tree] gồm có nhiều nốt / nút / node [gì cũng được :v].

Nó cung cấp API cho phép bạn có thể thêm, sửa và xóa các thành phần của cây tài liệu một cách hiệu quả.

> Chú ý: DOM là một trình xử lý tài liệu HTML và XML đa nền tảng [cross-platform] mà không phục thuộc vào ngôn ngữ.

2. HTML DOM là gì?

Khi một trang web được tải về, trình duyệt sẽ tạo ra một Document Object Model [DOM].

Đối với HTML DOM thì mọi thành phần đều được xem là node, được biểu diễn trên 1 cây cấu trúc gọi là cây DOM.

Các phần tử khác nhau sẽ được phân loại node khác nhau.

Có 3 loại node chính:

• Node gốc [Document node]: Chính là tài liệu HTML

• Node phần tử [Element node]: Biểu diễn cho 1 phần tử của HTML

• Node văn bản [Text node]: mỗi đoạn ký tự trong tài liệu HTML, bên trong 1 tag HTML đều là một node văn bản.Đó có thể là tên trang web trong thẻ , tên heading 1 trong thẻ

  , hay một đoạn văn bản

  .

• Ngoài ra còn có node thuộc tính [attribute node] và node chú thích [comment node].

Ví dụ một cây DOM cơ bản:

DOMinJavaScript

Xinchàocácbạn

Đây là sơ đồ minh họa của nó:

Ví dụ minh họa về cây DOM đơn giản

Trong cây DOM trên:

• Document là Node gốc.

• Node gốc có một node con là thẻ .Thẻ dược gọi là node phần tử của tài liệu.

• Trong node phần tử các node văn bản nằm trong thẻ và

• Mỗi tài liệu chỉ có thể có một phần tử Document.

• Trong tài liệu HTML, phần tử Document là phần tử . Mỗi một đánh dấu [markup]có thể được biểu diễn bằng một node trong cây.

3. DOM Selector

Như bạn đã thấy mô hình DOM HTML ở bên trên. Để thao tác được với DOM thì việc đơn giản là bạn phải nhắm đến được nó.

Việc này cũng giống như là CSS Selector phải nhắm đúng thì mới áp dụng được style cho HTML vậy.

Vậy, chúng ta sẽ đi vào tìm hiểu một số cách để nhắm chọn phần tử DOM mà bạn muốn.

Đầu tiên...

3.1. Nhắm đến phần tử DOM hàng đầu

Các phần tử hàng đầu trong DOM HTML có sẵn trực tiếp dưới dạng các thuộc tính củadocument.

Do đó, chúng ta có thể truy cập nó bằng cách sử dụng dấu chấm .

Ví dụ:

• Phần tử html có thể được truy cập bằng document.documentElement

• Phần tử head có thể được truy cập bằng document.head

• Phần tử body có thể được truy cập bằng document.body.

Chúng ta hãy thử làm một vài ví dụ sau. Bạn hãy tạo một file HTML và một file .js

Hoặc có thể sử dụng từng DOM selector ở bên dưới chạy trên tab console của trang web bất kỳ để thấy cách nó thay đổi.

Bước 1: Vào trang web bất kỳ, ví dụ //niithanoi.edu.vn

Sau đó đến tab Console và thử nghiệm DOM Selector

Ví dụ DOM Selector:

//Hiểnthịgiátrịthuộctínhlangcủaphầntửhtml

letx=document.documentElement.getAttribute["lang"]];//Kếtquả:vi

console.log[x];

Thử thiết lập CSS xem nhé:

//Thiếtlậpmàunềnchophầntửbody

document.body.style.background="gray";

Và đây là ví dụ lấy tên thẻ:

//Hiểnthịtagnamcủaphầntửđầutiêntronghead

alert[document.head.firstElementChild.nodeName];

3.1. Nhắm đến phần tử DOM bằng ID

Nếu phần tử DOM có thuộc tính id thì ban có thể dễ dàng nhắm đến nó thông qua phương thức getElementById[]

Hãy xem ví dụ để hiểu cách sử dụng:

Đầu tiên ta có HTML:

ThaotácvớiDOMthôngquaID

Và nếu bạn viết code JS như thế này:

letx=document.getElementById["tieuDe"];

console.log[x];

Thì trong màn hình console nó sẽ trả về:

Tuy nhiên, chúng ta muốn nhắm đến phần tử có id đó để làm cái gì đó như thay đổi [thiết lập] màu sắc thì làm như thế này:

//NhắmđếnphầntửcóidlàtieuDe

letx=document.getElementById["tieuDe"];

//Thiếtlậpmàuđỏchonó

x.style.color="red";

Phương thức getElementById[] trả về phần tử dưới dạng đối tượng, nếu không tìm thấy thì nó trả về null

3.2. Nhắm đến phần tử DOM bằng Class Name

Tương tự, bạn có thể sử dụng phương thức getElementsByClassName[] để lấy tất cả các phần tử có class nào đó.

Ví dụ, ta có HTML như sau:

ThaotácvớiDOMthôngquaClass

Nhiềuphầntửcóthểcócùngtênclass

VìthếnólàgetElementschứkhôngphảigetElement

Bây giờ, muốn lấy tất cả các phần tử có class là nhom1 thì làm thế này:

letx=document.getElementsByClassName["nhom1"];

Bởi vì có thể sẽ lấy được nhiều phần tử nên xtrả về sẽ giống như một mảng và có thể truy cập thông qua chỉ số index.

Hơi khó hiểu nhỉ.

Kiểm tra thử xem lấy được bao nhiêu phần tử có class là nhom1 nhé:

//Kiểmtraxemlấyđượcbaonhiêuphầntử

console.log[x.length];//Kếtquả:3

Bây giờ, thông qua chỉ số index là ta có thể truy cập, sửa đổi nó như thế này:

//Thiếtlậph2thànhmàuđỏ

x[0].style.color="red";

Ta cũng có thể lặp qua các phần tử này bằng cách sử dụng vòng lặp for in:

//Lặpquatừngphầntửvàthiếtlậpnềnmàu

for[leteleminx]{

x[elem].style.background="blue";

}

Bạn thử chạy xem kết quả có đúng mong đợi không nhé. :D

3.3. Nhắm đến phần tử DOM bằng Tag Name

Bạn cũng có thể nhắm đến các phần tử HTML theo tên thẻ bằng phương thức getElementsByTagName[].

Phương thức này cũng trả về một đối tượng giống mảng của tất cả các phần tử con với tên thẻ đã cho.

Ta có HTML:

NhắmđếnPhầntửsửdụngTagName

Nósẽlấytấtcảcácphầntửvớithẻtagđó

Kếtquảtrảvềgiốngnhưmảng.Sauđótacóthểlàmgìtùythích

Bây giờ sử dụng phương thức getElementsByTagName[] để lấy tất cả các phần tử p

letx=document.getElementsByTagName["p"];

Kết quả trả về giống như một mảng.

Ta thử kiểm tra xem nó lấy được bao nhiêu phần tử nhé.

console.log[x.length];//Kếtquả:2

Bây giờ thì dễ rồi đúng không?

Đã lấy được về chính xác rồi. Bây giờ bạn cứ thoải mái ABC, XYZ =]]

//Thiếtlậpmàuchophầntửđầutiên

x[0].style.color="blue";

Vì nó giống mảng nên ta có thể lặp qua nhé.

//Lặpquacácphầntửlấyđượcvàthiếtlậpmàunền

for[leteleminx]{

x[elem].style.background="gray";

}

3.3. Nhắm đến phần tử DOM bằng CSS Selector

Đúng vậy, nếu bạn có CSS Selector thì bạn cũng có thể thông qua CSS Selector đó để nhắm đến phần tử mà bạn cần.

Phương thứcquerySelectorAll[]trả về danh sách tất cả các phần tử khớp với các CSS Selector được chỉ định.

Bạn có thể thao tác với nó giống như bất kỳ mảng nào.

Ví dụ ta có HTML sau:

HọcJava

HọcJavaScript

HọcPHP

HọcPyton

NIIT-ICTHàNội

Bây giờ, sử dụng phương thức querySelectorAll[] để lấy tất cả các phần tử li về nhé:

//LấyvềcácphầntửtheoCSSSelector

letx=document.querySelectorAll["ulli"];

//Kiểmtraxemlấyđượcbaonhiêuphầntử

console.log[x.length];//Kếtquả:5

Bây giờ chúng ta đã nhắm đến được chúng thành công, lặp qua nó xem sao nào.

//Lặpquacácphầntửlilấyđược

//Inramànhìnhconsole

for[varelemofx]{

console.log[elem.innerHTML];

}

Ok. Bây giờ thử với CSS Selector khác xem nhé:

//NhắmđếnphầntửlicóclassgachChan

lety=document.querySelectorAll["ulli.gachChan"];

//Thêmgạchchân

y[0].style.textDecoration="underline";

Bạn thử chạy kết quả trên trình duyệt xem. Có được kết quả như mong đợi không?

> Ghi chú: Phương thức querySelectorAll[] hoạt động với cả pesudo class. Tuy nhiên pesudo element thì không.

Ok. Như vậy là bạn đã thành công trong việc nhắm chọn đến phần tử DOM.

Vẫn còn một số phương thức như là getElementByName[], getElementByTagName[] có thể được sử dụng để nhắm đến các phần tử DOM mà bạn muốn.

Nó cũng tương tự như phương thứcgetElementById[] hay getElementsByClassName[] thôi.

Bây giờ, hãy đi tìm hiểu một số thao tác phổ biến với phần tử DOM bằng JavaScript.

4. Thao tác với DOM trong JavaScript

Thao tác với DOM trong JavaScript là gì?

Thao tác, tương tác với DOM hiểu ra cũng đơn giản như thế này:

"A, thằng áo đỏ kia. Bây giờ mày sẽ mặc áo xanh"
hoặc
"Thằng con con bên cạnh thằng áo đỏ kia, khi nghe tao ra hiệu mày sẽ chồng cây chuối"

Đó, Thao tác với DOM chỉ đơn giản là gọi đến thằng nào đó và bắt nó làm gì đó. :D

Với JavaScript, bạn có đầy đủ các công cụ đểthao tác với các phần tử DOM. Nói chung, tất cả những gì mà HTML có, JavaScript đều có thể tác động, thay đổi được chúng:

• JavaScript DOM có thể thay đổi các HTML elements

• JavaScript DOM có thể thay đổi các HTML attributes

• JavaScript DOM có thể thay đổi các CSS styles

• JavaScript DOM có thể xóa bỏ [remove] các HTML elements và attributes

• JavaScript DOM có thể thêm mới HTML elements và attributes

• JavaScript DOM có thể tương tác với HTML events

• JavaScript DOM có thể tạo các HTML events mới

Bên dưới đây mình sẽ giới thiệu một số thuộc tính thường sử dụng nhiều nhất trong DOM.

4.1. Thao tác với DOM sử dụng thuộc tính id

Thuộc tính id sẽ trả vể ID của một phần tử là định danh duy nhất cho mỗi phần tử bạn có thể thay đổi ID nếu bạn muốn.

Để hiểu cách sử dụng thuộc tính id để thao tác với DOM thì hãy xem xét ví dụ sau:

Ví dụ thay đổi id message thành xinChao

ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!

varid=document.getElementsByTagName["p"][0].id="xinChao";

//inraidcủap

document.write[document.getElementById["xinChao"].id];

Trong mã HTML thì rõ ràng chúng ta đặt id của thẻ p là message.

Nhưng khi chạy trên trình duyệt, bạn sẽ thấy thẻ

có id là xinChao

Câu lệnh này:

varid=document.getElementsByTagName["p"][0].id="xinChao";

Viết liền như thế có thể sẽ làm bạn hơi khó hiểu.

Vì thế, mình sẽ viết lại như sau:

Đầu tiên,

//Lấycácphầntửptrongtàiliệu

vararrays_p=document.getElementsByTagName["p"];

Bây giờ chúng ta có arrays_p là một tập hợp giống như một mảng, chứa các thẻ p

Và bạn còn nhớ cách truy cập mảng trong JavaScript rồi chứ?

> Nếu không thì đọc lại bài Mảng trong JavaScript này nhé.

Ở ví dụ trên mình đã cố tình để thẻ

là phần tử ngay sau thẻ mở .

Thế nên, nó sẽ là phần tử đầu tiên trong mảng chúng ta lấy được.

Tiếp theo, ta sẽ gán id mới cho phần tử này:

//Gánlạigiátrịidchophầntửpđầutiên

arrays_p[0].id="xinChao";

Cách làm này có vẻ là hơi rắc rối nhỉ.

Có cách nào làm khác không?

Có.

Phương thứcdocument.getElementById[] cũng sẽ cho kết quả tương tự.

ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!

varp=document.getElementById["message"];

//Thayđổiid

p.id="xinChao";

Thử chạy trên trình duyệt để xem kết quả bạn nhé.

Bây giờ, chúng ta đã nhắm đến chính xác phần tử p có id là message để thực hiện thay đổi id thành công.

Vì sử dụng phương thức getElementById[], bạn sẽ nhắm chính xác cho dù thẻ p này có nằm ở đâu đi nữa.

4.2. Thao tác với DOM sử dụng thuộc tính className

Sử dụng thuộc tính className bạn có thể thực hiện gán class cho phần tử DOM nào đó.

Ví dụ, ta có file HTML như sau:

DOMtrongJavaScript

.red{

color:red;

}

ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!

Nhấnvàođểthànhmàuđỏ

functionmyFunction[]{

varx=document.getElementsByTagName["p"][0];

x.className="red";

}

Sau khi click vàonútthì class normal sẽ được thay thế bằng red

> Nếu bạn quên cách tạo hàm thì xin mời học lại bài Hàm trong JavaScript bạn nhé.

Nhưng lưu ý, cách làm này sẽ thay thế toàn bộ class trong phần tử p.

Để thêm được nhiều class thì đơn giản bạn chỉ cần tách các class bởi dấu cách như thế này: "red group1 smallTitel"

4.3. Thao tác với DOM sử dụng thuộc tính tagName

Thuộc tính tagName trả về tên của phần tử mà bạn nhắm tới.

Ví dụ:

ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!

vartag_name=document.getElementById["message"].tagName;

//inratênthẻcủapchínhlàp

document.write[tag_name];

4.4. Thao tác với DOM sử dụng thuộc tính innerHTML

Thuộc tính innerHTML[bên trong HTML] trả về mã HTML bên trong phần tử hiện tại.

Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các node phần tử và node văn bản.

Ví dụ:

ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!

varvalue=document.getElementById["message"].innerHTML;

document.getElementById["messages1"].innerHTML=value;

Đoạn mã này đơn giản là lấy nội dung trong phần tử này và gán nó vào phần tử khác.

4.5. Thao tác với DOM sử dụng thuộc tính outerHTML

Trả về mã HTML của phần tử hiện tại. Có thể hiểu là outerHTML = tagName + innerHTML

Ví dụ, đây là tất cả mà outerHTML có thể lấy được.

ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!

Ví dụ: Thay thế phần tử h2 thành h3

XinchàocácbạnđếnvớilậptrìnhJavaScriptcănbản!

ThayđổiHeader

functionmyFunction[]{

document.getElementById["message"].outerHTML=

"HelloJS";

}

Như vậy, JavaScript sẽ tìm và thay thế toàn bộ h2 thành nội dung mà chúng ta gán cho nó.

Có nghĩa là sau khi bất vào nút Thay đổi Header thì mã HTML sẽ trở thành như thế này:

HelloJS

ThayđổiHeader

functionmyFunction[]{

document.getElementById["message"].outerHTML=

"HelloJS";

}

4.6. Thao tác với DOM sử dụng thuộc tính attributes

Thuộc tính này sẽ trả về tập các thuộc tính của phần tử bạn nhắm đến mà nó nó như: id, name, type, title, href, .

Ví dụ: Đầu tiên ta có HTML như sau.

Bây giờ, ta có hàm như sau:

functionmyFunction[]{

varx=document.getElementById["btn"].attributes[3].name;

document.getElementById["text"].innerHTML=x;

}

Cũng như mảng, thuộc tính này bắt đầu đếm từ 0 ở đây mình muốn xem tên thuộc tính thứ 4 thì sẽ gọi attributes[3] như vậy kết quả trả về là value

4.7. Thao tác với DOM sử dụng thuộc tính style

Thuộc tính style được sử dụng để thiết lập CSS cho phần tử được nhắm đến.

Ví dụ:

Thayđổimàucủaheader

Nhấnnútnàyđểchuyểnsangmàuđỏ

functionmyFunction[]{

//ThayđổimàucủathẻH1

document.getElementById["myH1"].style.color="red";

}

Trong đó:

• Tên thuộc tính CSS trong trường hợp này là color để điều chỉnh màu sắc của chữ.

Nếu tên thuộc tính có từ 2 từ trở lên: Ví dụ trong CSS bạn biết background-color thì khi thiết lập style qua thuộc tính style này bạn sẽ cần viết là backgroundColor

Lưu ý: Từtừ đầu tiên viết thường, các từ tiếp theo viết HOA chữ cái đầu tiên, không có dấu gạch ngang như trong CSS.

Ví dụ.

Trong CSS ta viết như thế này:

background-color:gray;

Nhưng khi thiết lập qua DOM với thuộc tính style thì ta cần ghi như sau:

document.getElementById["myH1"].style.backgroundColor="red";

Ví dụ thiết lập viền cho phần tử [thuộc tính CSS có nhiều giá trị]:

document.getElementById["myH1"].style.border="1pxsolidblue";

Khi thực hiện thành công, style sẽ được thêm vào theo kiểu inlinetrên trình duyệt như thế này:

Thayđổimàucủaheader

Đó, với DOM, bạn có thể thiết lập CSS cho phần tử mà không cần mở đến file CSS.

4.8. Một số thuộc tính quan hệ

Trong cây DOM, có rất nhiều các node có quan hệ với nhau như node cha, node anh chị em, node đầu tiên trong nhóm, node cuối cùng trong nhóm...

Tóm lại, các mối quan hệ như thế này đều có các thuộc tính tương ứng để cho phép bạn sử dụng.

• parentNode[node cha]: Trỏ đến node cha của một node. Nếu một node không có node cha [document] thì parentNode sẽ nhận giá trị là null.

Ví dụ ta có HTML:

HọcJava

HọcJavaScript

HọcPHP

HọcPyton

NIIT-ICTHàNội

Bây giờ, ta chọn đến node cha của thẻ li có id là active như thế này:

//Nhắmđếnphầntửchacủaphầntửid=active

letx=document.getElementById["active"].parentNode;

console.log[x.nodeName];//Kếtquả:UL

Đối với các thuộc tính quan hệ khác thì cũng tương tự.

• childNodes[các node con]: Trỏ đến một đối tượng tương tự với mảng, chứa những node con của một node. Chỉ là tương tự với mảng thôi nha.

Ví dụ, trong trường hợp trên, ta lấy các phần tử li của thẻ ul

//Lấycácnodeconcủaphầntửul

lety=document.getElementById["khoaHoc"].childNodes;

//Kiểmtraxemlấyđượcbaonhiêunode

console.log[y.length];//Kếtquả:11

> Lưu ý:Trong DOM, tất cả các phần của tài liệu, chẳng hạn như phần tử, thuộc tính, văn bản, v.v đều tính là node

Do đó, tính cả các thẻ li, id, text ở trong thẻ ul trên ta có 11 node.

• firstChild[node con đầu tiên]: Trỏ đến node con đầu tiên của một node trong childNodes.

Ví dụ ta có HTML:

ABC

Lấy phần tử đầu tiên trong ul

//Lấynộidungcủathẻliđầutiên

varlist=document.getElementById["khoaHoc"].firstChild.innerHTML;

//Gánnộidunglấyđượcvàothẻdiv

document.getElementById["ketQua"].innerHTML=list;

> Lưu ý: Nếu có khoảng trống ở trước phần tử đầu tiên [dấu cách, xuống dòng, tab...] thì kết quả trả về là undefined. Do đó bạn thấy mình phải đặt HTML như thế kia.

Vẫn còn rất nhiều các phần tử quan hệ như thế này. Bạn có thể đọc kỹ thêm tại đây.

Bên dưới đây mình có giải thích thêm một chút về một số node hay được sử dụng.

• lastChild[node con cuối cùng]: Trỏ đến node con cuối cùng của một node trong childNodes.

• nextSibling[node anh em liền kề sau]: Trỏ đến node liền kề phía sau của nó [có cùng một parentNode].

• previousSibling[node anh em liền kề trước]: Trỏ đến node liền kề phía trước [có cùng một parentNode].

Mỗinodetrên cây DOM đều có 6 thuộc tính quan hệ để giúp bạn truy xuất gián tiếp theo vị trí củanode:

• Node.parentNode:tham chiếu đến node cha của node hiện tại, và node cha này là duy nhất cho mỗi node. Do đó, nếu bạn cần tìm nguồn gốc sâu xa của 1 node, bạn phải nối thuộc tính nhiều lần, ví dụNode.parentNode.parentNode.

• Node.childNodes:tham chiếu đến các node con trực tiếp của node hiện tại, và kết quả là 1 mảng các đối tượng. Lưu ý rằng, các node con không bị phân biệt bởi loại node, nên kết quả mảng trả về có thể bao gồm nhiều loại node khác nhau.

• Node.firstChild:tham chiếu đến node con đầu tiên của node hiện tại, và tương đương với việc gọiNode.childNodes[0].

• Node.lastChild: tham chiếu đến node con cuối cùng của node hiện tại, tương đương với việc gọiNode.childNodes[Element.childNodes.length-1]

• Node.nextSibling: tham chiếu đến node anh em nằm liền kề sau với node hiện tại.

• Node.previousSibling: tham chiếu đến node anh em nằm liền kề trước với node hiện tại.

4.9. Một số phương thức phổ biến để thao tác với DOM khác

Như bạn đã biết, thông qua JavaScript chúng ta đã lấy được các phần tử HTML, thay đổi thuộc tính, thêm thuộc tính cho nó.

Ngoài ra bạn cũng có thể:

• ceateElement[tagName]: Tạo một node mới

• createTextNode[text]: Tạo một text Node mới

• appendChild[node]: Thêm một node con vào node hiện tại

Dưới đây là ví dụ thực hiện cho cả 3 phương thức trên.

HTML:

JavaScript

JavaFullStack

PHPFullStack

ThêmKhóahọc

Bây giờ ta sẽ tạo một hàm để thêm một khóa học mới:

functionthemKhoaHoc[]{

//Tạothêmmộtđốitượngli

varnode=document.createElement["li"];

//Tạomộttextnode

vartextnode=document.createTextNode["FullStackDEV"];

//Thêmtextnodevàonodelivừatạo

node.appendChild[textnode];

//Thêmphầntửvừatạovàocuốiul

document.getElementById["khoaHoc"].appendChild[node];

}

Bạn thử chạy trên trình duyệt xem. Kết quả như thế nào?

Có thể thêm node thì cũng có thể xóa node với phương thức removeChild[]

Đầu tiên, ta thêm một button nữa:

XóaKhóahọc

Sau đó ta tạo một hàm xóa node đầu tiên trong ul:

functionxoaKhoaHoc[]{

//Chọnđếndanhsáchkhóahọc

letkh=document.getElementById["khoaHoc"];

//Xóaphầntửconđầutiên

kh.removeChild[kh.childNodes[0]];

}

Khi bấm vào nút Xóa khóa học thì nó sẽ xóa thẻ li đầu tiên trong ul, và cứ thế.

Nhân tiện, tham khảo một số khóa học Lập trình tại NIIT - ICT Hà Nội để học lập trình web nhanh hơn:

• KHÓA HỌC LẬP TRÌNHJAVA WEB[~4.5Tháng]

• KHÓA HỌC LẬP TRÌNHPHP WEB [~4.5Tháng]

• KHÓA HỌC LẬP TRÌNH VIÊN [Full Stack - 12 tháng - Dành cho người muốn chuyển ngành hoặc học sinh mới tốt nghiệp THPT

• KHÓA HỌC FRONT END [3 tháng] dành cho các bạn yêu thích Front end

Tổng kết

Như vậy là bạn vừa học xong một số phương thức thao tác với DOM bằng JavaScript. Bạn biết DOM là gì, các nhắm chọn đến phần tử bạn muốn bằng DOM Selector và vận dụng các thuộc tính, phương thức để lấy thông tin, thêm, xửa, xóa ....

Ở phần sau mình sẽ giới thiệu về sự kiện và xử lý sự kiện với DOM trong JavaScript nhé. Hẹn gặp lại ở bài học tiếp theo.

Video liên quan