728x90 반응형 javascript37 [javascript]HTML 내용, 속성, 스타일 변경하기 1. html의 내용 변경 .innerHTML = "" 예를 들어 html로 div안에 홍길동이라는 이름을 화면에 출력되있음 홍길동 홍길동을 이순신으로 바꿔서 출력하고 싶을때는 document.getElementById("id명").innerHTML = "이순신"; document.querySelector("div(태그명)").innerHTML = "이순신"; el.innerHTML => 태그를 포함하여 수정 el.innerTEXT => 글자만 수정 See the Pen Untitled by namminimi (@namminimi) on CodePen. 2. html 속성변경 document.getElementById("id명").src = 'pic.gif'; document.querySelector(".. 2022. 12. 3. [javascript]html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이 현재 글은 전 자료에서 이어짐 2022.12.03 - [javascript/DOM] - 자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 솔직히 자세히는 모르겠다... ㅠㅠ 아직 지식이 별로 없어서... 찾아본 정보들과 배운 자료들로만 정리해봄 HTMLCollection은 복수선택할 수 있는 document.getElementByclassName("class명") - html 컬렉션(유사배열) document.getElementByTagName("tag명") - html컬렉션(유사배열) 에서 확인할 수 있다 HTMLCollection은 유사 배열 형태이긴 한데 제공하는 모든 메서드(함수)는 없음 배열에 사용되는 .forEach나 .map 등등 사용하면 오류 발생함 메서드를 사용할 방.. 2022. 12. 3. [javascript]자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Document 박스1입니다. 박스2입니다. 박스3입니다. 박스4입니다. 박스5입니다. text1 text2 text3 text4 text5 console.log(document.getElementById("box1")); //id명 box1 element(요소) 선택/콘솔 출력 console.log(document.querySelector("#box2")); //id명 box2 element(요소) 선택/콘솔 출력 console.log(document.getElementsByClassName("divbox".. 2022. 12. 3. [javascript]change이벤트 실습1 See the Pen Untitled by namminimi (@namminimi) on CodePen. change 이벤트 사용 하여 10을 선택했을 때 div에 "가"가 출력되고 20은 "나"출력!!!!! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Document 10 20 30 40 document.querySelector("#num").addEventListener("change", function(){ //change 이벤트사용 document.querySelector("div").innerHTML = this.value; //값이 바뀔때마다 #num value값 div에 출력 }) Colored by Color Scripter cs ※.. 2022. 12. 3. 불 끄고 켜기 실습 See the Pen Untitled by namminimi (@namminimi) on CodePen. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Document 불켜기 불끄기 console.log(document.querySelector("img").src); function buloff() { document.querySelector("img").src = "./images/pic_bulboff.gif"; } function bulon() { document.querySelector("img").src = "./images/pic_bulbon.gif"; } Colored by Color Scripter cs 사용한 DO.. 2022. 12. 1. [javascript] class class는 객체를 만들기 위한 도구, 템플릿 변수와 메소드를 정의하는 일종의 틀이다 객체를 정의하기위한 상태(멤버변수)와 메소드(함수)로 구성된다 예시 구문) class Person { constructor(name, age, hasJob) { this.name = name; this.age = age; this.hasJob = hasJob; } speak() { console.log("hello"); } eat() { console.log("먹는다"); } } let person3 = new Person("aaa", 30, false); 1. new 키워드를 사용하여 생성자 호출/생성 2. 호출을 하면 constructor() 생성자 함수를 찾아서 값들을 초기화 및 할당 (공장에서 같거나 다른 기계들.. 2022. 11. 30. [javascript]요소 노드 생성 및 요소 노드 자식 추가 보호되어 있는 글 입니다. 2022. 11. 29. 이전 1 2 다음 728x90 반응형
