<textarea class="frm_input frm_ex_textarea" rows="10" placeholder="내용을 입력하세요" style="width:100%; height:300px; margin: 2px 0;">
textarea 현재커서에 내용 삽입
</textarea>
<button type="button" class="btn" onclick="cursorPosInsert('.frm_ex_textarea', 'cginjs');" style="width:100%;">내용 삽입</button>

function backspaceAtCursor(obj) {

var $input = $(obj);

var start = $input[0].selectionStart;

var end = $input[0].selectionEnd;

// 텍스트가 선택되어 있다면 선택된 텍스트 삭제, 아니면 하나 앞 문자 삭제

if (start === end && start > 0) {

$input.val( $input.val().slice(0, start - 1) + $input.val().slice(end) );

$input.selectionStart = $input[0].selectionEnd = start - 1;

} else {

$input.val( $input.val().slice(0, start) + $input.val().slice(end) );

$input.selectionStart = $input[0].selectionEnd = start;

}

$input.focus();

}

&lt;/script&gt;</pre><pre class="prettyprint lang-html linenums notranslate pre-word-wrap pretty-total-2" data-li_to="2" data-wrap="pre-word-wrap" data-lang="html">&lt;input type="text" id="ex_text" class="frm_input" value="커서 위치에서 삭제" style="width:80%;" /&gt;

&lt;button type="button" class="btn" onclick="backspaceAtCursor('#ex_text');"&gt;backspace&lt;/button&gt;</pre>

<script>
$(function(e){
	$(document).on('keydown', 'textarea.frm_ex_textarea', function(e) {
		if (e.keyCode === 9) { // Tab 키 코드
			e.preventDefault(); // 기본 탭 동작(포커스 이동) 방지
			var $domTextArea = $(this)[0];
			var start = $domTextArea.selectionStart, end = $domTextArea.selectionEnd;
			var value = $domTextArea.value;
			var selectedText = value.substring(start, end);// 선택된 텍스트
			var tab = "    "; // 4개 공백 또는 '\t' 문자

			// 블록 지정된 경우, 각 라인마다 탭 추가 (선택 사항)
			if (selectedText.includes('\n')) {
				var lines = selectedText.split('\n');
				var indentedText = lines.map(function(line) {
					return tab + line;
				}).join('\n');
				$domTextArea.setRangeText(indentedText, start, end, 'select');
			} else {
				// 단일 라인 또는 공백 1개 삽입
				$domTextArea.setRangeText(tab, start, end, 'end');
			}
		}
	});
});
</script>

<style>
.content_box{position: relative; padding:5px;}
.content_box textarea{width:100%; height:200px;}
.content_box .btn_ex_fullscreen_cancel{display: none; width:100%; margin:5px; background:#ff0080; color:#fff;}
.btn_ex_fullscreen{display: inline-block; width:100%; margin:5px; }

.content_box.fullscreen {position: fixed; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background:#090300; !important; z-index: 9999 !important;}
.content_box.fullscreen textarea{height:90%;}
.content_box.fullscreen .btn_ex_fullscreen_cancel{display: inline-block;}

/* 전체 화면 적용시 기본 레이아웃 css 컨트롤 아래는 자신에 맞게 알맞게 설정 */
body.fullscreen{} 
body.fullscreen #hd, 
body.fullscreen #hd_wrapper {display: none;}
</style>

<div class="content_box">
	<textarea class="frm_input frm_textarea"></textarea>
	<button type="button" class="btn btn_ex_fullscreen_cancel">FullScreen 취소</button>
</div>
<button type="button" class="btn btn_ex_fullscreen">FullScreen</button>

<script>
$(function(e) {
	$(document).on('click', '.btn_ex_fullscreen', function(e){ 
		$('.content_box').addClass('fullscreen');
		$('body').addClass('fullscreen');
		$('html, body').css('overflow', 'hidden');
	});

	$(document).on('click', '.content_box.fullscreen .btn_ex_fullscreen_cancel', function(e){ 
		$('.content_box').removeClass('fullscreen');
		$('body').removeClass('fullscreen');
		$('html, body').css('overflow', '');
	});
});
</script>

// 기본 설정 (툴바 추가)
$('#summernote').summernote({
  toolbar: [
    ['view', ['fullscreen', 'codeview', 'help']] // 툴바에 fullscreen 추가
  ]
});

// 자동 전체 화면 (초기화 시) : 페이지 로딩 시 바로 전체 화면으로 시작하려면 callback을 사용
$('#summernote').summernote({
  callbacks: {
    onInit: function() {
      $(this).summernote('fullscreen.toggle');
    }
  }
});

// 전체 화면 적용시 기본 레이아웃 css 컨트롤을 위함
$(document).on('click', '.note-editor .note-toolbar .note-btn-group button.btn-fullscreen', function(e){ 
	var isFullscreen = $('#summernote').summernote('fullscreen.isFullscreen'); /* 전체화면 상태 체크 */
	//console.log('Is Fullscreen:', isFullscreen);
	
	if(isFullscreen == true) { // 전체화면 true 일때
		if( $('body').hasClass('summernote-fullscreen') === true ) {
			/* class 존재 */
		} else {
			$('body').addClass('summernote-fullscreen'); 
		}
	}
	if(isFullscreen == false) { // 전체화면 false 일때
		if( $('body').hasClass('summernote-fullscreen') === true ) {
			$('body').removeClass('summernote-fullscreen'); 
		} else {
			/* class X */
		}
	}
});

.note-editor.note-frame.fullscreen {z-index: 9999 !important; background-color: white !important; height: 100vh !important;}
.note-editor.note-frame.fullscreen .note-toolbar{}
.note-editor.note-frame.fullscreen .note-toolbar .note-btn-group{}
.note-editor.note-frame.fullscreen .note-toolbar .note-btn-group button.btn-fullscreen{}
.note-editor.note-frame.fullscreen .note-editable { overflow-y: scroll !important; }

/* 전체 화면 적용시 기본 레이아웃 css 컨트롤 아래는 자신에 맞게 알맞게 설정 */
body.summernote-fullscreen{} 
body.summernote-fullscreen #hd, 
body.summernote-fullscreen #hd_wrapper {display: none;}

// codeview 코드 보기 객체를 대상으로
$('.note-editor.note-frame .note-toolbar .note-btn-group.note-codeview button.note-btn.btn-codeview').hover(function(e){
	var $note_editor = $(this).closest('.note-editor.note-frame');
	if( $note_editor.hasClass('codeview') === true ) {
		var $note_tooltip = $note_editor.find('.note-tooltip.bottom.in');
		var $note_tooltip_content = $note_tooltip.find('.note-tooltip-content');
		$note_tooltip_content.html('코드 숨기기');
	} else {

	}
}, function(e) {

});

// 현재 브라우저의 로케일 가져오기

var userLocale = navigator.language || navigator.userLanguage;
console.log(userLocale); // 예: 'ko-KR'

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/theme/monokai.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/htmlmixed/htmlmixed.min.js"></script>

$('#summernote').summernote({
	codemirror: {
		mode: 'text/html',
		htmlMode: true,
		lineNumbers: true,
		heme: 'monokai'
	}
});

summernote 에디터에서 CodeMirror 사용시 전체선텍, 초기화, , 데이타삽입, 복사

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	cm.focus();
	cm.execCommand('selectAll'); // CodeMirror 전체 콘텐츠를 선택
}

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	cm.setValue('');// CodeMirror 데이터 초기화
}

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	cm.setValue('CodeMirror에 데이터 삽입');// CodeMirror에 데이터 삽입
}

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	var copyArea = $.trim( cm.getValue() ); // CodeMirror에 데이터확인
	navigator.clipboard.writeText(copyArea)
		.then(resultText => { 
			alert('데이터가 복사되었습니다.'); // Clipboard
			console.log('I copied the CodeMirror editor value tag. [Clipboard API] ');
		})
		.catch(err => { 
			console.log('Something went wrong', err); 
	}); 
}

querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환한다.

일치하는 요소가 없으면 null을 반환한다.

지정한 선택자와 일치하는 모든 요소의 목록이 필요한 경우 querySelectorAll() 함수를 사용해야 한다.

기본적인 선택자

document.querySelector("#btn_prev"); 기본적인 선택자
document.querySelector(".btn_prev"); // class
document.querySelectorAll("button"); // 태그
document.querySelectorAll("[name]"); // name 속성이 있는 요소 모두
document.querySelectorAll("[value='1']") // value 속성이 1 인 요소 모두
document.querySelectorAll("#btn_prev, button")// ID가 'btn_prev' 인 요소와 Button 태그들을 선택
document.querySelectorAll("button#btn_prev");// button 태그이면서 아이디가 'btnPrev' 인 요소를 선택
document.querySelectorAll('input[type="checkbox"]');
document.querySelector("input[name=subject]")
document.querySelector("[name=stx]");
document.querySelector("meta[name='token']");

계층 선택자

document.querySelectorAll("div > input");// div 바로 밑에 있는 input 태그를 선택(바로 밑에 있는 자식들만)
document.querySelectorAll("div input");// div 태그 밑에 있는 input 태그를 선택

^ , $, *, ! 선택자

document.querySelectorAll("[value*='a']"); // * 어느곳에라도 있는지 : 'value'라는 속성의 값에 'a'라는 문자가 포함된 요소 선택
document.querySelector("[value^='a']");// ^ 시작 : 'value'라는 속성의 값이 'a'로 시작하는 요소 선택
document.querySelectorAll("[value$='e']"); // $ 끝 : 'value'라는 속성의 값이 'e'으로 끝나는 요소 선택
document.querySelectorAll("[value!='1']"); // ! 아닌 것 : 'value'라는 속성의 값이 '1'이 아닌 요소 선택

필터 선택자

document.querySelectorAll("div:even"); // 짝수번째 div태그만 선택
document.querySelectorAll("div:odd"); // 홀수번째 div태그만 선택
document.querySelectorAll("li:nth-child(2)"); // li 태그의 형제들중 2번째 요소만 요소만 선택
document.querySelectorAll("li:first");// 첫번째 li태그 요소만 선택
document.querySelectorAll("li:last");// 마지막 li태그 요소만 선택
document.querySelector("li:eq(2)"); // 3번째 li태그 선택
document.querySelectorAll("li:gt(2)"); // 3번째이후 li태그 선택
document.querySelectorAll("li:lt(2)"); // 3번째이전 li태그 선택

- selected, checked, disabled, enabled, focus : 요소 상태에 따른 필터

document.querySelectorAll("option:selected");// selected된 option만 선택
document.querySelectorAll("input[type='checkbox']:checked"); // checked된 checkbox만 선택
document.querySelectorAll("input:disabled"); // disabled된 input태그만 선택
document.querySelectorAll("input:enabled"); // enabled된 input태그만 선택
document.querySelectorAll("input:focus"); // focus된 input태그만 선택

- not(원치 않는 선택자) : 원치않는 선택자를 필터

document.querySelectorAll("input:not(:disabled)"); // input태그중 disabled되지 않은 요소만 선택
document.querySelectorAll("input:not(.frm_disabled)"); // input태그중 class .frm_disabled 되지 않은 요소만 선택

- has(포함된 선택자) : 포함된 선택자를 포함하고 있는 선택자를 필터

document.querySelectorAll("div:has(h1)"); // h1태그를 포함한 div태그만 선택

- contains(문자열) : 문자열을 포함한 선택자를 필터

document.querySelectorAll("p:contains('test')"); // 'test' 라는 텍스트를 포함한 p 태그를 선택

- hidden, visible : 숨겨진, 보이는 요소만 필터

document.querySelectorAll("div:hidden"); // 숨겨진 div태그를 선택
document.querySelectorAll("div:visible"); // 보이는 div태그를 선택

<div class="content-wrapper">
	<textarea class="frm_input frm_textarea">
.content-wrapper{width:900px; margin:3px auto; padding:5px; border: 1px solid #ccc; overflow-x:auto; white-space:nowrap;}
.content-wrapper::-webkit-scrollbar { width: 20px; }
.content-wrapper::-webkit-scrollbar-track { background-color: gray; }
.content-wrapper::-webkit-scrollbar-thumb { background-color: skyblue; }
.content-wrapper::-webkit-scrollbar-button { display: none; }

.content-wrapper textarea{ width:1900px;height:300px;}
.btn_scroll_box{width: 300px; margin:3px auto; padding:5px;}
	</textarea>
</div>
<div class="btn_scroll_box">
	<button type="button" class="btn btn_scroll_first">처음</button>
	<button type="button" class="btn btn_scroll_left">왼쪽</button>
	<button type="button" class="btn btn_scroll_right">오른쪽</button>
	<button type="button" class="btn btn_scroll_last">마지막</button>
</div>

<script>
$(function(e){
	// 처음 버튼 클릭 시
	$('.btn_scroll_first').click(function() {
		$('.content-wrapper').animate({scrollLeft: 0}, 500);
	});
	 
	// 왼쪽 버튼 클릭 시
	$('.btn_scroll_left').click(function() {
		$('.content-wrapper').animate({scrollLeft: '-=100'}, 500); // 왼쪽으로 500px 이동
	});
	 
	// 오른쪽 버튼 클릭 시
	$('.btn_scroll_right').click(function() {
		$('.content-wrapper').animate({scrollLeft: '+=100'}, 500); // 오른쪽으로 500px 이동
	});
	 
	// 마지막 버튼 클릭 시
	$('.btn_scroll_last').click(function() {
		var scrollLeft_last = $('.content-wrapper textarea').width();
		$('.content-wrapper').animate({scrollLeft: scrollLeft_last}, 500);
	});
});
</script>

$(document).on('keyup', '#frm_input', function(e) {
	console.log($(this).val());
});

document.getElementById('frm_input').addEventListener('input', function(e) {
	console.log(e.target.value);
});

$('#id', parent.document);

iframe에서 부모창의 다른 frame 접근

$("#id",  parent.frames['frameId'].document);

자식 함수 호출

document.getElementById('아이프레임아이디').contentWindow.함수명;
$('#아이프레임아이디').contentWindow.함수명;

자식 요소 접근

$('#아이프레임아이디').contents().find('셀렉터')
window.frames['아이프레임아이디'].document.getElementById('요소아이디');