기본 호출 방식

간단히 작성된 플러긴들을 모아두는 방식은 여러가지가 있습니다. 사용자가 원하는 방식으로 호출할 수 있도록 준비하시면 됩니다. 이곳에서의 호출방식은 '공통' 이라는 페이지명이니 comm 이라 정하고 불러올 수 있도록 하려합니다.

<script> 
var comm {} ; 
comm.yaho = function () {
	console.log( 'yaho!!' ) ; 
} ; 

comm.yaho() ; // -> yaho!!
</script>

혹은 기본적으로 내장함수 처럼 활용할 수 도 있습니다. 준비된 js 파일 최상위 위에 내장함수로 등록해주어서 불러올 수 있도록 할 수 도 있습니다. window 내장 객체에 직접 지정할수 도 있으며 원하는 프로토타입으로 저장할 수 도 있습니다.

<script> 
window.yeah = function () {
	console.log( 'yeah!!')
} ; 

yeah() ; // -> yeah!!
</script>
findIndex() : 자신의 index를 뽑아보아요.

처음 jQuery 가 각광 받게 해준 몇몇 중에 하나인 index().
index 함수는 간단히 사용자가 선택한 Element의 순번을 알려줍니다. 여간 편리한게 아닙니다. 그러나 순수 자바스크립트로 index를 뽑아보려면 꽤 많은 코딩줄 수 가 생기므로 여간 깐깐한 일이 아닐 수 없습니다. 게다가 jQuery를 쓰지 못하게 되는 상황이라면 더더욱 갑갑하게 되지요. 이제 아래의 준비된 코드로 순수 자바스크립트만으로 index를 바로 뽑아볼 수 있습니다. findIndex() 함수는 jQuery의 Selector '$()' 에 연계되는 'index()' 함수처럼 javascript Selector 'querySelector()' 에 닷연산자( ' . ' ) 로 연계해서 사용하실 수 있습니다.

<script> 
// 아래의 코드를 사용하는 js파일에 복사 붙여넣기 하여주세요.

/* [ findIndex.js ] ------------------------ */
// Load 된 element 와 createElement 로 생성 된 element 내에 findIndex 추가
// 해당 element의 Index 반환
if(!document.documentElement.findIndex){
	var findIndexPorperty = {
		get : function(){
			var element = this
			,	parentNode = this.parentNode
			,	siblings = parentNode.children
			, 	findIndex 
			, 	indexOf = Array.prototype.indexOf
			;

			findIndex = function(){
				return indexOf.call(siblings, element);
			}

			return findIndex;
		}
	}

	Object.defineProperty(Element.prototype, 'findIndex', findIndexPorperty);
}

if(!NodeList.prototype.findIndex){
	var findIndexNodeList = {
		get : function(){
			var elements = this
			,	findIndex
			, 	indexOf = Array.prototype.indexOf
			;

			findIndex = function(element){
				return indexOf.call(elements, element);
			}
		}
	}

	Object.defineProperty(NodeList.prototype, 'findIndex', findIndexNodeList);	
}
/* ------------------------ */
</script>

// 예제 

<html> 
	<ul class='find'>
		<li>1</li>
		<li>2</li>
		<li class='target'>3</li>
		<li>4</li>
	</ul>
</html> 

<script> 
	var index = document.querySelector("ul.find .target").findIndex();
	console.log( index ) ; // -> 2 
</script>

javascript 도 jQuery 처럼 간단하게 불러올 수 있는 또 다른 방법이 있을까요?
자바스크립트의 내장함수들을 이용하면 간단히 한줄 코딩으로도 불러올 수 있습니다.
Array prototype 인 indexOf 를 활용한 예입니다.

<script>
//따로 준비된 script가 없을 경우
</script> 

<html> 
	<ul class='find'>
		<li>1</li>
		<li>2</li>
		<li class='target'>3</li>
		<li>4</li>
	</ul>
</html> 

<script> 
	var lis = document.querySelectorAll("ul.find li")
	,	target = document.querySelector("li.target") ; 
	var idx = [].indexOf.call( lis , target ) ; 

	console.log( idx ) ; // -> 2 
</script>
forEachChild() : Element 들의 for문을 돌려보아요

jQuery 에는 $.each 문이 있습니다. each 문은 Selector로 잡힌 여럿 Element 들을 반복하여 돌아주며 사용자가 원하는 코드를 실행하게 하여줍니다. 허나 Javascript 에서의 each ( forEach ) 문은 Element 가 Tag 일 경우 포문에 오류가 생겨 실행되지 않습니다. 이러한 부분을 해결해줄 수 있도록 아래의 코드를 활용하면 jQuery 없이 순수 Javascript 만으로도 each 문을 활용할 수 있습니다. forEachChild() 함수는 역시 닷연산자로 사용할 수 있습니다.

<script>
// 아래의 코드를 사용하는 js파일에 복사 붙여넣기 하여주세요.

/* [ forEach.js ] ------------------------ */
// Load 된 element 와 createElement 로 생성 된 element 내에 chilren을  forEach 추가
// 선택 된 element 의 children의 수만 큰 loop 를 돈다.
if(!document.documentElement.forEachChild){
	var forEachChild = {
		enumerable: true,
		get : function(){
			var element = this
			,	childrens = this.children
			,	childrenLen = childrens.length
			,	i = 0
			, 	forEach
			;

			forEach = function(callback){
				for(i=0; i < childrenLen; i=i+1){
					if(typeof callback == 'function'){
						callback.call(childrens[i], i);
					}
				}	
			}
			return forEach;
		}
	}
	Object.defineProperty(Element.prototype, 'forEachChild', forEachChild);
}

// Node List에 forEach가 없는 경우 node list 에도 추가
// ex ) document.querySelectorAll('div').forEach( .... )
if(!NodeList.prototype.forEach){
	var forEachNodeList = {
		get : function(){
			var element = this
			, 	i =0
			,	length = this.length
			,	forEach
			;

			forEach = function(callback){
				for(i=0; i < length; i=i+1){
					if(typeof callback == 'function'){
						console.log(element[i])
						callback.call(element[i], element[i], i);
					}
				}	
			}
			return forEach;
		}
	}
	Object.defineProperty(NodeList.prototype, 'forEach', forEachNodeList);
}
/* ------------------------ */
</script>

// 예제 

<html> 
	<ul class='find'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</html> 

<script> 
	document.querySelector("ul.find").forEachChild(function( index ){
		console.log( this, index );
	});

	document.getElementsByTagName('ul')[0].forEachChild(function( index ){
		console.log( this, index );
	});
</script>

역시 findexIndex 처럼 javascript 도 jQuery 처럼 간단하게 불러올 수 있는 또 다른 방법이 있을까요?
자바스크립트의 내장함수들을 이용하면 간단히 한줄 코딩으로도 불러올 수 있습니다.
Array prototype 인 forEach 를 활용한 예입니다.

<script>
//따로 준비된 script가 없을 경우
</script> 

<html> 
	<ul class='find'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</html> 

<script> 
	var lis = document.querySelectorAll("ul.find li") ; 
	[].forEach.call( lis , function ( li , index ) {
		console.log( li , index ) ; 
	}) ; 
</script>
DOM Element 를 간편하게 찾기

jQuery의 장점중 하나인 Selector 를 찾는 '$( Element Name )' 은 jQuey 를 급부상하게 만들었습니다. 헌데 jQuery를 사용하지 않고 Javascript 만으로 Element 를 찾으려면 document.querySelector( Element Name ) 혹은 document.querySelectorAll( Element Name ) 으로 찾아야 합니다. 한 두번이라면 괜찮지만 여러번 작성해야할 경우 까다로운 것도 사실입니다.

아래에 준비되어있는 함수를 미리 등록하여 주시면 기존 jQuery 처럼 DOM 을 찾는방법과 동일하게 찾을 수 있습니다.

<script>
var $ = function ( elem ) {
	var dom = document.querySelectorAll( elem ) , rtnVal = null ; 
	if ( dom.length == 0 ) rtnVal = undefined ;
	if ( dom.length == 1 ) rtnVal = dom[0] ; 
	if ( dom.length > 1 ) rtnVal = dom ; 
	return rtnVal ; 
} ; 

// 사용방법 - 제이쿼리와 동일하게 작성할 수 있습니다.
$( 'div.yaho' ) // 하나의 엘리먼트를 잡고 싶은 경우
$( 'ul > li' ) // 여러개의 엘리먼트를 잡고 싶은 경우
</script>