자바스크립트 - insertBefore() 특정 위치에 앞에 노드 삽입

insertBefore() 부모노드의 기준 점 노드 앞에 삽입 할 노드를 삽입합니다. 내가 원하는 위치에 삽입 할 수 있습니다. 문법 부모노드.insertBefore(삽입 할 노드, 기준 점 노드); 기존 부모 노드에서도 굳이 삭제 할 필요 없이 자동으로 이동하게 됩니다. ex) 부모노드 1번에 위치하고 있을 때, 3번으로 옮기고 싶을 때 삭제하고 옮기지 않아도 됩니다. 노드는 자동적으로 기존 노드에서 삭제되고, 새로운 부모 밑에 삽입됩니다 기준 점 노드를 null로 하게 되면, 자식 노드의 끝에 삽입 됩니다. 반환값 삽입 된 노드 예시 + button button button button const ele = document.querySelector('.newEle'); const parent = do..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 15.
• textsms

자바스크립트 - innerHTML, removeChild, replaceChild

엘리멘트 내부를 변경할 수 있는 자바스크립트 속성 또는 메서드 입니다. Element.innerHTML 메서드가 아니라 속성 값을 넣을 수 도있고 반환을 받을 수도 있는 속성 활용도가 높다. element.innerHTML = 'Hello JavaScript';​ ※ 주의사항 innerHTML을 통해 내용을 삽입하면 document 객체가 이미 완성된 상태이기 때문에 삽입된 즉시 브라우저 해석에 들어간다 문장을 따로 따로 넣으면 안됨 명령어를 많이 이행하는 만큼 성능에도 좋지 않다. 명령을 최소화 하는 방법으로 바꿔야 한다. 안좋은 예 ❌ element.innerHTML += "Hello"; element.innerHTML += "world"; 바른 예 ⭕ var content = "Hello"; con..

• format_list_bulleted Develop/JavaScript
• · 2018. 12. 8.
• textsms

자바스크립트 - appencChild(), insertBefore() / 엘리먼트에 자식 노드 삽입하기

appendChild 부모객체.appendChild(삽입되는객체) 부모의 자식 엘리먼트들 중에 가장 마지막에 삽입됩니다. 순서를 지정할 수 없다. 순서가 중요할 시에는 주의가 필요 Element.appendChild(elementObj); insertBefore 자식 객체 중의 하나를 선택해서 앞에 붙여 넣을 수 있다. Element.inserBefore(elementObj, childElement) 자바스크립트 - insertBefore() 특정 위치에 앞에 노드 삽입 insertBefore() 부모노드의 기준 점 노드 앞에 삽입 할 노드를 삽입합니다. 내가 원하는 위치에 삽입 할 수 있습니다. 문법 부모노드.insertBefore(삽입 할 노드, 기준 점 노드); 기존 부모 노드에서도 굳 powerk..

• format_list_bulleted Develop/JavaScript
• · 2018. 12. 8.
• textsms

자바스크립트 - 부모 자식 element 찾기 parentNode, childNodes

Element.parentNode 객체의 부모 요소를 찾아 줍니다. 메서드가 아닌 속성이고 설정은 불가능합니다. var parentElement = elementObj.parentNode Element.childNodes 위의 메서드와 반대로 하위 엘리먼트를 찾는 방법 입니다. 읽기 전용입니다. 배열로 구성 부모는 하나지만 자식은 여럿을 둘 수 있습니다. 주의사항 하위 요소 뿐만아니라 일반적인 문자도 객체로 불러옴 하나의 공백 문자도 하나의 텍스트 노드로 인식 var childElements = elementObj.childNodes

• format_list_bulleted Develop/JavaScript
• · 2018. 12. 8.
• textsms

자바스크립트 Element 객체 가져오기 getElementById, getElementsByClassName, querySelector

자바스크립트에서 DOM 엘리먼트 객체를 구할 수 있는 방법 4가지를 소개해드리겠습니다. getElementById("id") ID 값을 통하여 자바스립트 객체를 가지고 올 수 있습니다. Red Blue const red = document.getElementById("red"); const blue = document.getElementById("blue"); red.style.color = "red"; blue.style.color = "blue"; 결과 getElementById 를 통하여 ID값을 호출하여서 CSS에서 폰트 색깔을 주었습니다. Red Blue getElementsByClassName("className") class 이름을 가진 모든 객체가 담긴 배열을 가져옵니다. Superman ..

• format_list_bulleted Develop/JavaScript
• · 2018. 12. 8.
• textsms

자바스크립트 | XMLHttpRequest, readyState

XMLHttpRequest : XMLHttpRequest 객체는 HTTP 클라이언트 인터페이스를 구현합다. : 폼 데이터를 보내거나 서버로 부터 데이터를 받아오는 기능을 수행합니다. 1. XMLHttpRequest 객체 생성1234567891011var httpRequest = null; function requestMsg(){ if(window.XMLHttpRequest){ httpRequest = new XMLHttpRequest(); //safari, firefox, chrome }else if(window.ActiveXObject){ httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //exploer }else{ httpRequest = null; }..

• format_list_bulleted Develop/JavaScript
• · 2018. 6. 20.
• textsms

Javascript - 스코프(Scope) 영역 범위

Java의 Scope { } 영역 안으로만 변수를 사용할 수 있습니다. int a = 10; if(a == 10){ System.out.println(a); int b = 20; System.out.println(b); } System.out.println(a+b); //error JavaScript의 Scope { } 코드 블록으로 영역을 나누지 않습니다. 자바스크립트는 특정 구문이 실행 될 때 새로 생성합니다. function : 함수, 가장 많이 사용 with : 곧 사라질 구문(ECMAScript6부터 Deprecated) catch : 예외처리 구문 var a = 10; if(a === 10){ console.log(a); var b = 20; console.log(b); } console.lo..

• format_list_bulleted Develop/JavaScript
• · 2018. 6. 12.
• textsms

[JavaScript] 프로토타입(Prototype)

프로토타입(ProtoType) - 객체의 기본적인 속성을 정의합니다. - function() 구문을 통해 만든 클래스라는 객체 정의로부터만 생성 할 수 있습니다. - 자바스크립트는 포토타입 기반 프로그래밍 언어입니다. 123456789101112131415161718192021222324252627Insert title here //프로토타입 객체 => JAVA의 클래스와 같은 개념 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.walk = function(speed) { console.log("%s가 %d의 속도로 걸어가.", this.name, speed); } //객체를 참조하여 함수 추가 var p..

• format_list_bulleted Develop/JavaScript
• · 2018. 6. 12.
• textsms