Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

Javascript로 문서 수정하기(DOM Script) 간단 예제

다음 내용은 O`relly 시리즈 중 하나인 《자바스크립트 완벽 가이드》(인사이트)의 한국어판 435페이지를 변용하여 옮긴 것이다. 너무나 알고 싶었던 기능이라서 한참 동안 읽다가 바로 메모하기로 결정! 소스를 보면 다 알 것이므로 설명은 생략한다. 다만, 저 책은 자바스크립트를 공부하고 싶은 사람들에겐 무조건 강추다. 끝. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>textNode Test</title> <meta […]

다음 내용은 O`relly 시리즈 중 하나인 《자바스크립트 완벽 가이드》(인사이트)의 한국어판 435페이지를 변용하여 옮긴 것이다. 너무나 알고 싶었던 기능이라서 한참 동안 읽다가 바로 메모하기로 결정!

소스를 보면 다 알 것이므로 설명은 생략한다. 다만, 저 책은 자바스크립트를 공부하고 싶은 사람들에겐 무조건 강추다. 끝.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>textNode Test</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="author" content="ahw" />
  <meta name="keywords" content="textNode" />
  <meta name="description" content="textNode control example." />
  <script type="text/javascript">
  //이 함수는 Node n을 전달인자로 받고, 이 노드를 HTML <strong> 태그를 표현하는 Element 노드로 교체한 후 기존 노드를 새로 만든 <strong> 엘리먼트의 자식으로 만든다.
  function emStrongly(n){
	if (typeof n == "string") n = document.getElementById(n); //노드를 조사한다.
	var s = document.createElement("strong"); //새로운 <strong> 엘리먼트를 생성.
	var parent = n.parentNode; //주어진 노드의 부모를 얻는다.
	parent.replaceChild(s, n); //주어진 노드를 <strong> 태그로 교체한다.
	s.appendChild(n);
  }
  </script>
 </head>

 <body>
  <!-- 두 개의 샘플 문단 -->
  <p id="p1">이것은 <i>문단</i> 1입니다.</p>
  <p id="p2">이것은 <i>문단</i> 2입니다.</p>
  <!-- emStrongly() 함수를 p1이라는 엘리먼트에 대해 호출하는 버튼 -->
  <button onclick="emStrongly2('p1');">EmStrongly</button>
 </body>
</html>

 

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다