프로그래밍공부노트

Day 36 - javascript (DOM) 본문

Javascript

Day 36 - javascript (DOM)

SANGJIN-YU 2021. 4. 4. 23:04
반응형

**********DOM

Document Object Model 탐색

 

node tree를 생각하면서 탐색하는 연습을 하는 것이 중요하다.

 

var child = document.getElementsByTagName('p')[0];

var parent = child.parentNode;

parent.style.backgroundColor = "lime";

parentNode는 탐색한 element의 부모 element를 구한다

childNodes는 탐색한 element의 자식 elements를 구한다

<body>
<div>
	<p>Child01</p>
	<p>Child02</p>
	<p>Child03</p>
	<!-- 주석 -->
</div>
</body>

 

 

var div = document.getElementsByTagName('div');

var divChild = div.childNodes;

여기서 div의 childNodes를 탐색하면 textNode(1) <p></p>(2) textNode(3) <p></p>(4) textNode(5) <p></p>(6)

<!--주석--!>(7) 7개를 childNode로 보여준다. 태그뿐만 아니라 textNode도 자식으로 생각한다.

 

 

 

Document Object Model 실행

var p = document.createElement('p');
var attr = document.createAttribute('style');
var txt = docuement.createTextNode('안녕하세요');

 

 

element(tag) 생성하기 : createElement("태그명") ;

속성객체 생성 : createAttribute("속성명");

콘텐츠(text)생성 : createTextNode("입력내용");

속성 추가하기 : setAttributeNode("attr명");/ setAttribute("속성명","속성값");

div.appendChild(p);

document.getElementByTagName('태그명').appendChild(p);

p.setAttribute('style','border : 2px solid #ccc');

생성한 elements는 append하여 붙여주면 된다. 여기서 node tree를 생각하면서 붙여야된다. 태그 안에 맨 아래쪽에 붙는 것이다. 영역을 잘못 탐색하면 이상한 곳에 붙게된다.

속성 부여는 setAttribute를 통해서 가능하다.

속성을 확인하는 방법 hasAttribute('속성명')

태그가 먼저있는지 확인하고 속성을 입혀라 이때 속성유무 has로 꼭 확인해라

	console.log("alt 속성이 있는지 확인",img.hasAttribute('alt'));
	console.log("title 속성이 있는지 확인",img.hasAttribute('title'));

 

 function test01(){
 
 var doc = document.getElementById('test01');
 var div = document.createElement('div');
 div.textContent = 'dom test';
 
 doc.appendChild('div');
 
 }
 
 
 function moveTest01(){
 
 var test01 = documnet.getElementById('test01').children[0];
 var test02 = document.getElementById('test02');
 
 test02.appendChild('test01');
 }

test01 :  div 태그 생성하여 text추가후 test01에 붙이기

test02 : test01에 추가된 모든 태그들을 test02로 옮기기

img tag 생성하기

function createImg(){

	var rdoBtn = document.getElementsByName('rdoBtn');
    
    var radioValue='';
    
    for(var i=0; i<rdoBtn.length;i++){
    	radioValue = './images/'+rdoBtn[i].value;
    }
}

var img = document.createElement('img');
img.setAttribute('src',radioValue);

var div = document.getElementById('imgView');
반응형
저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

Mocha / Jasmine Unit Test Framework  (1) 2024.07.23
Day ?? - javascript 정리  (0) 2021.05.12
Day 35 - javascript( select 실습)  (0) 2021.04.03
Day35 - javascript(form,radio button, checkbox, location 객체)  (0) 2021.04.02
Day 32~34 - javascript(배열, 날짜, 아이디 중복검사)  (0) 2021.04.01
'Javascript' Related Articles more