DOM

IT 공부/JavaScript

DOM

toraa 2022. 6. 13. 20:37

<script type="text/javascript">

function changeOn(){
let p = document.getElementById('box');

p.style.backgroundColor="#FA8072";
p.style.width="200px";
p.style.height="100px";
p.style.border="1px solid black";
  p.style.borderRadius= "30%"; 
  p.style.boxShadow = "10px 10px 10px gray";
}

</script>
<body>
<h2>What Can JavaScript Do?</h2>
<div id="box" style="background-color:#FFE4E1; width:200px; height:100px; border:1px solid black;
text-align:center"><br><br>스크립트동적변경</div>
<button onclick=changeOn()>스타일 변경</button>

</body>

<title>Class로 불러오기</title>
<script type="text/javascript">

function change(){

let spanArray = document.getElementsByClassName("c");

for(i=0; i<spanArray.length; i++){
spanArray[i].style.color='skyblue';
spanArray[i].style.backgroundColor='yellow';
spanArray[i].style.fontSize="30px";
spanArray[i].style.fontWeight="border";
}

//spanArray[0].style.color = 'red';
//spanArray[0].style.fontSize= '30px';
//spanArray[1].style.color = 'red';
//spanArray[1].style.fontSize= '30px';

//document.write(spanArray.length);
}

</script>
</head>
<body>
<h3>내가 제일 좋아하는 과일
<button type="button" onclick="change()">눌러주세요!</button>
</h3>
저는 빨간 <span class="c">사과</span>를 좋아해서
아침마다 한 개씩 먹고 있습니다. 운동할 때는 중간 중간에
<span class="c">바나나</span>를 먹지요. 탄수화물 섭취가 빨라
힘이 납니다. 또한 달콤한 향기를 품은 <span class="c">체리</span>와
여름 냄새 물씬 나는 <span class="c">자두</span>를 좋아합니다.

</body>

<title>Tag로 불러오기</title>
<script type="text/javascript">

function change(){

let spanArray = document.getElementsByTagName("span");

for(i=0; i<spanArray.length; i++){
spanArray[i].style.color='red';
spanArray[i].style.backgroundColor='yellow';
spanArray[i].style.fontSize="30px";
spanArray[i].style.fontWeight="border";
}
}

</script>
</head>
<body>
<h3>내가 제일 좋아하는 과일
<button type="button" onclick="change()">눌러주세요!</button>
</h3>
저는 빨간 <span>사과</span>를 좋아해서
아침마다 한 개씩 먹고 있습니다. 운동할 때는 중간 중간에
<span>바나나</span>를 먹지요. 탄수화물 섭취가 빨라
힘이 납니다. 또한 달콤한 향기를 품은 <span>체리</span>와
여름 냄새 물씬 나는 <span>자두</span>를 좋아합니다.

</body>

title>name으로 불러오기</title>
<script type="text/javascript">

function change(){

let spanArray = document.getElementsByName("n");

for(i=0; i<spanArray.length; i++){
spanArray[i].style.color='red';
spanArray[i].style.backgroundColor='yellow';
spanArray[i].style.fontSize="30px";
spanArray[i].style.fontWeight="border";
}
}

</script>
</head>
<body>
<h3>내가 제일 좋아하는 과일
<button type="button" onclick="change()">눌러주세요!</button>
</h3>
저는 빨간 <span name="n">사과</span>를 좋아해서
아침마다 한 개씩 먹고 있습니다. 운동할 때는 중간 중간에
<span name="n">바나나</span>를 먹지요. 탄수화물 섭취가 빨라
힘이 납니다. 또한 달콤한 향기를 품은 <span name="n">체리</span>와
여름 냄새 물씬 나는 <span name="n">자두</span>를 좋아합니다.

</body>

CSS선택
ul > li :
ul + h1 :
ul li :

CSS선택자를 이용해서 가져올 때 활용
- querySelector()
- querySelectorAll('ul > li')

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul#a{
}
</style>
<script type="text/javascript">

function f() {
//let tag = document.querySelector('ul#a'); //ul태그중에 아이디가 a인 요소
//document.write('<h4>'+tag.tagName.toLowerCase()+" : "+tag.id+'</h4>');

//let tags = document.querySelectorAll('section li'); // section안에 모든 li자손들
//let tags = document.querySelectorAll('#a ul'); // 아이디 a밑에 ul자손들
//let tags = document.querySelectorAll('#c + ul'); // 인접한 동생
//let tags = document.querySelectorAll('#a ~ h1'); // 동생들
let tags = document.querySelectorAll('#a > ul'); // 자식들

for ( i=0; i<tags.length; i++ ){
document.write( '<h4>' + tags[i].tagName.toLowerCase() + " : " +tags[i].id + '</h4>');
}
}
</script>
</head>
< body onload = 'f()' >
<section>
<p id='h'></p>
<ul id='a'>
<li id='e'>
<ul id='b'>
<li id='i'></li>
<li id='j'></li>
</ul>
</li>
<li id='f'></li>
<ul id='k'></ul>
<ul id='l'></ul>
</ul>
<h1 id='c'></h1>
<ul id='d'></ul>
<ul id='g'></ul>
<h1 id='m'></h1>
</section>
</body>

<input id='t' type="checkbox" name="chk_interest" value="entertaiment">
<label for='t'>엔터테이먼트</label><br>

DOM 객체
let tag = document.getElementById(' ')

속성
id : a
lang : kor * let s = window.getComputedStyle( )
style * let value = s.getPropertyValue( 'color' )
title
tagName
innerHTML

메소드
setAttribute()
getAttribute()

</head>
<body>
<p>이것은 <span id='mySpan' onclick='setColor()'> 문장 </span>입니다</p>
<p>여기를 누르면 <span id='my' style="background-color: yellow" onclick='getColor()'>셀렉터로 설정된 스타일 프로퍼티를 읽기<span> 할 수 있다.</p>
</body>

document.write( )
; document 객체가 닫히고 난 다음에는 HTML텍스트를 추가하기 위한 write()를 사용하지 못한다.
; 만약 write()를 사용해서 출력하면, 현재 출력되어있는 내용을 모두 지우고 새롭게 쓴다.

<body onclick="document.write(' <h3>클릭되었습니다. onclick으로 추가된 write()에 있는 텍스트가 출력됩니다.</h3> ')" >
<h3> write()를 잘못 적용한 사례 </h3>
<hr>
<p> document문서는 HTML문서가 모두 출력된 다음에는 닫히므로 추가할 수 없다. <br>
그런데 이때 write()로 새로운 내용을 출력하면, 앞의 내용이 지워지고 새로운 창에서 작성된다.</p>
</body>

1) document.open()
- 기존의 내용을 모두 지우고 새로운 document객체를 준비한다.
- 새로운 HTML 텍스트를 받아들일 준비한다.

2) document.write()
- 새로운 HTML 텍스트를 새로 준비한 document객체에 담는다.

3) document.close()
- HTML텍스트를 모두 쓴 후, document객체를 닫는다.

function newWin( ){

let newWin= window.open(" ", "outWind"," ");

newWin.document.open( );
newWin.document.write( '<html><head><title></title></head><body><h1>안녕하세요^^ 새로운 윈도우창입니다.' );
newWin.document.write( '......</h1>' );
newWin.document.write( '</body></html>' );
newWin.document.close( );
}
</script>

</head>
<body>
<h3>새로운 document객체 열기와 닫기</h3>
<hr>
<pre>
1) document.open()
- 기존의 내용을 모두 지우고 새로운 document객체를 준비한다.
- 새로운 HTML 텍스트를 받아들일 준비한다.

2) document.write()
- 새로운 HTML 텍스트를 새로 준비한 document객체에 담는다.

3) document.close()
- HTML텍스트를 모두 쓴 후, document객체를 닫는다.
</pre>

<h4> 현재의 창에 새로운 document객체를 생성합니다. <span onclick='newDoc()'>여기를 클릭해주세요ㅎㅅㅎ </span></h4>
<h4> 새로운 윈도우 창에 새로운 document객체를 생성합니다. <span onclick='newWin()'>여기를 클릭하세요ㅇㅅㅇ </span></h4>
</body>

createElement( '태그이름' )
createTextNode( '텍스트문자열' )

appendChild(자식노드): 막내로 추가한다.
removeChild(): 막내부터 지워진다.
insertBefore(새로운 노드, 특정 노드): 특정 노드앞에 새로운 노드를 붙인다
replaceChild(new,old): 요소노드(old)를 새로운 노드(new)로 대체한다

div {cursor }

</style>

</head>

<body id="parent">
<h3> DIV객체를 동적으로 생성,삽입,삭제해보자 </h3>
<hr>
<p>
DOM트리에 동적으로 객체를 삽입할 수 있습니다.
</p>

<a href='javascript:createDIV()'> DIV생성 </a>
</body>

<p id="p"> HTML문서의 동적구성 </p>
<button type="button" onclick=" addDOM( ) "> 추가 </button>
<button type="button" onclick=" removeDOM( ) "> 제거 </button>

</body>

<body>
여행하고 싶은 지역 <input id='t1' type="text">
<button type="button" onclick=" listPlace() "> 추가 </button>
<ul id='t2'> </ul>

<script type="text/javascript">

function listPlace(){

let tag1 = document.getElementById('t1'); // input
let tag2 = document.getElementById('t2'); // 추가할때의 기준

//요소 생성
let newPlace = document.createElement( ' li ' );

//텍스트노드생성 - innerHTML
let placeNode = document.createTextNode( tag1.value ); //input으로 받은 값을 텍스트노드로 생성

//추가하기
newPlace.appendChild( placeNode );
tag2.appendChild( newPlace );

//input에 입력한 데이터를 지운다.
tag1.value = '';

}

</script>
</body>

<h3>버튼을 클릭해서 이미지를 추가해봅니다.</h3>
<hr>
<button type="button" onclick="insertImg1()"> 이미지1 </button>
<button type="button" onclick="insertImg2()"> 이미지2 </button>
<button type="button" onclick="insertImg3()"> 이미지3 </button>
<br><br>
<div id="d">
</div>

</body>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

//국내
   function listPlace1() {
      let tag1 = document.getElementById('t1');   // input
      let tag2 = document.getElementById('d1');   // 부모 div
      let tag3 = document.getElementById('d2');   // 자식 div

//생성
      let newTag = document.createElement('div');
      let txtNode = document.createTextNode(tag1.value);   // input으로 받은 값을 텍스트 노드로 생성
      newTag.appendChild(txtNode);
      newTag.style.color='pink';
//붙이기
      tag2.insertBefore(newTag,tag3);   //tag3앞에다 newTag를 붙인다
      tag1.value='';
   }
//해외
   function listPlace2() {
      let tag1 = document.getElementById('t1');   // input
      let tag2 = document.getElementById('d1');   // 부모 div
      let tag3 = document.getElementById('d2');   // 자식 div

//생성
      let newTag = document.createElement('div');
      let txtNode = document.createTextNode(tag1.value);   // input으로 받은 값을 텍스트 노드로 생성
      newTag.appendChild(txtNode);
      newTag.style.color='green';
//붙이기
      tag3.appendChild(newTag);   //tag3앞에다 newTag를 붙인다
      tag1.value='';
   }

</script>
</head>
<body>
   추천 여행지 :   <input id='t1' type='text'>
   <button type="button" onclick='listPlace1()'>국내</button>
   <button type="button" onclick='listPlace2()'>해외</button>
   <div id='d1'>
      <div>1. 국내여행지</div>
      <div id='d2'>2. 해외여행지</div>
   </div>
</body>
</html>

저작자표시 (새창열림)

'IT 공부 > JavaScript' 카테고리의 다른 글

event (0)	2022.06.15
DOM2 (0)	2022.06.14
HTML DOM (0)	2022.06.10
Object2 (0)	2022.06.10
Object (0)	2022.06.09

현재글DOM

기록 저장소

DOM

'IT 공부 > JavaScript' 카테고리의 다른 글

'IT 공부/JavaScript'의 다른글

티스토리툴바

DOM

'IT 공부 > JavaScript' 카테고리의 다른 글

'IT 공부/JavaScript'의 다른글

관련글

티스토리툴바