-
DOM의 정의
-
DOM의 용어
요소, 속성, 텍스트
부모요소 > 후손 > 자손 -
DOM의 구조
window가 최상
- open:새창
- history:이전이후페이지
- document
-html
-head
-tilte
-body
-h1 : dom 그리고 dom을....
-hr
-ul
-li : 첫번째
-li : 두번째
-li : 세번째
-div
-ul
-li : 첫번째
-li : 두번째
-li : 세번째
DOM 구조를 알아야 하는 이유
자바스크립트나, 제이쿼리에서 요소를 선택하여 동적인 문서를 제어하기 위해,
웹크롤링에 필요한 지식이 된다.
정규표현식
형식: /정규식/
- : 범위(어디에서 어디까지)
a-z : a에서 z까지를 의미
0-9 : 0에서 9까지를 의미
ㄱ-ㅎ : ㄱ에서 ㅎ까지를 의미
ㅏ-ㅣ : ㅏ에서 ㅣ 까지를 의미
가-힣 : '가'에서 '힣'까지를 의미
[] : 괄호 안에 문자중 1개
[a-z] : a에서 z중 하나.
[abc]d : ad, bd, bd 를 의미
[^] : 괄호안의 문제 부정(제외)
[^a-z] : a ~ z를 제외한 모든 문자
[^0-9] : 숫자를 제외한 모든 문자
| : 또는(OR)
[a-z|A-Z] : a ~ z 또는 A ~ Z 의미(영어 전체)
[ㄱ-ㅎ|ㅏ-ㅣ|가-힣] : ㄱ ~ ㅎ 또는 ㅏ ~ ㅣ 또는 가 ~ 힣 의미(한글 전체)
^ : 문자열의 처음
^[a-zA-Z] : 영문자로 시작해야함
$ : 문자열의 끝
[a-zA-Z]$ : 영문자로 끝나야함
^[a-zA-Z]$ : 영문자로 시작하고, 영문자로 끝나야함
- : 0회 이상(여러개)
^[a-zA-Z]$ : 여러개의 문자가 모두 영문자여야 함
^[0-9]$ : 여러개의 문자가 모두 숫자여야 함
^[a-zA-Z0-9]$ : 여러개의 문자가 모두 영문자나 숫자여야 함
{m, n} : m회 이상, n회 이하
^[a-zA-Z]${1, 10} : 영문자 1자 이상, 10자 이하]
오후 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="h1main">자바스크립트에서 제어하기 </h1>
<hr>
<ul>
<li class="li1"> 첫번재 </li>
<li class="li1"> 두번재 </li>
<li class="li1"> 세번재 </li>
</ul>
<div>
<ul>
<li> 첫번재 -나</li>
<li> 두번재 -나</li>
<li> 세번재 -나</li>
</ul>
</div>
- 가 -
<input type="button" id="gBtn" value="green">
<input type="button" id="rBtn" value="red">
<script>
// 오늘 과제 복습 ----------------------------------------------
// 0. 위 소스에서 가부분에 버튼을 2개 만든다.
// 1개의 버튼의 value="green" 다른 한개는 value="red"
// 해당 되는 버튼을 누르면 나 부분이 버튼의 값으로 설정된 값의 색상으로 변경된다.
document.getElementById('gBtn').onclick = () => {
document.querySelector('div ul').style.color = 'green'
}
document.getElementById('rBtn').onclick = () => {
document.querySelector('div ul').style.color = 'red'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
아이디<input type="text" id="id" name="uid">
<input type="button" id="duplextChkid" value="검색"><br>
입력하신 아이디는 <span id="idinfo"></span> 입니다.
<script>
// 공통 응용 문제 ----------------------------------------------------------------------------------
// 1.
// 입력하는 단어 위에서 지정한 span 태그에 출력하기.. 입력될때 마다 갱신되어 출력된다.
// 파일명 : t01.html
document.getElementById('duplextChkid').onclick = () => {
var a = document.getElementById('id').value;
document.getElementById('idinfo').innerHTML = a;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
아이디<input type="text" id="id" name="uid">
<input type="button" id="duplextChkid" value="검색"><br>
입력하신 아이디는 <span id="idinfo"></span> 입니다.
<script>
// 공통 응용 문제 ----------------------------------------------------------------------------------
// 2. var badword =['apple','banana'];
// 입력하는 내용(문장 포함)이 badword단어가 포함되어 있으면 금지어가 포함되었다고 표시, 사용 가능하면 입력된 글이 나오게 한다.
// 파일명 : t02.html
var badword =['apple','banana'];
document.getElementById('duplextChkid').onclick = () => {
var a = document.getElementById('id').value;
for(let i = 0; i < badword.length; i++){
if(a.indexOf(badword[i])!=-1){
alert('금지어가 포함되어 있습니다.');
}else{
document.getElementById('idinfo').innerHTML = a;
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
아이디<input type="text" id="id" name="uid">
<input type="button" id="duplextChkid" value="검색">
<span id="idinfo"></span>
<script>
// 공통 응용 문제 ----------------------------------------------------------------------------------
// 3. 텍스트에 글자를 입력하고 버튼을 누른다. 버튼은 텍스트가 입력이 되어 있지 않다면 입력하시오라고 알림창을 뜨운다.
// 입력이 되어 있다면 사용가능이라고 표시한다.
// 파일명 : t03.html
document.getElementById('duplextChkid').onclick = () => {
var a = document.getElementById('id').value;
if (a == '') {
alert('아이디를 입력하세요')
} else {
document.getElementById('idinfo').innerHTML = '사용가능';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="id" name="uid">
<input type="button" id="duplextChkid" value="검색">
<span id="idinfo"></span>
<script>
// 공통 응용 문제 ----------------------------------------------------------------------------------
// 4. 위 3번 문제에서 특수문자 1개 이상 문자 1개 이상을 체크한다...
// 위 조건에 맞으면 사용가능 맞지 않으면 사용 불가능이라고 표시한다. <기본 for 사용 가능, 정규화 공부해서 사용가능
// 현업은 정규화를 사용>
document.getElementById('duplextChkid').onclick = () => {
var a = document.getElementById('id').value;
const regExp = /^(?=.*[a-zA-z])(?=.*[$`~!@$!%*#^.?&\\(\\)\-_=+]).{2,16}$/;
if (regExp.test(a)) {
document.getElementById('idinfo').innerHTML = '사용가능';
} else {
document.getElementById('idinfo').innerHTML = '사용불가능';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#aaa {
color: red;
background-color: olive;
}
#searchword_list {
width: 200px;
background-color: aquamarine;
}
.delform {
display: inline;
}
</style>
<body>
<h1> 검색어 관리하기 </h1>
<input type="text" id="searchword"><input type="button" id="searchword_btn" value="검색">
<hr>
현재검색어 <h3 id="h3"> </h3>
<div id="searchword_list">
</div>
</body>
<script>
var list = new Array();
var listdiv = document.getElementById("searchword_list");
document.getElementById("searchword_btn").onclick = () => {
let word = document.getElementById("searchword").value;
list.push(word);
showList();
h3.innerText = word + "<span>text</span>";
};
showList = () => {
listdiv.innerHTML = ''
for (let i = 0; i < list.length; i++) {
console.log(list[i])
var p_insert = document.createElement('p');
p_insert.innerHTML = list[i] + "<form class='delform'>" +
"<input type='hidden' value=" + (i + 1) + " id='no'>" +
"<input type='button' onclick='delList(no.value)' value='delete'>" +
" </form>";
listdiv.appendChild(p_insert);
}
}
function delList(index) {
alert(index);
list.splice(index - 1, 1);
showList();
}
</script>
</html>
<!-- 심화문제 --------------------------------------------------------------------------------------------------------
위 코드는 검색어를 입력하면 입력된 내용이 아래에 출력되는 문서이다.
이 코드는 최근 검색어만 화면에 출력한다.
검색어 옆에는 delete가 버튼이 있으며 이 버튼을 클릭하면 검색어가 입력된 순번이 알림창으로 나온다.
* 위 소스의 자바스크립트 부분은 샘플입니다. 임의적으로 바꾸셔도 됩니다.
5.
배열을 활용하여 검색어를 배열에 저장되게 하시오.
createElement는 요소(태그)를 생성한다.
appendChild는 현재 태그의 자식태그로 요소를 삽입할 수 있다.
이 기능을 활용하여 입력된 검색어가 누적되어 나타나도록 수정하시오.
이때, 기존 검색어 뒤에 검색어를 추가하는 방법과 배열을 순회하면서 모든 검색어를 새로
출력하는 방법 2가지가 있다. 출력전용 메서드를 만들어서 2번째 방법으로 구현하세요.
6.
5번 소스에서 다음 기능을 추가합니다.
delete기능을 사용하여 해당 검색어가 화면에서 삭제 되도록 하세요. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#aaa {
color: red;
background-color: olive;
}
#searchword_list {
width: 200px;
background-color: aquamarine;
}
.delform {
display: inline;
}
</style>
<body>
<h1> 검색어 관리하기 </h1>
<input type="text" id="searchword"><input type="button" id="searchword_btn" value="검색">
<hr>
현재검색어 <h3 id="h3"> </h3>
<div id="searchword_list">
</div>
</body>
<script>
var list = new Array();
var listdiv = document.getElementById("searchword_list");
let fragment = document.createDocumentFragment();
document.getElementById("searchword_btn").onclick = () => {
let word = document.getElementById("searchword").value;
list.push(word);
showList();
h3.innerText = word + "<span>text</span>";
};
showList = () => {
listdiv.innerHTML = ''
for (let i = 0; i < list.length; i++) {
console.log(list[i])
var p_insert = document.createElement('p');
p_insert.innerHTML = list[i] + "<form class='delform'>" +
"<input type='hidden' value=" + (i+1) + " id='no'>" +
"<input type='button' onclick='delList(no.value)' value='delete'>" +
" </form>";
fragment.appendChild(p_insert);
}
listdiv.appendChild(fragment);
}
function delList(index) {
alert(index);
list.splice(index-1,1);
showList();
}
</script>
</html>
<!--
7. 5번에서 배열을 순회하면서 모든 검색어를 새로 출력하는 방법은 화면이 자주 바뀌어서 성능이 비효율적이다.
document의 태그를 조작하는 것은 성능이 떨어질 수 있어서. 여러 태그를 반복으로 하지 않고 가짜 Document를
하나 만들어서 한번에 태그를 조작하는 것이 성능에 이점이 있다.
가짜 document를 만드는 createDocumentFragment(); 메서드를 활용하여 이를 해결하시오. -->
공부하는 개발자