티스토리 뷰

VIEW/JAVASCRIPT

[javascript] Node 관련 메서드

찰떡쿠키부스트 2017. 12. 1. 11:10

 

# 노드관련 메서드
document.createElement("태그명")
document.createTextNode("텍스트")
객체명.insertBefore(newChild,refChild)
객체명.replaceChild(newChild,oldChild)
객체명.removeChild(oldChild)
객체명.appendChild(newChild)
객체명.parentNode
객체명.childNodes
객체명.previousSibling
객체명.nextSibling
객체명.lastChild
객체명.firstChild



# ol,li :순서대로 나오는 태그

<html>
 <head>
 <script>
 </script>
 </head>
 <body>
 <ol>  // default:숫자, type="A":영어순서대로  type="I":로마숫자
 <li>aa</li>
 <li>bb</li>
 <li>cc</li>
 </ol>
 </body>
</html>


​

​
# document.createElement("태그명")
# 객체명.appendChild(newChild)

​

<html>
 <head>
 <script>
 window.onload=function(){
 var fontTag=document.createElement("font");   // font태그 생성 (<font></font>)
 fontTag.color="green";                                 // 속성값 입력 (<font color="green">)
 fontTag.innerHTML="ABC";                           // 안에다HTML입력 (<font color="green">ABC</font>)
 bodyTag.appendChild(fontTag);          

​// 폰트태그를 바디태그 안에다가 자손으로 넣어줌 (<body><font color="green">ABC</font></body>)
 }
 </script>
 </head>
 <body id="bodyTag">
 </body>
</html>



똑같은거 한번더 해보자.
똑같은거 설명안한다.
​

<html>
 <head>
 <script>
 window.onload=function(){
 var inputTag=document.createElement("input");  //input태그 생성.
 inputTag.type="button";
 inputTag.value="red";
 inputTag.onclick=a;                            //온클릭 속성으로 함수를호출한다.
 bodyTag.appendChild(inputTag);
 }
 function a(){
 alert(111);
 }
 </script>
 </head>
 <body id="bodyTag">
 </body>
</html>


​

​

# 객체명.removeChild(oldChild)
:자식죽인다(죽일놈) :죽일놈객체에 아이디줘서 죽인다.

​

<html>
 <head>
 <script>
 window.onload=function(){
 buttonTag.onclick=a; }
 function a(){
  olTag.removeChild(oldChild) }
 </script>
 </head>
 <body>
 <ol id="olTag">
 <li>aa</li>
 <li>bb</li>
 <li id="oldChild">쓸데없는것!</li>
 <li>cc</li>
 </ol>
 <input type="button" value="제거" id="buttonTag">
 </body>
</html>



#객체명.insertBefore(newChild,refChild)

:부모.인설트비포(새로만든놈,기준(얘 전에 넣겠다))

<html>
 <head>
 <script>
 window.onload=function(){
 buttonTag.onclick=a;
 }
 function a(){
  var newChild=document.createElement("li");
  newChild.innerHTML="cc";
 olTag.insertBefore(newChild,refChild)      //부모.인설트비포(새로만든놈,기준(얘 전에 넣겠다))
 }
 </script>
 </head>
 <body>
 <ol id="olTag">
 <li>aa</li>
 <li>bb</li>
 <li id="refChild">dd</li>
 </ol>
 <input type="button" value="삽입" id="buttonTag">
 </body>
</html>
 




# 객체명.replaceChild(newChild,oldChild)

:오래된애 새로운애로 바꿔라.(이거이해안되면 위에부터 다시해라 다똑같다)


<html>
 <head>
 <script>
 window.onload=function(){
 buttonTag.onclick=a; }
 function a(){
  var newChild=document.createElement("li");
  newChild.innerHTML="bb";
  olTag.replaceChild(newChild,oldChild) }
 </script>
 </head>
 <body>
 <ol id="olTag">
 <li>aa</li>
 <li id="oldChild">비비</li>
 <li>dd</li>
 </ol>
 <input type="button" value="대체" id="buttonTag">
 </body>
</html>

​

​#document.createTextNode("텍스트")

​

​<html>
 <head>
 <script>
 window.onload=function(){
 buttonTag.onclick=a;}
 function a(){
 var txtObj=document.createTextNode("CCC");    //태그말고 텍스트를 추가해라.(텍스트도 하나의 노드다)
 spanTag.appendChild(txtObj);}
 </script>
 </head>
 <body>
 <span id="spanTag">AAABBB</span>
 <input type="button" value="추가" id="buttonTag">
 </body>
</html>​



이거보면 태그만드는거랑 텍스트만드는거랑 구별된다.

<html>
 <head>
 <script>
 window.onload=function(){
 var fontTag=document.createElement("font");
 var txtNode=document.createTextNode("aaa");
 fontTag.appendChild(txtNode);
 fontTag.color="red";
 bodyTag.appendChild(fontTag);
 }
 </script>
 </head>
 <body id="bodyTag">

 </body>
</html>

​


​

​#객체명.previousSibling
#객체명.nextSibling

: 니앞에 형제 니 다음 형제 소환~!

 <html>
 <head>
 <style type="text/css">
 td { border:1px solid navy; }
 </style>
 <script>
 window.onload=function(){
 tdTag.onclick=f;
 }
 function f(){
 tdTag.previousSibling.style.background="pink";
 this.nextSibling.style.background="pink";
 }
 </script>
 </head>
 <body>
 <table>
 <tr><td>1</td><td id="tdTag">2</td><td>3</td></tr>
 </table>
 </body>
</html>

​

​


​# 객체명.lastChild

#객체명.firstChild

​:마지막자손(불특정한 상황일때 즉 마지막자손이 계속바뀔때)

분석해봐라. (반대= #객체명.firstChild )

​<html>
 <head>
 <style type="text/css">
 td { border:1px solid navy; }
 </style>
 <script>
 window.onload=function(){
 init();
 b1.onclick=f1;
 b2.onclick=f2;
 }
 function createRow(num){
 var trTag=document.createElement("tr");
 for(var c=1; c<6; c++){
 var tdTag=document.createElement("td");
 tdTag.innerHTML=num++;
 trTag.appendChild(tdTag);
 }
 tableTag.appendChild(trTag);
 }
 function init(){
 createRow(1);
 }

 var cnt=6;
 function f1(){
 createRow(cnt);
 cnt+=5;
 }
 function f2(){
 cnt-=5;
 tableTag.removeChild(tableTag.lastChild);
 }
 </script>
 </head>
 <body>
 <input type="button" value="줄추가" id="b1">
 <input type="button" value="줄제거" id="b2"><br/>
 <table id="tableTag">
 </table>

​ </body>
</html>




# 객체명.parentNode
# 객체명.childNodes

:부모대꼬와라 , 자식들데꼬와라 (childNodes[0] -->첫째자식)

저작자표시

'VIEW > JAVASCRIPT' 카테고리의 다른 글

[javascript] event,eval(),focus(),prototype,외부 파일 가져오기,visibility, display, overflow  (0) 2017.12.01
[javascript] image,form,form호출,바로가기,이벤트호출  (0) 2017.12.01
[javascript] 이벤트처리,window,document,innerHTML  (0) 2017.12.01
[javascript]객체생성방법,for in,date객체,Array객체  (0) 2017.12.01
[javascript] 함수의 종류,객체,String내장객체  (0) 2017.12.01
공유하기 링크
댓글