웹 프로그래밍

//기존에 존재하는 요소 뒤에 새 요소를 삽입하는 함수 : insertBefore의 반대 function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } } ex) //test.html 돋보기 포트폴리오 | 네오이엔지 | 이천농촌체험관광 | 시우리 | 채운산장

nextSibling, previousSibling : 현재 노드의 바로 다음 형제 노드를 반환한다. node.nextSibling : 현재 노드의 바로 다음 형제 노드를 반환한다. node.previousSibling

insertBefore : 기존에 존재하는 요소 앞에 새요소를 삽입 시키는 메소드 parentElement.insertBefore(newElement, targetElement) //newElement:새로만든 요소 targetElement:뒤에 출력되는 요소) ex) //test.html 돋보기 포트폴리오 | 네오이엔지 | 이천농촌체험관광 | 시우리 | 채운산장 | 벨하우스 //example.js //페이지 로딩후 뿌려질 항수들의 위한 함수 function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload != 'function') { window.onload = func; }else{ window.onload = f..

createTextNode : 요소가 아닌 텍스트노드를 생성한다. document.createTextNode(text) ex) //test.html //example.js //페이지 로딩후 뿌려질 항수들의 위한 함수 function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload != 'function') { window.onload = func; }else{ window.onload = function() { oldonload(); func(); } } } //페이지에 출력한 내용설정 함수 function docp() { var para = document.createElement("p"); var testdiv =..

appendChild : 새로 만든 노드를 문서 트리 구조에 추가한다. : parent 노드의 제일 마지막 요소로 추가된다.(부모 태그가 끝나기 바로전) parent.appendChild(child) ex) //test.htm //example.js window.onload = function() { var para = document.createElement("p"); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); }

createElement : 문서내의 요소를 만든다. document.createElement(nodeName) ex) //test.htm //example.js window.onload = function() { var para = document.createElement("p"); var info = "nodeName: "; info+= para.nodeName; info+= " nodeType: "; info+= para.nodeType; alert(info); } 결과 : 얼럿 nodeName: P nodeType: 1

document.write -> xhtml로 작성시 동작 불능, 구조와 동작을 분리했을경우 받을 수 있는 장점을 얻지 못한다. innerHTML -> DOM 메소드와 프로퍼티로 접근할 수 있는 세부구조를 제공받을 수 없다.

아래와 같이 태그를 선언하고 iframe 에 height 를 100% 로 주면 200px 정도의 크기로 고정되는 현상 원인:parent.element 의 height의 영향을 받기 때문 해결책은.... html/body/iframe 모두 height를 100%로 선언해야한단다... 위와 같이 선언을 해두면 div element의 100% height 속성이 제대로 표현된다.

ie6 수직스크롤바가 생길때 내용의 너비와 관계없이 무조건 가로스크롤 생기는 문제 해결방안 : iframe 안에 scrolling=yes

스타일 시트내에.. html{background:#fff;}

인터넷 익스플로러에서 float 과 같은 방향으로 margin 여백을 주면 여백이 두 배가 되는 버그가 발생한다. .example { float:left; margin-left:10px; } // 버그 : 왼쪽 여백이 20px 이 됨 .example { float:right; margin-right:10px; } // 버그 : 오른쪽 여백이 20px 이 됨 이 여백 두 배 버그는 인터넷 익스플로러 6.0 이하에서 발생하며, 인터넷 익스플로러 7.0 이나 파이어폭스에서는 발생하지 않는다. 그리고 이 버그는 첫번째 float 상자에서만 발생한다. 해결 방법은 다음과 같이 display 속성값을 inline 으로 변경하면 된다. .example { float:left; margin-left:10px; disp..