DOM이란 무엇입니까? Selenium WebDriver: 구조, 전체 형식

작성자 : Krishna 룽타 Krishna 룽타
Hours 업데이트

DOM이란 무엇입니까? Selenium 웹드라이버?

DOM in Selenium WebDriver는 HTML5를 사용한 웹 개발의 필수 구성 요소이며 Java스크립트. DOM의 전체 형식은 Document Object Model입니다. DOM은 컴퓨터 과학 개념이 아닙니다. 웹 개발자가 HTML 또는 XML에서 문서에 액세스하고 조작하기 위해 표준화된 간단한 인터페이스 세트입니다. Java스크립트.

이러한 표준은 개발자가 구현 세부 사항에 대해 걱정하지 않고도 웹페이지를 구축하는 데 도움이 됩니다. 이러한 인터페이스를 표준화하는 데 관여하는 조직에는 Mozilla, Apple 등이 있습니다. Microsoft, Google, Adobe 등. 그러나 표준을 공식화하고 이를 게시하는 것은 W3C입니다. 여기를 참조하세요(https://dom.spec.whatwg.org/).

이 튜토리얼은 HTML 문서 구조의 기본 개념과 이를 조작하는 방법을 다루는 것을 목표로 합니다. Java스크립트. 이 튜토리얼에서는 다음 주제를 다룰 것입니다.

DOM 구조 이해

다음을 사용하여 스크립팅이 포함된 웹 사이트를 구축하는 경우 DOM 구조를 이해해야 합니다. Java스크립트. 웹사이트에서 다음의 복잡한 작업 중 하나 또는 전부를 수행하는 경우 DOM을 이해하는 것이 더욱 중요합니다.

  1. 사용자 포트폴리오에 있는 모든 주식의 현재 가격과 같이 전체 페이지를 새로 고치지 않고 지속적으로 업데이트되는 콘텐츠 개발
  2. 콘텐츠를 동적으로 추가하거나 수정하는 등 고급 사용자 상호 작용 개발(예: 포트폴리오에 더 많은 주식을 추가하는 기능)
  3. 뮤추얼 펀드 포트폴리오가 주식 포트폴리오 앞에 나타나도록 레이아웃을 변경하는 기능과 같이 사용자가 맞춤화할 수 있는 콘텐츠 개발
  4. 웹사이트에서 반응형 콘텐츠를 개발하여 웹사이트가 iPhone, 데스크탑, 태블릿 등 다양한 미디어 화면에 자동으로 적응하도록 합니다.

기본 HTML 페이지

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

브라우저의 DOM PARSER에서는 어떻게 보일까요?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

body 요소에 어떻게 접근하나요?

<script>
    var body = window.document.body;
</script>

"Hello World"는 어떻게 말하나요?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

마지막으로 전체 HTML 파일은 다음과 같습니다.

엽니다 Windows 메모장을 열고 다음 내용을 붙여넣습니다. 그런 다음 파일을 "MyFileNewFile.html"로 저장합니다(파일 이름이 .html로 끝나야 합니다).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

마지막으로 선호하는 브라우저 중 하나를 사용하여 파일을 열면 "Hello World!"가 표시됩니다.

DOM의 구성요소 Selenium

아래는 DOM의 주요 구성 요소입니다. Selenium 웹드라이버:

  • 창
  • 문서
  • 요소

창

Window는 DOM의 문서 객체를 포함하는 객체입니다. 그것은 모든 것 위에 자리 잡고 있습니다.

특정 문서에서 창 개체에 접근하려면

<script>
      var window = document.defaultView;
</script>

탭 환경에서는 각 탭에 자체 창 개체가 있습니다. 그러나 window.resizeTo 및 window.resizeBy와 같은 이벤트를 포착하고 구현하려는 경우 탭에만 적용되는 것이 아니라 전체 창에 적용됩니다.

DOM의 Window 객체 속성

window.localStorage – 브라우저의 로컬 저장소에 대한 액세스를 제공합니다. 로컬 저장소를 사용하여 세션에서 데이터를 저장하고 검색할 수 있습니다.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

창.오프너 - 이 창을 연 창 개체에 대한 참조를 가져옵니다(링크를 클릭하거나 window.open 메서드를 사용하여).

Window 객체의 유용한 메소드

창.경고() – 메시지와 함께 경고 대화 상자를 표시합니다.

<script>
		window.alert('say hello');
</script>

창 개체가 노출하는 유용한 이벤트가 많이 있습니다. 고급 주제 아래의 "이벤트" 섹션에서 이에 대해 논의하겠습니다.

문서

문서는 DOM 트리의 시작을 표시합니다. 문서는 DOM의 첫 번째 노드입니다. 여기에는 URL, getElementById, querySelector 등과 같은 전체 문서에 범위가 적용되는 여러 메서드와 속성이 있습니다.

DOM의 문서 개체 속성

Document.documentURI 그리고 문서.URL – 둘 다 문서의 현재 위치를 반환합니다. 그러나 문서가 HTML Document.URL 유형이 아닌 경우 작동하지 않습니다.

Document.activeElement – 이 메서드는 포커스가 있는 DOM의 요소를 반환합니다. 즉, 사용자가 텍스트 상자에 입력하는 경우 Document.activeElement는 해당 텍스트 상자에 대한 참조를 반환합니다.

문서 제목 – 해당 문서의 제목을 읽거나 설정하는데 사용됩니다.

문서 객체의 유용한 메소드

Document.getElementById(문자열 ID) – 이것은 DOM 조작에서 가장 관련성이 높고 유용한 방법입니다. 고유 식별자를 사용하여 DOM 트리에서 요소를 조회하는 데 사용됩니다. 조회는 대소문자를 구분합니다. 즉, 다음 예에서 " ” 요소는 IntroDiv, introdiv, iNtrodiv 등의 단어를 사용하여 검색할 수 없습니다.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(문자열 선택기) – 이것은 CSS 선택기의 규칙에 따라 하나 이상의 요소를 선택하는 데 널리 사용되는 또 다른 방법입니다(jQuery의 $ 표기법에 익숙하다면 자체적으로 이 방법을 사용합니다). 우리는 CSS 선택기에 대해 많이 탐구하지 않을 것입니다. CSS 선택기는 유사한 요소 목록을 얻을 수 있는 규칙 세트입니다(선택기 규칙을 기반으로 함). 이전에 “Hello World” 섹션에서 이 방법을 사용한 적이 있습니다.

요소

DOM의 요소 객체

DOM의 요소 객체

요소는 문서의 DOM 트리에서 노드로 표시되는 개체입니다. 항상 그렇듯이 Element 객체 자체는 브라우저와 HTML 문서 간의 속성, 메서드 및 이벤트의 계약일 뿐입니다. HTMLElement, SVGElement, XULElement 등과 같은 특별한 종류의 요소가 있습니다. 이 튜토리얼에서는 HTMLElement에만 중점을 둘 것입니다.

DOM의 요소 개체 속성

요소.id – 이 속성은 HTML 요소의 "ID"(고유 식별자)를 설정하거나 읽는 데 사용할 수 있습니다. ID는 DOM 트리의 요소 간에 고유해야 합니다. 앞서 언급했듯이 ID는 Document.getElementById 메서드에서 DOM 트리 내의 특정 Element 개체를 선택하는 데에도 사용됩니다.

HTMLElement.content편집 가능 – 요소의 contentEditable 속성은 해당 요소의 콘텐츠가 편집 가능/수정 가능한지 여부를 결정합니다. 이 속성은 아래 스크립트에 표시된 대로 설정할 수 있습니다. 이 속성은 주어진 요소가 편집 가능한지 여부를 결정하는 데에도 사용할 수 있습니다. HTML 본문 내에서 다음 스크립트를 시도하면 본문의 모든 콘텐츠를 편집할 수 있음을 알 수 있습니다.

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML은 요소 내부의 HTML 콘텐츠에 액세스하는 데 사용하는 또 다른 중요한 속성입니다. 요소의 새 HTML 콘텐츠를 설정하는 데도 사용됩니다. 데이터 필드의 콘텐츠를 설정/변경하는 데 널리 사용됩니다. 예를 들어 웹페이지에서 뭄바이 시의 온도를 매시간 업데이트하려면 다음 예제의 스크립트를 매시간 실행할 수 있습니다.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Element 객체의 유용한 메소드

HTMLElement.blur() & HTMLElement.focus() – blur 및 focus 메서드는 각각 HTML 요소에서 포커스를 제거하거나 HTML 요소에 포커스를 제공하는 데 사용됩니다. 이러한 메서드는 데이터 입력 웹페이지에서 텍스트 상자 간에 커서의 포커스를 이동하는 데 가장 널리 사용됩니다.

Element.querySelectorAll – 이 메소드는 문서 객체에 대해 이미 설명한 querySelector 메소드와 유사합니다. 그러나 이 방법은 요소 자체의 하위 항목 내에서 검색을 제한합니다.

DOM에서 디버깅

개발자 도구 Google Chrome, 모질라 Firefox, Internet Explorer(10 이상) 또는 Safari를 사용하면 브라우저 내에서 바로 쉽게 디버깅할 수 있습니다. 때로는 서로 다른 브라우저가 동일한 HTML 마크업을 다르게 해석하는 경우가 있는데, 디버깅을 통해 특정 브라우저의 DOM 엔진에서 해석한 대로 DOM을 검사하는 데 도움이 됩니다.

이제 온도 값을 26에서 변경하고 싶다고 가정해 보겠습니다.o32에 Co마지막 예에서는 C입니다. 이를 위해 몇 가지 간단한 단계를 수행하겠습니다. 여기에 표시된 스크린샷은 Mozilla에서 가져온 것입니다. Firefox– 그러나 단계는 다른 모든 브라우저에서 동일합니다.

  1. 브라우저를 사용하여 MyFileNewFile.html(또는 위 튜토리얼에서 HTML 파일에 지정한 이름)을 엽니다.
  2. 마우스를 사용하여 온도 값 26을 마우스 오른쪽 버튼으로 클릭하세요.oC를 클릭하고 "요소 검사"를 클릭하세요.

    DOM에서 디버깅

  3. "요소 검사"를 선택한 요소는 브라우저에서 강조 표시됩니다(디버거 창은 일반적으로 화면 하단에 나타납니다).

    DOM 엔진에서 디버깅

  4. 옆에 있는 기울어진 삼각형을 클릭하여 요소를 엽니다.

    DOM의 디버깅 프로세스

  5. 편집하고 싶은 것을 선택하고 더블클릭하세요. 텍스트를 변경할 수 있는 옵션이 제공됩니다. 아래 애니메이션 이미지에 지시된 대로 하세요.

    DOM에서 디버깅

  6. HTML 페이지 콘텐츠의 변경 사항을 확인하세요. 이제 디버깅 창을 닫아도 됩니다.

    변경 사항은 이 세션 동안에만 유지됩니다. 페이지를 다시 로드하거나 새로 고치면(F5 누르기) 변경 사항이 원래대로 되돌아갑니다. 이는 실제 HTML 소스를 변경하지 않고 브라우저의 로컬 해석만 변경했음을 나타냅니다.

    재밌는 운동으로 다음을 해보세요. 열기 www.facebook.com 브라우저에서 디버거 도구를 사용하여 다음 결과를 얻으세요. "Facebook을 해킹했습니다"라고 표시되는 것을 확인하세요.

DOM의 디버깅 프로세스

DOM 이벤트

DOM의 이벤트란 무엇입니까?

이벤트는 사용자가 트리거한(또는 브라우저 페이지의 수명 주기가 트리거된) 사건이 메시지로 브로드캐스트되는 프로그래밍 모델입니다. 예를 들어 페이지 로드가 완료되면 window.load 이벤트가 트리거되고 마찬가지로 사용자가 해당 버튼을 클릭하면 요소의 클릭 이벤트가 트리거됩니다.

이러한 메시지는 누구든지 가로챌 수 있습니다. JavaScript 코드를 작성한 다음 개발자가 정의한 작업을 수행할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때만 웹페이지의 숫자가 업데이트되기를 원한다고 가정해 보겠습니다. 다음 방법 중 하나를 사용하여 이를 달성할 수 있습니다.

  1. HTML 요소의 onclick 이벤트에 작업 할당
  2. addEventListener 메소드를 사용하여 클릭 이벤트에 작업 할당

방법 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

방법 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

DOM 문제 해결

Q. 요소가 존재하는지 여부를 어떻게 알 수 있나요?

A. 선택기를 사용하여 요소를 찾아보고 반환된 요소가 null인지 확인하세요. 아래 예를 참조하세요 –

관련 기사

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

Q. TypeError가 발생합니다: document.getElementByID는 함수가 아닙니다…

A. 메소드 이름이 API 메소드와 정확히 일치하는지 확인하십시오. 위의 질문과 마찬가지로 getElementByID가 아니라 getElementById입니다.

Q. children과 childNodes의 차이점은 무엇인가요?

A. 메서드 children은 호출하는 요소 내의 모든 요소의 컬렉션을 가져옵니다. 반환되는 컬렉션은 HTMLCollection 유형입니다. 그러나 메서드 childNodes는 호출하는 요소 내의 모든 노드의 컬렉션을 가져옵니다. 다음 스크립트를 예제에 추가하고 차이점을 확인하세요.

childNodes 메소드는 14개 항목을 반환합니다.

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

children 메소드는 7개의 항목만 반환하지만

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

Q. Uncaught TypeError: Cannot read property 'innerHTML' of undef…

A. 속성 innerHTML을 호출하는 HTMLElement의 인스턴스가 초기 선언 후에 설정되었는지 확인하세요. 이 오류는 일반적으로 다음 시나리오에서 발생합니다. 다음 코드 블록에서 오류를 방지하는 방법을 확인하세요…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

제품 개요

  • 이 튜토리얼에서 우리는 DOM이 무엇인지, 그리고 동적 웹 페이지를 구축하기 위해 이해하는 것이 어떻게 필수적인 개념인지 배웠습니다.
  • 또한 Window, Document, Element와 같은 DOM 요소 유형도 다루었습니다.
  • 우리는 각 종류 내에서 사용할 수 있는 몇 가지 유용한 DOM 메서드와 속성을 배웠습니다.
  • 우리는 대부분의 브라우저가 인터넷에서 사용 가능한 모든 웹페이지를 재생할 수 있는 개발자 도구를 제공하는 방법을 확인했으며 이를 통해 자체 웹사이트의 문제를 디버깅하고 해결하는 방법을 배웠습니다.
  • 또한 DOM 이벤트 메커니즘에 대해서도 간략하게 다루었습니다.
  • 마지막으로 DOM의 몇 가지 문제 해결 항목을 다루었습니다.
  • 인터넷은 DOM의 리소스로 가득 차 있습니다. 최고의 최신 참고 자료 중 하나가 Mozilla 개발자 네트워크에서 제공됩니다. 보다 - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model