반응형
write/writeln
[광고 누르면 오늘의 행운 상승!!]
- document.write 메소드는 가장 쉽게 문서 내에 콘텐츠를 추가하는 방법
- DOM 초창기에 만들어진 메소드로 노드에 적용할 수 없음
Write 사용 방법
- write 메소드를 이용하여 콘텐츠를 추가하고자 하는 HTML 문서의 특정 위치에서 사용하는 것
- 웹 브라우저가 웹 문서를 읽어 들어 화면을 만들 때 원하는 위치에 원하는 결과를 얻을 수 있음.
주의사항
- document.write를 함수 내부에 사용하여 이벤트를 호출했을 때 → 기존 문서 전체를 지워버리고, 콘텐츠를 출력함
Writeln
- 줄바꿈을 표시한다는 것 이외에는 write와 동일함
- BUT! HTML에서는 줄바꿈을 무시하기 때문에 <pre> 요소를 포함하는 콘텐츠를 출력하기 전에는 → write , writeln은 동일한 결과를 보임
노드의 생성과 삽입
<<createElement() / createTextNode()>>
요소와 텍스트 노드 생성
var newElement = document.createElement("p");
var newTextNode = document.createTextNode("이것은 토스트 입니다");
//p요소를 생성해 변수 newElement에 할당
//텍스트 노드를 생성해 변수 newTextNode 에 할당
<<appendChild>>
//HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>이것은 문서 단락입니다.</h3>
<script src = "script.js"></script>
</body>
</html>
//JavaScript 코드
var newElement = document.createElement("p");
var newTextNode = document.createTextNode("이것은 토스트 입니다");
document.getElementsByTagName("body")[0].appendChild(newElement).appendChild(newTextNode);
<<insertBefore()>>
- 특정 요소 앞에 삽입하기 위해 사용
- 부모노드.insertBefore(삽입할 노드, 레퍼런스 노드 )
var newElement = document.createElement("p");
var newTextNode = document.createTextNode("이것은 토스트 입니다");
var h3Element= document.getElementsByTagName("h3")[0];
var newHTMLCode = newElement.appendChild(newTextNode);
document.getElementsByTagName("body")[0].insertBefore(newHTMLCode,h3Element);
<<replaceChild>>
- 자식 노드 중 특정 노드를 새로운 노드로 치환하는 역할
- 부모 노드.replaceChild(새로운 노드, 바뀔 노드)
var newElement = document.createElement("p");
var newTextNode = document.createTextNode("이것은 토스트 입니다");
var h3Element= document.getElementsByTagName("h3")[0];
var newHTMLCode = newElement.appendChild(newTextNode);
document.getElementsByTagName("body")[0].replaceChild(newHTMLCode, h3Element);노드 속성 조작
-
생성한 노드의 class 또는 id 속성 적용
→ getAttribute()와 setAttribute() 메소드 사용 -
노드.getAttribute("속성명") : 노드의 속성 값을 가져온다.
-
노드.setAttribute("속성명", "속성값") : 노드의 속성을 속성값으로 설정한다.
<<HTML>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href="SetAttribute.css">
</head>
<body>
<div><a href="#">클릭</a></div>
<script src="SetAttribute.js"></script>
</body>
</html>
<<CSS>>
a{
text-decoration : none;
color : black;
font-size : 0.8em;
}
div{
width : 150px;
height : 50px;
text-align : center;
}
div.yellow{
background-color:yellow;
border: 4px dotted gray;
}
div.yellowgreen{
background-color:yellowgreen;
border: 4px dotted gray;
}div.pink{
background-color:pink;
border: 4px dotted gray;
}
<<JavaScript>>
var box = document.getElementsByTagName("div");
var boxTouch = document.getElementsByTagName("a");
boxTouch[0].addEventListener("click",setStyle, false);
function setStyle(){
var styleType = box[0].getAttribute("class");
switch(styleType){
case "yellow":
box[0].setAttribute("class", "yellowgreen");
break;
case "yellowgreen":
box[0].setAttribute("class", "pink");
break;
case "pink":
box[0].setAttribute("class", "yellow");
break;
}
}
CSS의 변경
- CSS 정의가 되어 있는 style 프로퍼티를 사용하면
→ 접근한 노드의 CSS속성을 직접 적용하거나 변경 가능
→ 노드.style.css속성 = css속성값
주의사항
- CSS속성을 표시할 때 하이픈(-)은 모두 대문자 표기로 바꿔주어야 함
- 예) CSS 속성 중 배경색 속성 : background-color → backgroundColor
<<HTML>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<div class = "yellow"><a href="#">클릭</a></div>
<script src="SetAttribute.js"></script>
</body>
</html>
<<CSS>>
@charset "UTF-8";
a{
text-decoration : none;
color : yellow;
font-size : 0.8em;
}
div{
width : 150px;
height : 50px;
text-align : center;
background-color : yellow;
border: 4px dotted gray;
}
<<JavaScript>>
var box = document.getElementsByTagName("div");
var boxTouch = document.getElementsByTagName("a");
var clickCount = 0
boxTouch[0].addEventListener("click",setStyle, false);
function setStyle(){
var styleNum = clickCount % 3;
switch(styleNum){
case 0:
box[0].style.backgroundColor = "yellowgreen";
break;
case 1:
box[0].style.backgroundColor = "pink";
break;
case 2:
box[0].style.backgroundColor = "yellow";
break;
}
clickCount++;
}innerHTML
-
비표준의 대명사로 불려옴
-
HTML5에서 표준으로 인정
-
createElement()와 createTextNode() 그리고 appendChild()를 한꺼번에 처리하는 효과 발휘
function console(outputString){
document.getElementById("console").innerHTML = outputString;
}-
아이디 속성 값이 console인 요소 내부에 outputString 전달인자를 넣으라는 의미
-
특정 요소 내부에 HTML코드를 삽입하는 가장 빠른 방법
반응형
'5. 웹 프로그래밍 > 3. JavaScript' 카테고리의 다른 글
| Function2 [JavaScript][생성자함수정의][익명함수] (0) | 2020.03.19 |
|---|---|
| 이벤트의 이해 [JavaScript][이벤트전파][이벤트막기] (0) | 2020.03.19 |
| 웹 문서 접근 [JavaScript][getElementBy][querySelector] (0) | 2020.03.19 |
| Function/배열복사 [JavaScript][함수][배열복사] (0) | 2020.03.19 |
| 배열의 메소드 [JavaScript][배열 메소드] (0) | 2020.03.19 |