HTML Document Object Model
The HTML DOM (HTML Document Object Model) is an Object Model for HTML Documents.
DOM HTML tree
The HTML DOM is a tree of Nodes that represents an HTML Page.
The DOM Tree
ஒரு வலைப்பக்கம் ஏற்றப்படும் போது, உலாவி HTML ஆவணத்தின் மரம் போன்ற பிரதிநிதித்துவத்தை உருவாக்குகிறது.
ஆவணத்தின் ஒவ்வொரு பகுதியும் மரத்தில் nodes ஆகும்:
| Node | Description | Example |
|---|---|---|
| Document | ஆவணத்தில் உள்ள அனைத்து nodes க்கும் உரிமையாளர் | முழு HTML ஆவணம் |
| <html> | Element Node | ரூட் HTML உறுப்பு |
| <head> | Element Node | தலைப்புப் பகுதி |
| <body> | Element Node | முதன்மை உள்ளடக்கப் பகுதி |
| <a> | Element Node | இணைப்பு உறுப்பு |
| href | Attribute Node | இணைப்பு பண்புக்கூறு |
| <h1> | Element Node | தலைப்பு உறுப்பு |
| My Header | Text Node | உரை உள்ளடக்கம் |
DOM மர கருத்து:
DOM மரத்தில் ஒவ்வொரு HTML உறுப்பும் ஒரு "node" ஆகும். இந்த nodes க்கு பெற்றோர், சகோதரர் மற்றும் குழந்தை உறவுகள் உள்ளன, இது ஒரு குடும்ப மரத்தைப் போன்றது.
Accessing HTML Elements
The HTML DOM can be used to access HTML elements.
ஒரு HTML உறுப்பை அணுக மிகவும் பொதுவான வழி, உறுப்பின் id ஐப் பயன்படுத்துவது:
Example
Accessing Element by ID
<html>
<body>
<p id="demo"></p>
<script>
// Access a paragraph Element
const myPara = document.getElementById("demo");
// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>
</body>
</html>மேலே உள்ள எடுத்துக்காட்டில், உறுப்பைக் கண்டறிய getElementById முறை id="demo" ஐப் பயன்படுத்தியது.
id="demo"
ஒரு HTML பண்புக்கூறு
getElementById()
ஒரு DOM முறை
innerHTML
ஒரு DOM பண்புக்கூறு
What You Will Learn
இந்த டுடோரியலின் அடுத்த அத்தியாயங்களில் நீங்கள் கற்றுக்கொள்வீர்கள்:
The World Wide Web Consortium
The DOM is a W3C Standard (World Wide Web Consortium):
W3C வரையறை:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
("W3C ஆவண பொருள் மாதிரி (DOM) என்பது ஒரு தளம் மற்றும் மொழி-நடுநிலை இடைமுகமாகும், இது நிரல்கள் மற்றும் ஸ்கிரிப்டுகள் ஒரு ஆவணத்தின் உள்ளடக்கம், கட்டமைப்பு மற்றும் பாணியை மாறும் வகையில் அணுகவும் புதுப்பிக்கவும் அனுமதிக்கிறது.")
The W3C DOM standard is separated into 3 different parts:
Core DOM
அனைத்து ஆவண வகைகளுக்கும் நிலையான மாதிரி
XML DOM
XML ஆவணங்களுக்கான நிலையான மாதிரி
HTML DOM
HTML ஆவணங்களுக்கான நிலையான மாதிரி
குறிப்பு:
HTML DOM என்பது W3C மற்றும் WHATWG ஆகியவற்றால் உருவாக்கப்பட்ட மொழி சாராத நிலையானது.
Common DOM Methods and Properties
| Type | Name | Description | Example |
|---|---|---|---|
| Method | getElementById() |
id மூலம் உறுப்பைக் கண்டறியவும் | document.getElementById("demo") |
| Method | getElementsByTagName() |
குறிச்சொல் பெயர் மூலம் உறுப்புகளைக் கண்டறியவும் | document.getElementsByTagName("p") |
| Method | getElementsByClassName() |
வகுப்புப் பெயர் மூலம் உறுப்புகளைக் கண்டறியவும் | document.getElementsByClassName("box") |
| Property | innerHTML |
உறுப்பின் HTML உள்ளடக்கத்தைப் பெறவும் அல்லது அமைக்கவும் | element.innerHTML = "New Content" |
| Property | style |
உறுப்பின் பாணியை மாற்றவும் | element.style.color = "red" |
| Property | className |
உறுப்பின் வகுப்புப் பெயரைப் பெறவும் அல்லது அமைக்கவும் | element.className = "new-class" |