AngularJS 服务中的 DOM 操作

AngularJS 是一个流行的前端 JavaScript 框架，它提供了许多便捷的功能来开发和管理 web 应用程序。在 AngularJS 中，服务用于提供可重用的功能和逻辑，其中一种常见的服务类型是 DOM 操作。DOM 操作允许我们直接与 HTML 文档进行交互，添加、删除或修改元素，以及处理事件。本文将介绍如何在 AngularJS 服务中进行 DOM 操作，并提供一些示例代码。

javascript
app.controller('MyController', ['$document', function($document) {
  // 在此处使用 $document 服务进行 DOM 操作
}]);

javascript
var element = $document[0].querySelector('.my-element');
var elements = $document[0].querySelectorAll('.my-elements');

javascript
var newElement = $document[0].createElement('div');
newElement.textContent = '新元素';
$document[0].body.appendChild(newElement);

javascript
var parentElement = $document[0].querySelector('.parent-element');
var elementToRemove = $document[0].querySelector('.element-to-remove');
parentElement.removeChild(elementToRemove);

javascript
var element = $document[0].querySelector('.my-element');
element.setAttribute('data-id', '123');
element.textContent = '新内容';

javascript
var element = $document[0].querySelector('.my-element');
element.addEventListener('click', function(event) {
  console.log('点击了元素：', event.target);
});

html
  点击我

javascript
var app = angular.module('myApp', []);
app.controller('MyController', ['$document', function($document) {
  var button = $document[0].querySelector('#myButton');
  button.addEventListener('click', function() {
    button.textContent = '已点击';
  });
}]);