Get child of DOM Element

by Aides

HTML

<div id="first">
  <p class="child"></p>
  <div>
    <p class="decendant">
    
    </p>
  </div>
</div>

<div id="second">
  <div>
    <p class="decendant">
    
    </p>
  </div>
  <p class="child"></p>
</div>

JavaScript

var first = document.getElementById('first');
var second = document.getElementById('second');

var getDirectChild = function (element, selector) {
		return [].filter.call(element.querySelectorAll(selector), isDirectChildOf(element))[0];
  }

  var isDirectChildOf = function (comparativeElement) {
    return function(element) {
      return element.parentNode === comparativeElement;
    }
  }

console.log(first.querySelector('p').className);
console.log(second.querySelector('p').className);

console.log(getDirectChild(first, 'p').className);
console.log(getDirectChild(second, 'p').className);