title: How to manipulate DOM elements with Angular
body: <p>I just can't find a good source that explains to me how to manipulate DOM elements with angular:</p>
  
  <p>How do I select specific elements on the page?</p>
  
  <pre><code>&lt;span&gt;This is a span txt1&lt;/span&gt;
  &lt;span&gt;This is a span txt2&lt;/span&gt;
  &lt;span&gt;This is a span txt3&lt;/span&gt;
  &lt;span&gt;This is a span txt4&lt;/span&gt;
  
  &lt;p&gt;This is a p txt 1&lt;/p&gt;
  
  &lt;div class="aDiv"&gt;This is a div txt&lt;/div&gt;
  </code></pre>
  
  <p>Exp: With jQuery, if we wanted to get the text from the clicked span, we could simple write:</p>
  
  <pre><code>$('span').click(function(){
      var clickedSpanTxt = $(this).html(); 
      console.log(clickedSpanTxt);
  });
  </code></pre>
  
  <p>How do I do that in Angular? </p>
  
  <p>I understand that using 'directives' is the right way to manipulate DOM and so I am trying:</p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  
  myApp.directive("drctv", function(){
  
    return {
      restrict: 'E',
      scope: {},
      link: function(scope, element, attrs){
        var c = element('p');
        c.addClass('box');
      }
    };
  }); 
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;drctv&gt;
  &lt;div class="txt"&gt;This is a div Txt&lt;/div&gt;
  
  &lt;p&gt;This is a p Txt&lt;/p&gt;
  
  &lt;span&gt;This is a span Txt &lt;/span&gt;
  &lt;/drctv&gt;
  </code></pre>
  
  <p>How do I select only 'p' element here in 'drctv'?</p>