본문 바로가기
개발 공부/Javascript

웹브라우저 Javascript - Element, Node, Document, Text 객체

maxlafe 2020. 9. 25. 02:39

웹브라우저 Javascript (자바스크립트)

 

4. Element 객체

 

4.1 Element 객체

.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>html</li>
		<li>css</li>
		<li id="active" class="important current">JavaScript</li>
	</ul>
</body>
</html>

 

t는 HTMLLIElement이다.

모든 HTML 태그들을 대표하는, 공통으로 속성으로 갖고 있는 객체는 HTMLElement이다.

(ex, HTMLElement.style은 css 속성을 관리함)

HTMLElement는 Element를 상속받는다. Element는 엘리먼트를 추상화한 객체이다.

DOM은 HTML만을 제어하기 위한 모델이 아니다. XML, SVG 등의 마크업 형태의 언어를 제어하기 위한 규격이므로,

Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있다.

구체적인 각각의 언어는 HTMLElement, SVGElement 같은 객체를 통해 추가 이용되고 있다.

 

 

식별자

문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API

  • lement.classList
  • Element.className
  • Element.id
  • Element.tagName

조회

엘리먼트의 하위 엘리먼트를 조회하는 API

    • Element.getElementsByClassName
    • Element.getElementsByTagName
    • Element.querySelector
    • Element.querySelectorAll
      • 속성

엘리먼트의 속성을 알아내고 변경하는 API

    • Element.getAttribute(name)
    • Element.setAttribute(name, value)
    • Element.hasAttribute(name);
    • Element.removeAttribute(name);

 

 

4.2 식별자 API

 

엘리먼트를 조회하기 위한 식별자가 필요하다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>html</li>
		<li>css</li>
		<li id="active" class="important current">JavaScript</li>
	</ul>
	<script>
		console.log(document.getElementById('active').tagName)
	</script>
</body>
</html>

 

tagName 프로퍼티는 읽기 전용

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>html</li>
		<li>css</li>
		<li id="active" class="important current">JavaScript</li>
	</ul>
	<script>
		var active = document.getElementById('active');
		console.log(active.id);
		active.id='deactive';
		console.log(active.id);
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>html</li>
		<li>css</li>
		<li id="active" class="important current">JavaScript</li>
	</ul>
	<script>
		var active = document.getElementById('active');
		active.className = "important current";
		console.log(active.className);
		active.className+= " readed";
		console.log(active.className);
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
	    <li>html</li>
	    <li>css</li>
	    <li id="active" class="important current">JavaScript</li>
	</ul>
	<script>
	function loop(){
	    for(var i=0; i<active.classList.length; i++){
	        console.log(i, active.classList[i]);
	    }
	}
	// 클래스를 추가
	</script>
	<input type="button" value="DOMTokenList" onclick="console.log(active.classList);" />
	<input type="button" value="조회" onclick="loop();" />
	<input type="button" value="추가" onclick="active.classList.add('marked');" />
	<input type="button" value="제거" onclick="active.classList.remove('important');" />
	<input type="button" value="토글" onclick="active.classList.toggle('current');" />
</body>
</html>

toggle은 class를 넣었다 뺐다 할 수 있음.

 

 

4.3 조회 API

조회 API는 엘리먼트를 조회하는 기능이다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
		<li class="marked">html</li>
		<li>css</li>
		<li id="active">JavaScript
			<ul>
				<li>JavaScript Core</li>
				<li class="marked">DOM</li>
				<li class="marked">BOM</li>
			</ul>
		</li>
	</ul>
	<script>
		var list = document.getElementsByClassName('marked');
		console.group('document');
		for(var i=0; i<list.length; i++) {
			console.log(list[i].textContent);
		}
		console.groupEnd();

		console.group('active');
		var active = document.getElementById('active');
		var list=active.getElementsByClassName('marked');
		for(var i=0; i<list.length; i++) {
			console.log(list[i].textContent);
		}
		console.groupEnd;
	</script>
</body>
</html>

그냥 getElementsByClassName을 하면 모든 class가 검색되지만

getElementById 후에 ClassName을 하면 해당 id 하위에 있는 class만 검색된다.

 

 

4.4 속성 API

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<a id="target" href="http://opentutorials.org">opentutorials</a>
<script>
var t = document.getElementById('target');
console.log(t.getAttribute('href')); //http://opentutorials.org
t.setAttribute('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
console.log(t.hasAttribute('title')); // true, title 속성의 존재여부를 확인한다.
t.removeAttribute('title'); // title 속성을 제거한다.
console.log(t.hasAttribute('title')); // false, title 속성의 존재여부를 확인한다.
</script>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<p id="target">
		Hello World
	</p>
	<script>
		var target = document.getElementById('target');
		//attribute 방식
		target.setAttribute('class', 'important');
		//property 방식
		target.className= 'important';

		//property 방식이 더 빠르지만 attribute 방식과 이름이 조금 다르다.
	</script>
</body>
</html>

 

 

4.5 jQuery 속성 제어 API

jQuery객체 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<a id="target" href="http://opentutorials.org">opentutorials</a>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
		var t = $('#target');
		console.log(t.attr('href')); //http://opentutorials.org
		t.attr('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
		t.removeAttr('title'); // title 속성을 제거한다.
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<a href="./demo.html" id="t1">opentutorials</a>
	<input type="checkbox" id="t2" checked="checked" />
	<script>
		//현재 문서 URL이  http://localhost/jQuery_attribute_api/demo2.html일 때
		var t1 = $('#t1');
		console.log(t1.attr('href')); // ./demo.html
		console.log(t1.prop('href')); // http://localhost/jQuery_attribute_api/demo2.html

		var t2 = $('#t2');
		console.log(t2.attr('checked'));
		console.log(t2.prop('checked'));
	</script>
</body>
</html>

$('#t1').prop('className', 'important');
$('#t2').prop('class', 'important');
//둘 다 같은 효과

 

4.6 jQuery 조회 범위 제한

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<ul>
	    <li class="marked">html</li>
	    <li>css</li>
	    <li id="active">JavaScript
	        <ul>
	            <li>JavaScript Core</li>
	            <li class="marked">DOM</li>
	            <li class="marked">BOM</li>
	        </ul>
	    </li>
	</ul>
	<script>
	    $( ".marked", "#active").css( "background-color", "red" );
	</script>
</body>
</html>

$("#active .marked").css("background-color", "red");
//이것도 위와 같은 효과

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<ul>
	    <li class="marked">html</li>
	    <li>css</li>
	    <li id="active">JavaScript
	        <ul>
	            <li>JavaScript Core</li>
	            <li class="marked">DOM</li>
	            <li class="marked">BOM</li>
	        </ul>
	    </li>
	</ul>
	<script>
	    $('#active').find('.marked').css('background-color', 'red');
	</script>
</body>
</html>

객체 내에서 엘리먼트를 조회한다.

 

$('#active').css('color', 'blue').find('.marked').css('background-color', 'red');
//이렇게도 쓸 수 있다

 

5 Node 객체

 

5-1. Node 객체

Node는 DOM에서 시조와 같은 역할이다.

 

관계

엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.

    • Node.childNodes
    • Node.firstChild
    • Node.lastChild
    • Node.nextSibling
    • Node.previousSibling
    • Node.contains()
    • Node.hasChildNodes()

 

노드의 종류

Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다.

      • Node.nodeType
      • Node.nodeName

 

값

Node 객체의 값을 제공하는 API

      • Node.nodeValue
      • Node.textContent

 

자식관리

Node 객체의 자식을 추가하는 방법에 대한 API

      • Node.appendChild()
      • Node.removeChild()

 

 

5-2. Node 관계 API

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body id="start">
	<ul>
	    <li><a href="./532">html</a></li> 
	    <li><a href="./533">css</a></li>
	    <li><a href="./534">JavaScript</a>
	        <ul>
	            <li><a href="./535">JavaScript Core</a></li>
	            <li><a href="./536">DOM</a></li>
	            <li><a href="./537">BOM</a></li>
	        </ul>
	    </li>
	</ul>
	<script>
	var s = document.getElementById('start');
	console.log(1, s.firstChild); // #text
	var ul = s.firstChild.nextSibling
	console.log(2, ul); // ul
	console.log(3, ul.nextSibling); // #text
	console.log(4, ul.nextSibling.nextSibling); // script
	console.log(5, ul.childNodes); //text, li, text, li, text, li, text
	console.log(6, ul.childNodes[1]); // li(html)
	console.log(7, ul.parentNode); // body
	</script>
</body>
</html>

태그 사이의 줄바꿈이나 공백 문자도 text로 Node로 인식된다.

 

 

5-3. 노드 종류 API

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
	for(var name in Node){
   		console.log(name, Node[name]);
	}
	</script>
</body>
</html>

노드 종류에 따라 정해진 상수가 존재한다.

  • Node.nodeType
    node의 타입을 의미한다. 
  • Node.nodeName
    node의 이름 (태그명을 의미한다.)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body id="start">
	<ul>
	    <li><a href="./532">html</a></li> 
	    <li><a href="./533">css</a></li>
	    <li><a href="./534">JavaScript</a>
	        <ul>
	            <li><a href="./535">JavaScript Core</a></li>
	            <li><a href="./536">DOM</a></li>
	            <li><a href="./537">BOM</a></li>
	        </ul>
	    </li>
	</ul>
	<script>
		function traverse(target, callback) {
			if(target.nodeType ===1 ) {
				callback(target);
				var c = target.childNodes;
				for(var i=0; i<c.length; i++) {
					traverse(c[i], callback);
				}
			}
		}
		traverse(document.getElementById('start'), function(elem){
   			 console.log(elem);
		});
	</script>
</body>
</html>

 

5-4. 노드 변경 API

노드의 추가와 관련된 API들은 아래와 같다.

노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul id="target">
		<li>HTML</li>
		<li>CSS</li>
	</ul>
	<input type="button" onclick="callAppendChild();" value="appendChild()"/>
	<input type="button" onclick="callInsertBefore();" value="callInsertBefore()"/>

	<script>
		function callAppendChild() {
			var target = document.getElementById('target');
			var li = document.createElement('li');
			var text = document.createTextNode('JavaScript');
			li.appendChild(text);
			target.appendChild(li); //맨 끝에 추가한다.
		}
		function callInsertBefore() {
			var target = document.getElementById('target');
			var li = document.createElement('li');
			var text = document.createTextNode('jQuery');
			li.appendChild(text);
			target.insertBefore(li, target.firstChild);
		}
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li id="target">JavaScript</li>
	</ul>
	<input type="button" onclick="callRemoveChild();" value="appendChild()"/>

	<script>
		function callRemoveChild() {
			var target = document.getElementById('target');
			target.parentNode.removeChild(target);
		}
		
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li id="target">JavaScript</li>
	</ul>
	<input type="button" onclick="callReplaceChild();" value="replaceChild()"/>

	<script>
		function callReplaceChild() {
			var a = document.createElement('a');
			a.setAttribute("href", "http://naver.com");
			a.appendChild(document.createTextNode("Web Browser"));
			var target = document.getElementById('target');
			target.replaceChild(a, target.firstChild);
		}
		
	</script>
</body>
</html>

 

 

 

5-5. jQuery 노드 변경 API

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="target">
		content1
	</div>

	<div class="target">
		content2
	</div>
	<script>
		$('.target').before('<div>before</div');
		$('.target').after('<div>after</div');
		$('.target').prepend('<div>prepend</div');
		$('.target').append('<div>append</div');
	</script>
</body>
</html>

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="target" id="target1">
		content1
	</div>

	<div class="target" id="target2">
		content2
	</div>
	<input type="button" value="remove target 1" id="btn1" />
	<input type="button" value="remove target 2" id="btn2" />
	<script>
		$('#btn1').click(function() {
			$('#target1').remove();
		})	
		$('#btn2').click(function() {
			$('#target2').empty();
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="target" id="target1">
		content1
	</div>

	<div class="target" id="target2">
		content2
	</div>
	<input type="button" value="replaceAll target 1" id="btn1" />
	<input type="button" value="replaceWith target 2" id="btn2" />
	<script>
		$('#btn1').click(function() {
			$('<div>replaceAll</div>').replaceAll('#target1');
		})
		$('#btn2').click(function() {
			$('#target2').replaceWith('<div>replaceWith</div');
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="target" id="target1">
		target 1
	</div>

	<div class="target" id="target2">
		target 2
	</div>

	<div id="source">source</div>
	<input type="button" value="clone replaceAll target 1" id="btn1" />
	<input type="button" value="clone replaceWith target 2" id="btn2" />
	<script>
		$('#btn1').click(function() {
			$('#source').clone().replaceAll('#target1');
		})
		$('#btn2').click(function() {
			$('#target2').replaceWith($('#source').clone());
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="target" id="target1">
		target 1
	</div>

	<div id="source">source</div>
	<input type="button" value="append source to target 1" id="btn1" />
	<script>
		$('#btn1').click(function(){
       		 $('#target1').append($('#source'));
    	})
	</script>
</body>
</html>

 

 

5-6. 문자열로 노드 제어

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<ul id="target">
	    <li>HTML</li>
	    <li>CSS</li>
	</ul>
	<input type="button" onclick="get();" value="get" />
	<input type="button" onclick="set();" value="set" />
	<script>
		function get() {
			var target = document.getElementById('target');
			alert(target.innerHTML);
		}
		function set() {
			var target = document.getElementById('target');
			target.innerHTML =  "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
		}
	</script>
</body>
</html>

 

 

<ul id="target">
    <li>HTML</li>
    <li>CSS</li>
</ul>
<input type="button" onclick="get();" value="get" />
<input type="button" onclick="set();" value="set" />
<script>
    function get(){
        var target = document.getElementById('target');
        alert(target.outerHTML);
    }
    function set(){
        var target = document.getElementById('target');
        target.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>";
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul id="target">
	    <li>HTML</li>
	    <li>CSS</li>
	</ul>
	<input type="button" onclick="get();" value="get" />
	<input type="button" onclick="set();" value="set" />
	<script>
	    function get(){
	        var target = document.getElementById('target');
	        alert(target.innerText);
	    }
	    function set(){
	        var target = document.getElementById('target');
	        target.innerText = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
	    }
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul id="target">
	    <li>CSS</li>
	</ul>
	<input type="button" onclick="beforebegin();" value="beforebegin" />
	<input type="button" onclick="afterbegin();" value="afterbegin" />
	<input type="button" onclick="beforeend();" value="beforeend" />
	<input type="button" onclick="afterend();" value="afterend" />
	<script>
	    function beforebegin(){
	        var target = document.getElementById('target');
	        target.insertAdjacentHTML('beforebegin','<h1>Client Side</h1>');
	    }
	    function afterbegin(){
	        var target = document.getElementById('target');
	        target.insertAdjacentHTML('afterbegin','<li>HTML</li>');
	    }
	    function beforeend(){
	        var target = document.getElementById('target');
	        target.insertAdjacentHTML('beforeend','<li>JavaScript</li>');
	    }
	    function afterend(){
	        var target = document.getElementById('target');
	        target.insertAdjacentHTML('afterend','<h1>Server Side</h1>');
	    }
</script>
</body>
</html>

 

6. Document 객체

6-1. Document 객체

DOM의 시작점이자 HTML 전체를 대표하는 코드

노드 생성 API

document  객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.

  • createElement()

  • createTextNode()

문서 정보 API

  • title

  • URL

  • referrer

  • lastModified

 

7. Text 객체

7-1. Text 객체

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p id="target1"><span>Hello world</span></p>
	<p id="target2">
	    <span>Hello world</span>
	</p>
	<script>
	var t1 = document.getElementById('target1').firstChild;
	var t2 = document.getElementById('target2').firstChild;
	 
	console.log(t1.firstChild.nodeValue);
	try{
	    console.log(t2.firstChild.nodeValue);   
	} catch(e){
	    console.log(e);
	}
	console.log(t2.nextSibling.firstChild.nodeValue);
	 
</script>
</body>
</html>

 

7-2. 값 API

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul>
	    <li id="target">html</li> 
	    <li>css</li>
	    <li>JavaScript</li>
	</ul>
	<script>
	    var t = document.getElementById('target').firstChild;
	    console.log(t.nodeValue);
	    console.log(t.data);
</script>
</body>
</html>

 

 

7-3. 조작 API

 

 

<!DOCTYPE html>
<html>
<head>
    <style>
    #target{
        font-size:77px;
        font-family: georgia;
        border-bottom:1px solid black;
        padding-bottom:10px;
    }
    p{
        margin:5px;
    }
    </style>
</head>
<body>
<p id="target">Cording everybody!</p>
<p> data : <input type="text" id="datasource" value="JavaScript" /></p>
<p>   start :<input type="text" id="start" value="5" /></p>
<p> end : <input type="text" id="end" value="5" /></p>
<p><input type="button" value="appendData(data)" onclick="callAppendData()" />
<input type="button" value="deleteData(start,end)" onclick="callDeleteData()" />
<input type="button" value="insertData(start,data)" onclick="callInsertData()" />
<input type="button" value="replaceData(start,end,data)" onclick="callReplaceData()" />
<input type="button" value="substringData(start,end)" onclick="callSubstringData()" /></p>
<script>
    var target = document.getElementById('target').firstChild;
    var data = document.getElementById('datasource');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    function callAppendData(){
        target.appendData(data.value);
    }
    function callDeleteData(){
        target.deleteData(start.value, end.value);
    }
    function callInsertData(){
        target.insertData(start.value, data.value); 
    }
    function callReplaceData(){
        target.replaceData(start.value, end.value, data.value);
    }
    function callSubstringData(){
        alert(target.substringData(start.value, end.value));
    }
</script>
</body>
</html>

'개발 공부 > Javascript' 카테고리의 다른 글

웹브라우저 Javascript - 이벤트, 네트워크 통신, 활용  (0) 2021.01.05
웹브라우저 Javascript - 1.OT, 2. BOM, 3.DOM  (0) 2020.09.24
자바스크립트 언어 기본 - 객체지향  (0) 2020.09.08
자바스크립트 언어 기본 - 함수지향  (0) 2020.09.08
자바스크립트 언어 기본 - 함수, 배열, 객체, 모듈  (0) 2020.09.08

'개발 공부/Javascript' Related Articles

티스토리툴바