DOM은 무엇입니까? DOM은 브라우저 프로그래밍을 기반으로 한 API 인터페이스 세트입니다 (이 자습서에서는 DHTML 프로그래밍이라고 할 수 있음). W3C는 각 브라우저에 약간의 차이가 있습니다. 그 중에서 Mozilla의 브라우저는 표준과 가장 유사합니다. 간단한 자바 스크립트는 DHTML 프로그래밍을 수행하기 위해 DOM을 결합해야하며 아름다운 효과를 생성하고 웹에 적용 할 수 있습니다. C/C ++가 라이브러리 지원을 요구하는 것처럼 다른 언어와 거의 동일합니다. 그렇지 않으면 단순히 문법 연구입니다. 우리가 가장 염려하는 것은 DOM이 웹 페이지를 스크립트 및 기타 프로그래밍 언어와 연결한다는 것입니다. DOM은 JavaScript 언어 사양에 지정된 핵심 컨텐츠가 아니라 브라우저에 속합니다.
요소를 찾으십시오
1. 직접 검색하십시오
| 메소드 이름 | 설명하다 |
| getElementByid (id) (문서) | 지정된 고유 ID 속성 값으로 문서에서 요소를 가져옵니다. |
| getElementsByTagName_r (이름) | 현재 요소에 지정된 태그 이름이있는 자식 요소 배열을 반환합니다. |
| document.getElementsByClassName입니다 | 속성에 따라 태그 수집을 받으십시오 |
| getAttribute (이름) | 요소의 속성 값을 반환하고 속성은 이름으로 지정됩니다. |
1> document.getElementById ( 'id')
<body> <div id = "zhang"> 잘 생기지 않음 </div> <script type = "text/javaScript"> var i = document.getElementById ( 'Zhang'); // 지정된 ID I.InnerText = '매우 잘 생긴'; // InnerText 지정된 문자열을 수정하십시오 </script> </body>
디스플레이 효과, IE를 열면 매우 잘 생겼다.
2> getElementsByTagName_r (이름)
<body> <div name = "zhang"> 잘 생기지 않음 </div> <script type = "text/javaScript"> var i = document.getElementByTagnmae ( 'Zhang'); // 지정된 이름 이름 I.innerText = '매우 잘 생긴'; // InnerText 지정된 문자열을 수정하십시오 </script> </body>
동일한 디스플레이 효과
3> document.getElementsByClassName
<body> <div> 잘 생기지 않음 </div> <script type = "text/javaScript"> var i = document.getElementClassName ( 'Zhang'); // 지정된 클래스 이름 I.innerText = '매우 잘 생긴'; // InnerText 지정된 문자열을 수정하십시오 </script> </body>
2. 간접 검색
| 속성 이름 | 설명하다 |
| 어린이 | 현재 요소의 모든 자식 요소 배열을 반환합니다. |
| 어린이 | 현재 요소의 모든 자식 요소를 반환합니다 |
| 자녀 | 현재 요소의 첫 번째 하위 요소를 반환합니다. |
| 마지막 차일 | 현재 요소의 마지막 자식 요소를 반환합니다 |
| Nextibling | 현재 요소를 따라 요소를 반환합니다 |
| 사전 서식 | 현재 요소 바로 앞의 요소를 반환합니다 |
| 부모 | 상위 노드 레이블 요소를 반환합니다 |
| 어린이들 | 모든 자막을 반환하십시오 |
| 제 1 차 차일드 | 첫 번째 자막 요소를 반환합니다 |
| LASTELEMENTCHILD | 마지막 하위 태그 요소를 반환합니다 |
| NextElementtsibling | 下一个兄弟标签元素돌아갑니다 |
| PreviousElementsibling | 이전 형제 태그 요소로 돌아갑니다 |
W3C DOM을 사용하면 간단한 크로스 브라우저 스크립트를 작성하여 XML을 브라우저와 서버 간의 통신 매체로 사용하기 위해 XML의 전원과 유연성을 최대한 활용할 수 있습니다.
작동 요소
1. W3C DOM 특성 및 동적으로 컨텐츠를 작성하는 데 사용되는 메소드
| 속성/방법 | 설명하다 |
| document.createelement_x (tagname) | 문서 개체의 CreateElement_X 메소드는 TagName에 의해 지정된 요소를 만들 수 있습니다. 문자열 div가 메소드 매개 변수로 사용되면 div 요소가 생성됩니다. |
| document.createtextnode (텍스트) | 문서 개체의 CreateTextNode 메소드는 정적 텍스트를 포함하는 노드를 만듭니다. |
| <ELTECT>. AppendChild (Childnode) | AppendChild 메소드는 지정된 노드를 현재 요소의 하위 노드 목록 (새 하위 노드)에 추가합니다. |
| <ELTECT> .SetAttribute (이름, 값) | 이 방법은 각각 요소에서 이름 속성의 값을 얻고 설정합니다. |
| <ementt> .insertbefore (Newnode, TargetNode) | Node NewNode 삽입 NewNode 삽입 TargetNode 요소 앞의 현재 요소의 하위 노드로 삽입 |
| <ementt> .removeattribute (이름) | 이 메소드는 요소에서 속성 이름을 삭제합니다 |
| <ELTECT> .RemoveChild (Childnode) | 이 메소드는 요소에서 하위 요소 자식을 제거합니다 |
| <ELTECT> .replaceChild (Newnode, Oldnode) | 이 메소드는 노드 OldNode를 노드 NewNode로 대체합니다. |
| <ELTECT> .HASCHILDNODES () | 이 방법은 요소에 자식 요소가 있는지 여부를 나타내는 부울 값을 반환합니다. |
2. 태그 내용
innerText 태그 텍스트 내용 가져 오기 innerHtml html 컨텐츠 값 가져 오기 값, 즉 제출 된 양식의 값을 얻습니다.
즉, 다음은 다음과 같습니다.
<div> 1111 </div> <div> 2222 </div> <input type = "text"value = "Zhang Yanlin"> <cript> document.getElementsByClassName ( "Zhang"). InnerText = 123; // 클래스 이름 Zhang으로 태그를 가져 와서 내용을 123 Document.getElementsByClassName ( "Yan")으로 변경합니다. InnerHtml = 456; // 클래스 이름으로 태그를 가져 와서 내용을 456 Document.getElementsByClassName ( "lin")으로 변경합니다. value = "Zhang Yanlin은 잘 생겼습니다."; // 클래스 이름 Lin으로 태그를 받고 내용을 Zhang Yanlin으로 변경합니다 </script>
3. 속성
속성 // 모든 태그 속성 가져 오기 stattributes (key, value) // 태그 속성 설정 getAttribute (key) // 지정된 태그 속성 가져옵니다.
사용자 정의 속성을 통해 모든 것을 선택하고, 선택 취소 및 선택 해제하는 경우를 만들 수 있습니다. 코드는 다음과 같습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <입력 유형 = "value ="all "onclick ="checkall (); ">"> <input type = "flough ="on cancclic = "cancclicl ="value = "value" value = "undelect"onclick = "recvall ();"> </div> <div id = "i1"> <ul> <li> <입력 유형 = "checkbox"value = "1"> basketball </li> <li> <입력 유형 = "checkbox"value = "value" "value"value = "checkbox"3 "> Volleyball </li> </ul> </div> <cript> function checkall () {var b = document.getElementsByClassName ( "C1"); for (var i = 0; i <b.length; i ++) {var check = b [i]; Check.Checked = true}} 함수 cancleall () {var b = document.getElementsByClassName ( "C1"); for (var i = 0; i <var i = 0; i <b.length; i ++) {var check = b [i]; Check.Checked = false}} 함수 recVall () {var b = document.getElementsByClassName ( "C1"); for (var i = 0; i <b.length; i ++) {var check = b [i]; if (check.Checked) {check.Checked = false} else {check.checked = true}}} </script> </body> </html> 모든 것을 선택, 반전, 취소 케이스참고 : OnClick은 클릭 이벤트이며 나중에 언급됩니다.
4. 수업 운영
classname // 모든 클래스 이름 가져 오기 클래스리스트 (cls) // 지정된 클래스 클래스리스트 (cls) // 클래스 추가
이것은 매우 유용합니다. 예를 들어, JD.com에서는 모든 제품에 마우스가 배치되면 많은 제품이 아래에 나타납니다. 제품은 숨겨져 있으며 트리거링 이벤트가 CSS 숨겨진 속성을 정의하는 이후에만 나타납니다. 마우스를 켜면 CSS 숨겨진 속성이 제거됩니다. 마우스가 제거되고 숨겨진 속성이 추가됩니다.
<! docType html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> 숨기기 </title> <style> .Hide {display : none; } </style> </head> <hod> <span onmouseover = "mouover ();"> 무언가를 꺼내지만 그것을 넣지 않고 사라집니다. documb } function mouout () {document.getElementById ( "zhangyanlin"). classList.add ( "hide"); } </script> </body> </html> 사례로 뇌를 깨우자5. 태그 작업
DOM을 통해 태그를 생성하여 지정된 위치에 추가 할 수 있습니다. 태그를 작동하는 두 가지 방법은 다음과 같습니다
// 메소드 var zhang = "<input type = 'text'/>";xxx.insertadjacenthtml("beforeend",zhang); xxx.insertadjacentelement ( 'afterbegin', document.createelement (')))))))). 메소드 var tag = document.createelement ( 'div') xxx.appendchild (tag) // div 요소 xxx.insertbefore (tag, xxx [1]) // 지정된 위치에 삽입 할 수 있습니다. 인덱스를 사용할 수 있습니다.<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <div> <입력 유형 = "text"/> <입력 유형 = "button"value = "andclick ="addElement (this); " /> </div> <div style = "위치 : 상대;"> <ul id = "commentlist"> <li> alex </li> <li> eric </li> </ul> </div> </div> <cript> 함수 부를 val val = ths.previousElement.value; ths.previousElementsibling.value = ""; var commentList = document.getElementById ( 'CommentList'); // 첫 번째 형식, 문자열 메소드 // var str = "<li>" + val + "</li>"; // 'preverbegin', 'afterbegin', 'prective', 'aperend'// 전 내부 마지막 마지막 // 전후의 외부 상단 // 애프터 버린 내부 근접 itting // 애프터 엔드 외벽 붙여 넣기 //commentlist.insertadjacenthtml (”beforend", // 두 번째 방법은 요소 메소드 var tag = document.createElement ( 'li')입니다. tag.innertext = val; var temp = document.createElement ( 'a'); temp.innertext = 'baidu'; temp.href = "http://etiantian.org"; tag.appendChild (온도); // commentList.appendChild (tag); CommentList.insertBefore (tag, commentList.children [1]); } </script> </body> </html> 태그 작동 케이스 추가
6. 스타일 작동
<body> <div id = i1> Zhang Yanlin은 잘 생겼습니다.
효과는 다음과 같습니다.
사건을 봅시다. 지식 포인트를 보는 것만으로는 지루합니다. 우리는 종종 입력 상자의 어두운 글꼴을 보게되어 무언가를 입력하도록 유도합니다. 클릭하면 사라집니다. 마법의 작전입니다. Dom을 통해 달성됩니다. 말도 안되는 말로 코드를 읽으십시오.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 제목 </title> <style> .bb {color : #9a9a9a; } .aa {색상 : 검은 색; }. onblur = "onbtu (this);"> <cript> 함수 inpatu (ths) {ths.classname = "aa"; var text = ths.Value; if (text == "내용을 입력하십시오") {ths.value = ""; }} 함수 ONBTU (ths) {var text = ths.Value; if (text == "컨텐츠를 입력하십시오"|| text.trim (). length == 0) {ths.classname = "bb"; ths.value = "콘텐츠를 입력하십시오"; }} </script> </body> </html> 입력 상자 프롬프트7. 위치 작동
총 문서 높이 문서 .documentElement.offSetheight 현재 문서를 점유하는 화면 높이 문서 .documentElement.ClientHeight 자체 높이 태그를 우수한 위치 높이 태그까지의 거리 거리 태그 태그 태그까지의 거리가 높은 스크롤링 높이 태그 .scrolltop.
웹 페이지의 오른쪽 하단 모서리에 상단으로 돌아가서 작은 지점에서 상단으로 돌아온 것이 있다고 생각 했습니까? 예, 이러한 높이를 계산하는 것입니다. 마우스를 아래로 당기면 왼쪽의 메뉴 막대의 해당 스타일이 변경됩니다.
<! docType html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> body {margin : 0px; } img {border : 0; } ul {패딩 : 0; 여백 : 0; 목록 스타일 : 없음; } h1 {패딩 : 0; 여백 : 0; } .ClearFix : {content : "."이후; 디스플레이 : 블록; 높이 : 0; Clear : 둘 다; 가시성 : 숨겨진; } .wrap {너비 : 980px; 여백 : 0 Auto; } .pg-header {배경색 : #303a40; -webkit-box-shadow : 0 2px 5px rgba (0,0,0, .2); -Moz-Box-Shadow : 0 2PX 5PX RGBA (0,0,0, .2); Box-Shadow : 0 2PX 5PX RGBA (0,0,0, .2); } .pg-header .logo {float : 왼쪽; 패딩 : 5px 10px 5px 0px; } .pg-header .logo img {vertical-align : middle; 너비 : 110px; 높이 : 40px; } .pg-header .nav {line-height : 50px; } .pg-header .nav ul li {float : 왼쪽; } .pg-header .nav ul li a {display : block; 색상 : #CCC; 패딩 : 0 20px; 텍스트 결정 : 없음; 글꼴 크기 : 14px; } .pg-header .nav ul li a : 호버 {색상 : #fff; 배경색 : #425A66; } .pg-body {} .pg-body .catalog {위치 : 절대; 상단 : 60px; 너비 : 200px; 배경색 : #fafafa; 하단 : 0px; } .pg-body .catalog.fixed {위치 : 고정; 상단 : 10px; } .pg-body .catalog .catalog-item.active {color : #fff; 배경색 : #425A66; } .pg-body .Content {위치 : 절대; 상단 : 60px; 너비 : 700px; 마진 왼쪽 : 210px; 배경색 : #fafafa; 오버플로 : 자동; } .pg-body .content .section {높이 : 500px; 테두리 : 1px 솔리드 레드; } </style> <body onscroll = "scrollevent ();"> <div> <div> <div> <a href = "#"> <img src = "http://core.pc.lietou-c4a4.pn"> </div> <alit> <aD> <aD> <aD> <aD> <ulD> href = "#"> home </a> </a> </li> <li> <a href = "#"> function 1 </a> </a> </li> <li> <a href = "#"> function 2 </a> </li> </ul> </div> </div> </div> </div> <div> <div> <div id = "catalog"> catalog "> catalog"> 1 </a> </div> <div auto-to = "function2"> <a> 그림 2 </a> </div> <div auto-to = "function3"> <a> 그림 3 </a> </div> </div> <div id = "content"> <div menu = "function1"> <h1> </h1> </div> <div 메뉴 = <h1> </h1> <div menu = "function3"> <h1> 3 장 </h1> </div> </div> </div> </script> <cript> 함수 Scrollevent () {var bodyscrolltop = document.body.scrolltop; if (bodyscrolltop> 50) {document.getElementsByClassName ( 'Catalog') [0] .classList.add ( '고정'); } else {document.getElementsByClassName ( 'Catalog') [0] .classList.Remove ( '고정'); } var content = document.getElementById ( 'content'); var 섹션 = content.children; for (var i = 0; i <sections.length; i ++) {var current_section = 섹션 [i]; // 상단 var var scofftop = current_section.offsettop + 60에서 현재 레이블의 절대 높이; // 상단의 현재 레이블, 상대 높이 var vartop = scofftop -bodyscrolltop; // 현재 레이블 높이 var 높이 = current_section.scrollheight; if (offtop <0 && -offtop <height) {// 현재 레이블은 활성화 된 active var menus = document.getElementById ( 'catalog'). children; var current_menu = 메뉴 [i]; current_menu.classlist.add ( 'active'); for (var j = 0; } } 부서지다; }}}}} </script> </body> </html> 스크롤 메뉴 <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 제목 </title> <style> .pg-top {위치 : 고정; 배경색 : #0095BB; 높이 : 40px; 너비 : 40px; 하단 : 50px; 오른쪽 : 40px; 색상 : Whitesmoke; } .hide {디스플레이 : 없음; } </style> </head> <body onscroll = "func ();"> <div style = "height : 3000px;" id = "i1"> <h1> Zhang Yanlin </h1> </div> <div id = "i2"> <a href = "javaScript : void (0);" onclick = "gotop ();"> 상단으로 돌아갑니다 </a> </div> <cript> function func () {var scrolltop = document.body.scrolltop; var i1 = document.getElementById ( "i2"); if (scrolltop> 20) {i1.classlist.remove ( "hide")} else {i1.classlist.add ( "hide")} function gotop () {document.body.scrolltop = 0; } </script> </body> </html> 위로 돌아갑니다8. 기타 작업
Console.log 출력 상자 경고 팝업 상자 확인 확인란 확인 상자 확인 // URL 및 새로 고침 위치 .href get urllocation.href = "url"renoad () reload () Reload // Timer SetInterval Clear Timer Clear Settimeout 단일 타임 아웃 싱글 타이머가 클리어 타이머를 확인하십시오.
타이머에 대해 말씀 드리겠습니다. 타이머가 더 유용합니다. 예를 들어, 이메일을 삭제하면 대화 팝업이 있습니다. 이메일이 삭제되었습니다. 이것은 단일 타이머입니다. 특정 요구가 있으면 여러 타이머를 사용할 수 있습니다.
// 다중 타이머 케이스 <입력 유형 = "버튼"value = "interval"onclick = "interval ();"> <input type = "button"value = "stopinterval"onclick = "stopinterval ();"> <cript> 함수 간격 () {s1 = setInterval (function () {console.log (123)); s1 = setInterval (function () {console.log (123)}, 500); } 함수 stopInterVal () {clearInterVal (s1); // 하나의 여러 타이머를 지우십시오} </script>단일 타이머
<div> <입력 유형 = "버튼"value = "delete"onclick = "delete ();"> <input type = "button"value = "keal 현재 상태"onclick = "undelete ();"> <div id = "status"> </div> </div> </div> {script.ctrite.getElembyId ( "status"); t1 = settimeout (Clearstatus, 1500); } function clearstatus () {document.getElementById ( "status"). innerText = ""; } function undelete () {cleartimeout (t1); // 타이머를 지우면 계속 표시됩니다} </script>이벤트
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 제목 </title> </head> <body> // 정상 이벤트 <button id = "btn1"onclick = "func ();"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> "btn1"); function func () {alert ( "정상 시간 처리")} </script> // 레벨 0 프로세싱 이벤트 <button id = "btn2"> 레벨 0 프로세싱 버튼 </button> <cript> var btn = document.getElementById ( "btn2"); btn.onclick = function () {alert ( "0- 레벨 처리 버튼")}; // btn.onclick = null; // 이벤트 처리를 명확하게 처리하면 여러 이벤트가 덮어 서 쓸 수 있습니다. 마지막 이벤트 만 남겨 둡니다. </script> // 레벨 2 처리 이벤트 <버튼 ID = "BTN3"> 레벨 2 처리 버튼 </button> <cript> var btn = document.getElementById ( "btn3"). var btn1 = documb // 덮어 쓰기 </script> <button id = "btn4"> 전체 호환 버튼 </button> <cript> var btn = document.getElementById ( "btn4"); if (btn.adeventListener) {btn.addeventListener ( "Click", Demo); } else if (btn.attachevent) {btn.attachevent ( "onclick", 데모); } else {btn.onclick = 데모; } function demo () {alert ( "통합 호환성 이벤트 처리")} </script> </body> </html>이벤트 목록 :
| 재산 | 이 이벤트가 언제 발생합니까 (트리거 된시기) |
| onabort | 이미지 로딩이 중단됩니다 |
| onblur | 요소는 초점을 잃습니다 |
| onchange | 해당 지역의 내용이 수정되었습니다 |
| onclick | 사용자가 객체를 클릭 할 때 호출 된 이벤트 핸들 (입력 태그를 클릭 할 때 위의 코드 예제 실행) |
| ondblClick | 사용자가 객체를 두 번 클릭하면 이벤트 핸들이 호출됩니다 |
| 오류 | 문서 나 이미지를로드하는 동안 오류가 발생했습니다 |
| Onfocus | 요소는 초점을 얻습니다 |
| onkeydown | 키보드 키를 누릅니다 |
| onkeypress | 키보드 키를 누르고 릴리스합니다 |
| onkeyup | 키보드가 해제됩니다 |
| onload | 페이지 또는 사진이로드되었습니다 |
| onmousedown | 마우스 버튼을 누릅니다 |
| onMouseMove | 마우스가 끝난 후 |
| onmouseout | 마우스는 요소에서 제거됩니다 |
| onmouseover | 마우스를 요소 위로 움직입니다 |
| Onmouseup | 마우스 버튼이 해제됩니다 |
| onreset | 재설정 버튼이 클릭됩니다 |
| onresize | 창 또는 프레임이 크기가 커집니다 |
| onselect | 선택된 텍스트 |
| onsubmit | 확인 버튼이 클릭됩니다 |
| onunload | 사용자 종료 페이지 |
참고 : 태그는 여러 이벤트를 바인딩 할 수 있고,이 태그는 현재 작동 중이며 이벤트는 현재 이벤트의 내용을 캡슐화합니다.
몇 가지 사례를 가지고합시다. 그렇지 않으면 나는 그것을 읽은 후에 보지 못한 것 같은 느낌이 든다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 제목 </title> <style> ul {List-Style : 없음; 패딩 : 0; 여백 : 0; } ul li {float : 왼쪽; 배경색 : #038cae; 색상 : 흰색; 패딩 : 15px 20px; } .ClearFix : {display : block; 콘텐츠: '.'; 높이 : 0; 가시성 : 숨겨진; Clear : 둘 다; } .hide {디스플레이 : 없음; } .TAB-MENU {테두리 : 1PX SOLID #DDDDDD; } .TAB-MENU .TITLE {배경색 : #DDDDDD; } .TAB-MENU .TITLE .Active {Background-Color : White; 색상 : 검은 색; 테두리 : 2px 솔리드 레드; } .TAB-MENU .Content {테두리 : 1px Solid #dddddd; Min-Height : 150px; }. "content"> <div con = "h1"> content1 </div> <div con = "h2"> content2 </div> <div con = "h3"> content3 </div> </div> </div> </div> </div> </div> </div> <cript> function show (var target = ths.getattripte ( 'target)); ths.classname = 'active'; var brother = ths.parentelement.children; for (var i = 0; i <brother.length; i ++) {if (ths == brother [i]) {} else {brother [i] .removeattribute ( "class"); }} var content = document.getElementById ( "Content"). children; for (var j = 0; j <content.length; j ++) {var current_content = content [j]; var con = current_content.getAttribute ( "con"); if (con == target) {current_content.classlist.remove ( "hide"); } else {current_content.className = "HIDE"; }}}} </script> </body> </html> 태그 메뉴 케이스 <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <입력 유형 = "button"onclick = "func (); value = "click"/> <div id = "i1"> <div> 123 </div> <div alex = "sb"> 123 </div> <div> 123 </div> <div alex = "sb"> 123 </div> <div> 123 </div> <!-<input type ">-> <!-input type =. func () {// i1 // i1 모든 어린이, 각 어린이, 각 어린이를 반복하고 Alex = 'sb'var i1 = document.getElementById ( 'i1'); var divs = i1.Children; for (var i = 0; i <divs.length; i ++) {var current_div = divs [i]; var result = current_div.getAttribute ( 'Alex'); // console.log (결과); if (result == "sb") {current_div.innertext = "456"; }}} </script> </body> </html> 사용자 정의 속성을 통해 요소 값을 변경합니다위의 기사는 JavaScript DOM 객체를 깊이 이해하고 있습니다. 이 기사는 내가 당신과 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.