HTML
자바스크립트,HTML요소 접근-22.04.06
AIN99
2022. 4. 6. 14:54
728x90
<자바스크립트 특징>
인터프리트 언어
- 컴파일 과정을 거치지 않고 바로 실행시킬 수 있는 언어
동적 타이핑(dynamic typing)
- 변수의 자료 형을 선언하지 않고도 변수를 사용할 수 있는 특징
구조적 프로그래밍 지원
- C언어의 구조적 프로그래밍 지원.
즉 if else, while, for등의 제어 구조를 완벽 지원
객체 기반
- 전적으로 객체지향언어. javascript의 객체는 연관 배열(associative arrays)
함수형 프로그래밍 지원
- javascript에서 함수는 일급 객체(first-class object).
즉 함수는 그 자체로 객체. 함수는 속성과 .call()과 같은 메서드를 갖는다.
프로토타입
- 기반(prototype-based) – 상속을 위해 클래스 개념 대신 프로토타입 사용
=>내부에는 script 반드시 한개만
=> src가 있는 script문장은 여러개 사용 가능하다. 즉 링크 적는 스크립트는 여러개 가능임
<변수>
변수 키워드 3종(var, let, const)
var
-scope : 함수범위
-변수 호이스팅 발생
-변수 선언시 키워드 생략 허용
-재선언, 재할당 가능
let
-scope : 블록('{}')범위
-변수 호이스팅 불가
-변수 재선언 불가
-변수 재할당 가능
const
-scope : 블록('{}')범위
-변수 재선언/재할당 불가
<var>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//var -재선언 재할당 가능
var name="asdfasdf"
console.log(name);
var name="javascript";
console.log(name);
</script>
</head>
<body>
<pre>
변수 키워드 3종(var, let, const)
var
-scope : 함수범위
-변수 호이스팅 발생
-변수 선언시 키워드 생략 허용
-재선언, 재할당 가능
let
-scope : 블록('{}')범위
-변수 호이스팅 불가
-변수 재선언 불가
-변수 재할당 가능
const
-scope : 블록('{}')범위
-변수 재선언/재할당 불가
</pre>
</body>
</html>
<let>
//let -재선언 불가 재할당 가능
let name="asdfasdf"
console.log(name);
let name="javascript"; //let name불가!
console.log(name);
수정
//let -재선언 불가 재할당 가능
let name="asdfasdf"
console.log(name);
name="javascript"; //let name불가!
console.log(name);
<const>
//const- 재선언 재할당 불가
const name="asdfasdf"
console.log(name);
name="javascript";
console.log(name);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
typeof : 변수의 데이터 타입을 반환하는 연산자
원시타입(primitive data type) 7종
string : 데이터의 타입이 문자열
number : 데이터의 타입이 숫자
boolean : 데이터의 타입이 불리언
null : 지정되지 않은 빈 상태
underfined : 변수가 정의되지 않았거나 값이 없을 때
object(또는 function) : 데이터 타입이 함수, 배열 등의 객체
------------------------------------------------
symbol -ES6에서 추가된 7번째 원시 타입
: 충돌 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
-유일성이 보장되는 자료형
-변경 불가한 원시 타입의 값
-다른 값과 중복되지 않는 유일한 값
</pre>
<script>
var a;
document.write("typeof a : "+ typeof a + "<br>");
var a=3;
document.write("typeof a=3: "+ typeof a + "<br>");
var a="javascript";
document.write("typeof a=: "+ typeof a + "<br>");
var a=true;
document.write("typeof a=true: "+ typeof a + "<br>");
var a=["html", "css","javascript"];
document.write("typeof a=[]: "+ typeof a + "<br>");
function a() {};
document.write("function a(){}: "+ typeof a + "<br>");
var a = function a() {};
document.write("function a(){}: "+ typeof a + "<br>");
var a =Symbol("심불의 설명");
document.write("a=Symbol() : "+ typeof a + "<br>");
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
id를 이용한 요소의 접근 - getElementById()
-단어 첫자 대문자 표기 주의
-id는 unique하기 때문에 단일 요소가 검색되므로 (Element)
</pre>
<h1 id="hd">This is a heading</h1>
<button type="button" onclick="fn()"> 스타일 변경 / 내용변경</button>
<script>
function fn() {
var v_headTag = document.getElementById('hd');
console.log(v_headTag.innerHTML) //f12눌러서 확인
//alert(v_headTag); 누르면 창 뜰 수 있도록
v_headTag.style.color="red";
}
</script>
</body>
</html><button type="button" onclick="fn()"> 스타일 변경 </button>
button 기능이 없으므로 onclick이용해서 기능 넣어주기
<내용 변경시키기>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
id를 이용한 요소의 접근 - getElementById()
-단어 첫자 대문자 표기 주의
-id는 unique하기 때문에 단일 요소가 검색되므로 (Element)
</pre>
<h1 id="hd">This is a heading</h1>
<button type="button" onclick="fn()"> 스타일 변경 / 내용변경</button>
<script>
function fn() {
var v_headTag = document.getElementById('hd');
//console.log(v_headTag.innerHTML) f12눌러서 확인
//alert(v_headTag); 누르면 창 뜰 수 있도록
v_headTag.innerHTML= "내용 변경~~^^";
v_headTag.style.color="red";
}
</script>
</body>
</html>
버튼을 누르면 내용이 변경되는것을 확인할 수 있다.
<input과 value이용해서 바꾸기>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
id를 이용한 요소의 접근 - getElementById()
-단어 첫자 대문자 표기 주의
-id는 unique하기 때문에 단일 요소가 검색되므로 (Element)
</pre>
<h1 id="hd">This is a heading</h1>
<!-- <button type="button" onclick="fn()"> 스타일 변경 / 내용변경</button> -->
<input type="button" id="btn" onclick="fn()" value="스타일 변경 / 내용변경">
<script>
function fn() {
var v_headTag = document.getElementById('hd');
//console.log(v_headTag.innerHTML) f12눌러서 확인
//alert(v_headTag); 누르면 창 뜰 수 있도록
v_headTag.innerHTML= "내용 변경~~^^";
v_headTag.style.color="red";
var v_btn = document.getElementById('btn');
console.log(v_btn.value);
v_btn.value="button change";
v_btn.style.backgroundColor="yellow";
}
</script>
</body>
</html>
HTML 요소에 접근하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
span{
display: none;
}
</style>
</head>
<body>
<pre>
요소의 값을 읽어오기 / 설정하기 (value, innerHTML, innerText, textContent)
value
1.입력요소 <input>의 초기 값을 명시할 때 사용된다. <!--input만 넣으면 빈칸이 뜨므로 -->
2.입력요소의 type에 따라 용도가 다르게 사용된다.
-button, reset, submit : 버튼 내 텍스트 정의
-hidden, password, text : 입력 필드의 초기 값 정의
-checkbox, radio : 필드 선택시 서버로 제출되는 값 정의
innerHTML
읽어오는 값에 태그가 포함되므로 보안에 취약한 단점이 존재
때문에 HTML5에서는 innerHTML이 삽입된 태그를 실행하지 않도록 지정
= 보안점검을 거치는 프로젝트의 경우 코드 거부 가능성이 있으므로
특별한 경우를 제외하고 사용을 권장하지 않음
innerText
사용자에게 보여지는 텍스트 값을 읽어옴
연속되는 공백은 무시된다 (=하나의 공백으로 처리)
원시 텍스트의 랜더링된 상태(=스타일 적용 후의 모습)를 보여줌
textContent
해당 노드의 텍스트 값(= 원시 텍스트)를 읽어옴
표현된 공백을 그대로 가져오며 숨겨진 텍스트도 출력함
노드의 내부 콘텐츠를 text/plain으로 파싱(분석/해석)한 경과 값
(=해당 요소의 원시 텍스트(raw text)표현)
</pre>
<div id="d1">
안녕?? 만나서 반가워!!
<!-- <span style="display: none;">숨겨진 텍스트..1</span> --권고하지 않음 -->
<span>숨겨진 텍스트..2</span>
</div>
<input type="button" value="innerHTML" onclick="fn1()">
<input type="button" value="innerText" onclick="fn2()">
<input type="button" value="textContent" onclick="fn3()">
<input type="button" value="value" onclick="fn4()">
<div id ="result"></div><script>
//공통으로 사용하기 위해 전역변수로 선언 (d1부분 내용 접근하기위해)
var v_d1=document.getElementById('d1');
var v_rst=document.getElementById('result');
function fn1() {
alert(v_d1.innerHTML);
v_rst.innerHTML="<p style='color:green'>나는 innerHTML 입니다</p>";
}
function fn2() {
alert(v_d1.innerText);
v_rst.innerText="<p style='color:green'>나는 innerText 입니다</p>";
}
function fn3() {
alert(v_d1.textContent);
v_rst.textContent="<p style='color:green'>나는TextContent 입니다</p>";
}
function fn4() {
//document.getElementsByTagName('input')[3].value="버튼 변경"; //요소로 접근
var v_btn = document.getElementsByTagName('input')[3];
alert(v_btn.value);
v_btn.value="value_change";
}
</script>
</body>
</html>
<innerHTML눌렀을 때>
<innerText눌렀을 때>
정리하자면 값가져오기 값 설정하기가 있는데
| 값가져오기 | 값설정하기 | |
| innerHTML | HTML,XML태그까지 다 가져옴 | 입력된 html태그가 해석되어 예를들면 빨간색A 가 나타나는 것을 확인 |
| innerText | text값들만 가져옴 공백도 사라져서 | html코드가 문자열 그대로 element안에 포함됩니다. |
<textContent눌렀을 때>
=>inerText와 textContent는 스타일 변경이 안된다.
<value눌렀을 때>
버튼글자도 바뀐다.
getElementsByTagName('요소/태그명')[n]
getElemntsByClassName('클래스명')[n]
-요소의 n번째를 선택
-요소(태그)와 클래스는 여러 요소에 접근(=elements)
-------------------------------------------------
ES6에서 나온 new..(ES2에서 나온 getElementId()가 더 효율적)
querySelector('#id명'또는 '.class명' 또는 tag명)
-첫번째 요소만 선택
querySelectorAll('#id명' 또는 '.class명'또는 tag명)
-모든 요소 선택
[n]: 인덱스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
div{
border: 1px solid black;
width: 200px;
height: auto;
margin: 10px;
padding: 10px;
}
p{
border: 1px solid gray;
}
</style>
</head>
<body><2가지 방법 사용>
<script>
function getCN() {
var v_pTag = document.getElementsByClassName('p')[0]; //p요소 검색
//alert(v_pTag.length); //인덱스 없애고 띄우면 4개 나옴
v_pTag.style.color="red"; //자바 스크립트의 스타일적용은 딱 하나의 요소만 셋팅해줄 수 있음
/*javasctipt에서는 하나의 개체에 대해서 스타일을 적용하므로
여러개의 개체에 대해 스타일을 적용할 때 for문을 사용한다.*/
var v_pArr= document.getElementsByClassName('p');
for(var i=0; i<v_pArr.length; i++){
v_pArr[i].style.border="1px solid red";
}
}
//querySelector이용
function getCN() {
var v_pTag = document.querySelector('.p');
v_pTag.style.color="orange";
var v_pArr= document.querySelectorAll('.p');
for(var i=0; i<v_pArr.length; i++){
v_pArr[i].style.border="5px solid pink";
}
}
function getTN() {
var v_divTag = document.getElementsByTagName('div')[2];
v_divTag.style.color="blue";
var v_divArr=document.getElementsByTagName('div');
for(var i=0; i<v_divArr.length; i++){
v_divArr[i].style.border= "1px solid blue";
}
}
//querySelector이용 (인덱스 없어야 함)
function getTN() {
var v_divTag = document.querySelector('div');
v_divTag.style.color="blue";
var v_divArr=document.querySelectorAll('div');
for(var i=0; i<v_divArr.length; i++){
v_divArr[i].style.border= "1px solid red";
}
}
</script><pre>
getElementsByTagName('요소/태그명')[n]
getElemntsByClassName('클래스명')[n]
-요소의 n번째를 선택
-요소(태그)와 클래스는 여러 요소에 접근(=elements)
-------------------------------------------------
ES6에서 나온 new..(ES2에서 나온 getElementId()가 더 효율적)
querySelector('#id명'또는 '.class명' 또는 tag명)
-첫번째 요소만 선택
querySelectorAll('#id명' 또는 '.class명'또는 tag명)
-모든 요소 선택
[n]: 인덱스
</pre>
<div class="d">첫번째 div1
<p class="p">첫번째 p1</p>
<p class="p">p2</p>
<p class="p">p3</p>
<p class="p">p4</p>
</div>
<div class="d">div2</div>
<div class="d">div3</div>
<div class="d">div4</div>
<input type="button" value="classNm" onclick="getCN()">
<input type="button" value="tagNm" onclick="getTN()">
</body>
</html><querySelector이용한 결과임>
728x90