Day 36 - javascript (DOM)
**********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');