HTML29

• 

  [JavaScript]부모, 자식 노드 가져오는 방법 부모, 자식 노드 가져오는 방법 이번 포스팅은 JavaScript에서 부모 노드와 자식 노드를 가져오는 방법을 소개합니다. 부모 노드 가져오는 방법 부모 노드를 가져오려면 부모 노드가 존재하는 특정 노드를 NodeList 객체로 가져와야 합니다. NodeList 객체를 반환하는 메서드 - querySelectorAll() - querySelector() - getElementById() - getElementByName() HTMLCollection 객체를 반환하는 메서드 - getElementByTagName() - getElementByClassName() 이번 포스팅은 querySelector() 메서드를 사용합니다. 아래는 HTML 마크업이며 id가 parent인 div 요소 하위에 세 개의 di.. JavaScript/DOM 2022. 11. 15.

• 

  [JavaScript]HTML 요소 가져오는 방법 JavaScript에서 HTML 요소 가져오는 방법 때때로, 웹 개발자는 HTML 코드를 변경하지 않고 JavaScript에서 HTML 요소를 변경해야 합니다. 이번 포스팅은 HTML 요소를 변경하기 전에 JavaScript에서 HTML 요소를 접근할 수 있는 몇 가지 방법을 소개합니다. id 속성으로 가져오는 방법 첫 번째 방법으로 document 객체의 getElementById() 메서드를 사용하여 id 속성과 일치하는 HTML 요소를 가져올 수 있습니다. getElementById() 메서드에 전달한 id를 가진 HTML 요소가 없는 경우 null이 반환됩니다. id 속성은 HTML 문서 내에서 고유하기 때문에 HTML 요소를 접근할 수 있는 가장 빠른 방법입니다. 아래는 id가 "content".. JavaScript/DOM 2022. 11. 13.

• 

  [JavaScript]HTML 요소의 넓이와 높이 가져오는 방법 HTML 요소의 넓이와 높이 가져오는 방법 이번 포스팅은 JavaScript에서 HTML 요소의 넓이와 높이를 가져오는 방법을 소개합니다. 이번 포스팅의 내용을 이해하려면 크롬 개발자 도구 활용 방법과 CSS 기초 지식이 필요하며, 네이버 메인 화면의 로그인 영역을 기준으로 설명합니다. 방법 1. offsetWidth 및 offsetHeight 프로퍼티 offsetWidth 프로퍼티와 offsetHeight 프로퍼티는 margin을 제외한 HTML 요소의 넓이와 높이를 반환합니다. 로그인 영역의 id 속성이 account이므로 document.getElementById() 메서드에 문자열 "account"를 전달하고 offsetWidth, offsetHeight 프로퍼티를 사용하여 넓이와 높이를 가져옵니.. JavaScript/DOM 2022. 11. 13.

• 

  [JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법 OnClick 이벤트에서 DOM 요소 제거하는 방법 DOM 요소를 클릭했을 때, 해당 요소를 제거하려면 다음 순서대로 코드를 작성합니다. 1. DOM 요소를 가져옵니다. 2. click 이벤트 리스너를 추가합니다. 3. 이벤트 핸들러에서 가져온 요소에 대한 remove() 메서드를 호출합니다. 예를 들어, id 속성이 parent인 요소를 클릭했을 때, 요소를 제거하는 코드는 다음과 같습니다. const parentDiv = document.getElementById('parent'); parentDiv.addEventListener('click', () => { parentDiv.remove(); }); getElementById() 메서드를 사용하여 id 속성이 parent인 요소를 가져온 다음 cl.. JavaScript/DOM 2022. 11. 11.

• 

  [Svelte]문자열을 HTML로 표현 문자열을 html로 표현 Svelte 컴포넌트에서 문자열 형태의 html을 HTML 영역에 표시하면, 문자열이 출력됩니다. {markup} [실행 결과] Svelte에서 문자열 형태의 html을 html로 표현하고 싶다면, 컴포넌트의 HTML 영역에서 @html 문법을 사용합니다. {@html markup} [실행 결과] 다음 소스 코드는 textarea에서 입력받은 문자열을 html로 표현합니다. {@html strValue} [실행 결과] 크로스 사이트 스크립트 공격자가 웹 애플리케이션의 취약점을 이용하여 악성 html, javascript 코드를 삽입하여 비정상적인 기능을 수행하도록 하는 공격 기법입니다. textarea에 악성 html 코드를 삽입하여 웹 애플리케이션이 비정상적으로 동작할 수 있는.. Svelte 2022. 8. 5.