Benney Blog

< SCRIPT>
// dom이용
window.onload=function(){
    var var_id = document.getElementById("var_id");
    console.log(var_id);
}

// jQuery 이용
$(document).ready(function(){
    var $div = $("#var_id");  // id명 앞에 #이 붙는것을 명심
    console.log($div);  // jQuery select에서 제공하는 모든 것을 보여준다.
    console.log($div[0]);  // 이경우 실제 div의 내용이 보여진다.
});
< /SCRIPT>



  내용이 보여지는지 확인해보자

// getElementsByClassName메소드는 css class이름으로 Dom객체를 수집할 수 있다.
var divs = document.getElementsByClassName("style_class"); // NodeList return
console.log("노드 길이 :"+ divs.length);
for(var i=0; i < divs.length; i++){
    var single = divs[i]; // 또는 divs.item(i);
    console.log(i, single);
}

// jQuery로 바꿔보자.
$(document).ready(function(){
    var $divs =$(".style_class");  // class일 경우 ".클래스명" 
    console.log($divs);
    for(var i=0;i<$divs.length;i++){
        var $div = $divs.eq(i);
        console.log("i ", i,$div[0]);			
    }
});	
// 이하 body 

Test class div


Test class div 22

	

// dom 사용
window.onload=function()
	{
	var divs =window.document.getElementsByTagName("div");
		console.log(divs);
		for(var i=0;i < divs.length;i++)
		{
			var div  		= divs.item(i);
			console.log("i ", i, div);
		}	}
// jQuery 사용
$(document).ready(function()
	{
	
		var $divs =$("div");
		console.log($divs);
		
		//for(var i=0;i<$divs.length;i++)
		//{
		//	var $div  		= $divs.eq(i);
		//	
		//
		//	console.log("1 ", i,$div);	
		//	console.log("2", $div[0]);
		//	console.log("3", $divs.get(i));	
		//	console.log("4", $div.get(0));			
		//}
		
		$divs.each(function(index, target){
			console.log("this =  ", this);
			console.log("$(this) = ",$(this));
			console.log("target = ",target);
			console.log($divs[index]);
		});
	});