별초롱언니는 개발중

부모 노드로부터 시작하여 replaceChild()메서드를 사용한다. 메서드설명document.replaceChild(새로운내용, 기존내용)자식 노드 수정하기(요소노드, 텍스트 노드 가능)element.textContent = 수정내용해당 요소의 텍스트 노드 수정 this is a paragraph. this is another paragraph

동적으로 HTML 문서에서 노드를 삭제하려면 먼저 부모 노드를 알아야한다. 먼저 부모 노드를 선정하고 그 자식 노드 중에서 제거하고자 하는 노드를 선정하고, removeChild() 메서드를 이용한다. 메서드설명document.removeChild(요소)자식노드 중 해당하는 요소 제거(요소노드, 텍스트 노드 가능)element.textContent = " "해당 요소의 텍스트 노드 삭제  this is a paragraph. this is another paragraph

HTML DOM 노드 관계를 사용하여 노드 트리를 탐색할 수 있고, HTML DOM에 새 요소를 추가하거나 삭제할 수 있다. W3C HTML DOM 표준에 따르면 HTML 문서의 모든것이 노드이다. 1. 전체 문서가 문서 노드이다.2. 모든 HTML 요소는 요소 노드이다. 3. HTML 요소 안의 텍스트는 텍스트 노드이다. 4. 모든 HTML 속성은 속성노드이다.5. 모든 주석은 주석 노드이다.  DOM노드HTML 문서가 웹브라우저에 로드되면 웹페이지는 문서 객체가 된다. document 객체는 HTML 문서의 루트 노드이다. document 객체는 자바스크립트 내에서 모든 노드 객체에 접근하기 위한 속성 및 메서드를 제공한다. 1. 노드 트리에서 최상위 노드를 루트(루트 노드)라고 한다.2. 모든 노드..

my head title enter your name : transforms first display... click me...   enter your name : removeEventListener()addEventListener() 메서드로 첨부된 이벤트 핸들러를 제거한다. click button remove mousemove 마우스 커서 mousemove에 가져다 대면 숫자 랜덤으로 생성되서 보여줌remove 클릭하면 해당 숫자에서 더이상 다른 숫자는 보여지지않고 멈춤add.EventListener() 괄호안에 적은내용 제거시 removeEventListener() 괄호안에 똑같이 기재해야 제거된다

마우스 이벤트설명click마우스를 클릭했을 때 이벤트가 발생dbclick마우스를 더블클릭 했을때 이벤트가 발생mouseover (mouseenter)마우스를 오버했을때 이벤트가 발생mouseout (mouseleave)마우스를 아웃했을 때 이벤트가 발생mousedown마우스를 눌렀을 때 이벤트가 발생mouseup마우스를 떼었을 때 이벤트가 발생mousemove마우스를 움직였을 때 이벤트가 발생키 이벤트설명keydown키를 눌렀을 때 이벤트 발생keypress문자 키를 누른상태에서 이벤트 발생 (연속적) keyup 키를 떼었을 때 이벤트 발생 (1번)폼 이벤트설명focus포커스가 이동되었을때 이벤트가 발생blur포커스가 벗어났을때 이벤트가 발생change값이 변경되었을때 이벤트가 발생submitsubmit..

자바스크립트의 사용의 궁극적인 목적은 동적 웹페이지의 작성이다. 따라서 사용자가 웹페이지의 HTML 요소를 클릭하거나 마우스를 이동하는 등의 경우 이벤트가 발생하며, 이벤트가 발생하면 그에 반응하는 과정을 자바스크립트에 의해 처리할 수 있다. 사용자가 HTML 요소를 클릭할 때 코드를 실행하려면 자바스크립트 코드를 HTML 이벤트 속성에 추가한다. 이벤트는 주로 다음의 경우에 발생한다.  1. 웹페이지가 로드 되었을 때2. 사용자가 마우스를 클릭하거나 요소 위로 또는 위에서 움직일 때 3. 이미지가 로드 되었을 때 4. 입력 필드가 변경되었을 때5. HTML 양식이 제출되었을 때6. 키보드를 사용할 때  이벤트 : 웹 브라우저가 처리해야 할 특정 사건이벤트 타겟 : 이벤트를 발생시킬 객체 이벤트 타입 :..

document.anchors 컬렉션anchors 컬렉션은 name 특성이 있는 문서의 모든 요소 모음을 반환한다. 컬렉션의 요소는 소스 코드에 나타나는 순서대로 정렬된다. 컬렉션은 속성과 메서드를 갖는다. 속성/메서드설명length컬렉션에 있는 요소의 수 반환[index]인덱스 값을 이용하여 컬렉션 요소 반환item(index)인덱스 갑을 사용하여 컬렉션 요소 반환nameditem(id)지정된 id를 가진 컬렉션에서 요소 반환 HTML CSS JS Try it  document.body 속성문서의 본문을 설정하거나 반환한다. document.body; // body 속성을 반환한다document.body = newContent; // 새로운 콘텐츠값으로 설정한다.  Try i..

HTML 문서가 웹 브라우저에 로드되면 문서 객체가 된다. document 객체는 HTML 문서의 루트노드이며, 다른 모든 노드의 "소유자"이다. document 객체는 JavaScript내에서 모든 노드 객체에 접근하기 위한 속성 및 메서드를 제공한다.  속성설명document.anchorsname 속성을 가진 모든 요소 반환document.applets모든 요소 반환document.baseURLdocument 문서의 절대기본 URL 반환document.body 요소 반환document.cookiedocument의 쿠키 반환document.doctypedocument의 doctype 반환document. document.Elementhtml 요소 반환document. document.Mode브라우저..

메서드설명document.createElement(요소)HTML 요소 생성document.createTextNode(요소)text 삽입document.appendChild(요소)HTML 요소 추가document.removeChild(요소)HTML 요소 제거document.replaceChild(요소)HTML 요소 대치 ( 교환)document.write(text)HTML_출력 스트림에 쓰기           : 주로 같이 사용됨 createElement()이 메서드는 HTML요소를 생성한다. (생성만 하는 거라서 따로 출력해주어야한다.)만약, HTML 요소가 텍스트를 포함하고 있다면 해당 요소에 텍스트를 삽입할 수 있도록 해야한다. create new button element with text Tr..

HTML 요소 바꾸는 메서드메서드설명element.innerHTML = 새로운 html content;HTML 요소 내용 변경element.attribute = 새로운 value;HTML 요소 속성 값 변경* 속성 없으면 undefinedelement.setAttribute(attribute, value);HTML 요소 속성 값 변경 메서드* 속성 없으면 새로 생성element.style.property = 새로운 style;HTML 요소 스타일 변경**getAttribute(attribute); // 문서객체의 태그속성값을 얻어오는 메서드, 게터 기존 내용입니다. 위 내용은 변경된 문자열입니다. Try it  try it 클릭시 alt값 test_img 속성 변경 속성 바꾸기2중입니..