ohmyfun ohmyfun

html 번호 이름 1 오지석 2 오지순 3 오박사 js window.addEventListener("load", function(){ var tablelist = document.querySelector(".table-list"); var tbodyNode = document.querySelector("tbody"); var btn = document.querySelector(".btn"); btn.onclick = function(){ var cloneNode = tbodyNode.cloneNode(true); tablelist.append(cloneNode); } }); cloneNode()는 엘리먼트를 DOM에 복제하여 붙여넣기를 하면 동일한 기능을 수행하므로 코드를 간결하고 쉽게 만들 수 있죠...

html js window.addEventListener("load", function(){ var section = document.querySelector("#section6"); var titleinput = section.querySelector(".title-input"); var addbutton = section.querySelector(".add-button"); var delbutton = section.querySelector(".del-button"); var menulist = section.querySelector(".menu-list"); addbutton.onclick = function(){ var title = titleinput.value; var html = '' + t..

document의 text노드(객체)를 동적으로 생성하여 js 트리구조에 삽입해주는 방식 html js window.addEventListener("load", function(){ var section = document.querySelector("#section6"); var titleinput = section.querySelector(".title-input"); var addbutton = section.querySelector(".add-button"); var delbutton = section.querySelector(".del-button"); var menulist = section.querySelector(".menu-list"); addbutton.onclick = function(..

사진의 테두리 색상을 바꾸는 예제를 수행해보겠다. html js window.addEventListener("load", function(){ var imgt1 = document.querySelector("#imgt1"); var img = imgt1.querySelector(".img"); var btn2 = imgt1.querySelector(".btn2"); var colorinput = imgt1.querySelector(".color-input"); btn2.onclick = function(){ console.log(colorinput.value); // img.style["border-color"] = colorinput.value; img.style.borderColor = colorin..

text명으로 변경 html js window.addEventListener("load", function(){ var imgt1 = document.querySelector("#imgt1") var img1 = imgt1.querySelector(".img1"); var btn = imgt1.querySelector(".btn"); var imgtext = imgt1.querySelector(".imgtext"); btn.onclick = function(){ img1.src = "image/"+imgtext.value+".jpg"; } }); 옵션바 변경 html img1 img2 js window.addEventListener("load", function(){ var imgt1 = document..

노드란? 노드란 객체들의 공통분모를 추상화시킨것이다. 위의 모든 객체들은 노드라고 할 수 있다. 다만 각 노드의 타입(종류)이 모두 같은것은 아니다. node의 종류 1. DocumentType DOCTYPE html> 2.Element(태그로 되어져있는것) 2-1 Attr(태그안에 사용되는 속성들) 2-2 Entity(괄호와 띄어쓰기 같은 특수 문자를 사용하기위한 속성) , 2-3 EntityReference(Entity를 감싸는 문자) , 2-4 Text(태그 안쪽에 사용되는 문자) 안녕하세요 3.comment 4.CDATASection(괄호와 같은 특수기호를 마음껏 사용할 수 있다) ,]]> 5.Notation(색상값 px등등) 이러한 것들이 문서에 의해 읽혀지면 해당 type에 ..

node 트리 구조 위 트리구조는 노드 트리구조이다 가장 상위에 document객체가 있고 아래로 트리모양으로 node들이 분포된다. js에서는 노드들을 불러올때 해당 노드의 하위 즉 자식 노드들을 속성을 사용하여 불러올 수 있다. html 다음과 같은 section이 하나 주어진다. div 노드의 자식 노드에는 input 노드가 2개 존재한다. 우리는 이 자식노드들을 children속성을 사용하여 불러올 수 있다. js window.addEventListener("load", function(){ var sec5 = document.querySelector("#sec5"); var box = sec5.querySelector(".box"); var input1 = box.childNodes[0]; va..

html js window.addEventListener("load", function(){ var sec1 = document.getElementById("sec1"); var textx = sec1.querySelector(".textx"); var texty = sec1.querySelector(".texty"); var result = sec1.querySelectorAll(".result"); var btn1 = sec1.querySelector(".btn1"); btn1.onclick = function (){ var x = parseInt(textx.value); var y = parseInt(texty.value); result[0].value = x+y; result[1].value = ..