HTML DOM의 blockquote 객체는 HTML <blockquote> 요소를 JavaScript에서 다룰 수 있도록 해주는 객체입니다. <blockquote> 요소는 <q> 태그와 달리 텍스트에 따옴표를 자동으로 추가하지 않으며, 주로 긴 인용문이나 출처를 밝히는 인용 블록을 나타낼 때 사용됩니다.
blockquote 객체를 활용하면 <blockquote> 요소를 동적으로 생성하고, cite, id 등 다양한 속성에 접근하여 제어할 수 있습니다.
문법(Syntax)
blockquote 객체를 생성하는 기본 문법은 다음과 같습니다.
var x = document.createElement("BLOCKQUOTE");예제(Example)
버튼을 클릭하면 blockquote 객체를 동적으로 생성하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 blockquote 객체가 생성됩니다</p>
<button onclick="createBloc()">CREATE</button>
<script>
function createBloc() {
var x = document.createElement("BLOCKQUOTE");
var t = document.createTextNode("This is a random block quote.This is some sample text.");
x.setAttribute("cite", "https://www.examplesite.com");
x.setAttribute("id", "myQuote");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 CREATE 버튼이 화면에 표시됩니다. 버튼을 클릭하면 cite 속성과 고유한 id가 지정된 새로운 인용 블록이 페이지 하단에 동적으로 추가됩니다.
코드 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. 버튼 생성 및 이벤트 연결
먼저 클릭 시 createBloc() 함수를 호출하는 CREATE 버튼을 만듭니다.
<button onclick="createBloc()">CREATE</button>
2. 요소 및 텍스트 노드 생성
createBloc() 함수 내부에서는 document 객체의 createElement() 메서드를 사용해 <blockquote> 요소를 생성합니다. 이어서 createTextNode() 메서드로 인용문에 들어갈 텍스트 노드를 만듭니다.
3. 속성 설정
setAttribute() 메서드를 사용해 생성된 <blockquote> 요소에 인용 출처를 나타내는 cite 속성과, 요소를 식별할 id 속성을 추가합니다.
4. 문서에 추가
마지막으로 appendChild() 메서드를 통해 텍스트 노드를 blockquote 요소에 추가하고, 완성된 요소를 문서 본문(body)의 자식 노드로 삽입하여 화면에 표시합니다.
function createBloc() {
var x = document.createElement("BLOCKQUOTE");
var t = document.createTextNode("This is a random block quote.This is some sample text.");
x.setAttribute("cite", "https://www.examplesite.com");
x.setAttribute("id", "myQuote");
x.appendChild(t);
document.body.appendChild(x);
}이처럼 blockquote 객체를 사용하면 정적인 HTML 작성 없이도 JavaScript만으로 인용 블록을 유연하게 생성하고 관리할 수 있습니다.