AngularJS HTML DOM
DOM (Document Object Model) adalah representasi struktur hierarki dokumen HTML/XML saat diakses oleh bahasa pemrograman seperti JavaScript. AngularJS, sebagai kerangka kerja JavaScript, berinteraksi dengan DOM untuk memanipulasi elemen-elemen HTML.
Berikut adalah beberapa cara umum di mana AngularJS berinteraksi dengan DOM:
Data Binding:
AngularJS menggunakan konsep two-way data binding untuk menyinkronkan model data di JavaScript dengan tampilan HTML. Ketika model berubah, tampilan diperbarui secara otomatis dan sebaliknya. Contoh:
htmlCopy code
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>Hello {{ name }}</h1>
</div>
Directives:
Directive AngularJS seperti ng-model, ng-bind, ng-show, dll., menyediakan cara untuk menghubungkan model dengan elemen DOM atau untuk memanipulasi DOM secara langsung.
Manipulasi DOM:
Melalui kontroler AngularJS, Anda dapat memanipulasi elemen DOM secara langsung menggunakan JavaScript. Contoh:
javascriptCopy code
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.changeColor = function() {
var element = document.getElementById('myElement');
element.style.color = 'red';
};
});
htmlCopy code
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="changeColor()">Ubah Warna</button>
<p id="myElement">Ini teks yang akan berubah warna.</p>
</div>
Event Handling:
AngularJS memungkinkan penanganan peristiwa (event handling) pada elemen HTML, seperti ng-click, ng-change, dsb., yang memicu fungsi-fungsi tertentu ketika peristiwa tersebut terjadi.
Ini hanya beberapa contoh bagaimana AngularJS berinteraksi dengan DOM. Pada dasarnya, AngularJS digunakan untuk mempermudah manipulasi, pembaruan, dan interaksi dengan elemen-elemen DOM dalam aplikasi web.
