Angular와 함께 jQuery를 사용하는 방법은 무엇입니까?

누구든지 Angular 와 함께 jQuery 를 사용하는 방법을 말해 줄 수 있습니까 ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

DOM 요소 의 클래스 또는 ID 를 미리 조작하는 것과 같은 해결 방법이 있다는 것을 알고 있지만 더 깔끔한 방법을 원합니다.

Angular2에서 jQuery를 사용하는 것은 ng1과 비교하면 쉽습니다. TypeScript를 사용하는 경우 먼저 jQuery 유형 스크립트 정의를 참조 할 수 있습니다.

tsd install jquery --save
or
typings install dt~jquery --global --save

당신은 그냥 사용할 수 있기 때문에 TypescriptDefinitions이 필요하지 않습니다 any에 대한 유형으로 $나jQuery

각도 구성 요소 @ViewChild()에서는 뷰가 초기화 된 후이 nativeElement객체 의 속성을 사용하여 jQuery에 전달할 수 있는 템플릿에서 DOM 요소를 참조해야합니다 .

JQueryStatic으로 선언 $(또는 jQuery)하면 jQuery에 대한 형식화 된 참조가 제공됩니다.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

이 예제는 plunker에서 사용할 수 있습니다. http://plnkr.co/edit/Nq9LnK?p=preview

tslint는 chosen$의 속성이 아니라고 불평합니다. 이 문제를 해결하려면 사용자 정의 * .d.ts 파일의 JQuery 인터페이스에 정의를 추가 할 수 있습니다

interface JQuery {
    chosen(options?:any):JQuery;
}    

왜 모두가 로켓 과학을 만드는가? 정적 요소 (예 : body태그)에 대한 기본 작업을 수행해야하는 다른 사람 은 다음과 같이하십시오.

1. index.html에서 scriptjquery lib의 경로가있는 태그를 추가 하면 위치는 중요하지 않습니다 (이 방법으로 IE 조건부 태그를 사용하여 IE9 이하의 jquery 하위 버전을로드 할 수도 있습니다).
2. 당신에 export component: 블록 코드를 호출하는 기능이 $("body").addClass("done");추가 Normaly이 그래서 그냥이 .TS 파일의 모든 수입 후, 선언의 오류가 발생 declare var $:any;하고 당신은 갈 수 있습니다!

이것이 나를 위해 일한 것입니다.

1 단계-첫 번째 사항

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

2 단계-수입

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

# 업데이트- Feb - 2017

최근에, 나는에 코드를 쓰고 있어요 ES6대신 typescript하고 수 있어요 import없이 * as $에서 import statement. 이것이 지금 보이는 모습입니다 :

import $ from 'jquery';
//
$('#elemId').width();

행운을 빕니다.

이제는 매우 쉬워졌습니다. Angular2 컨트롤러 내부의 모든 유형으로 jQuery 변수를 선언하면됩니다.

declare var jQuery:any;

import 문 직후와 구성 요소 데코레이터 앞에 이것을 추가하십시오.

ID X 또는 클래스 X를 가진 요소에 액세스하려면 수행해야합니다.

jQuery("#X or .X").someFunc();

간단한 방법 :

1. 스크립트 포함

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. 선언

my.component.ts

declare var $: any;

3. 사용

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

이 간단한 단계를 따르십시오. 그것은 나를 위해 일했다. 혼란을 피하기 위해 새로운 각도 2 앱으로 시작할 수 있습니다. Angular cli를 사용하고 있습니다. 아직 설치하지 않은 경우 설치하십시오. https://cli.angular.io/

1 단계 : 데모 각도 2 앱 만들기

ng new jquery-demo

어떤 이름이든 사용할 수 있습니다. 이제 cmd 아래에서 실행하여 작동하는지 확인하십시오 (이제 cd 명령을 사용하지 않으면 'jquery-demo'을 가리키고 있는지 확인하십시오)

ng serve

"앱이 작동합니다!"가 표시됩니다 브라우저에서.

2 단계 : Bower 설치 (웹용 패키지 관리자)

cli에서이 명령을 실행하십시오 (cd command를 사용하지 않으면 'jquery-demo'를 가리키고 있는지 확인하십시오).

npm i -g bower --save

이제 bower를 성공적으로 설치 한 후 아래 명령을 사용하여 'bower.json'파일을 작성하십시오.

bower init

입력을 요구할 것입니다. 기본값을 원하면 Enter 키를 누르십시오. 그리고 "Looks good?"이라고 물을 때 "Yes"를 입력하십시오.

이제 "jquery-demo"폴더에 새 파일 (bower.json)이 표시됩니다. https://bower.io/에서 자세한 정보를 찾을 수 있습니다.

3 단계 : jquery 설치

이 명령을 실행

bower install jquery --save

jquery 설치 폴더가 포함될 새 폴더 (bower_components)를 만듭니다. 이제 'bower_components'폴더에 jquery가 설치되었습니다.

4 단계 : 'angular-cli.json'파일에 jquery 위치 추가

'angular-cli.json'파일 ( 'jquery-demo'폴더에 있음)을 열고 "scripts"에 jquery 위치를 추가하십시오. 다음과 같이 보일 것입니다 :

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

5 단계 : 테스트를위한 간단한 jquery 코드 작성

'app.component.html'파일을 열고 간단한 코드 행을 추가하십시오. 파일은 다음과 같습니다.

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

이제 'app.component.ts'파일을 열고 'p'태그에 대한 jquery 변수 선언 및 코드를 추가하십시오. 라이프 사이클 후크 ngAfterViewInit ()도 사용해야합니다. 변경 후 파일은 다음과 같습니다.

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

이제 'ng serve'명령을 사용하여 각도 2 앱을 실행하고 테스트하십시오. 작동해야합니다.

라이프 사이클 후크 ngAfterViewInit () 를 구현하여 DOM 조작을 추가 할 수 있습니다.

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

angular2는 뷰를 재활용 할 수 있으므로 라우터를 사용할 때주의하십시오. 따라서 DOM 요소 조작은 afterViewInit의 첫 번째 호출에서만 수행되어야합니다. (정적 부울 변수를 사용하여 그렇게 할 수 있습니다)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

더 간단한 방법으로 수행합니다. 먼저 콘솔에서 npm으로 jquery를 설치 npm install jquery -S한 다음 구성 요소 파일에서 방금 작성합니다. let $ = require('.../jquery.min.js')작동합니다! 내 코드의 전체 예제는 다음과 같습니다.

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

teplate에서 예를 들면 다음과 같습니다.

<div class="departments-connections-graph">something...</div>

편집하다

또는 다음을 사용하는 대신 :

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

사용하다

declare var $: any;

그리고 index.html에 다음을 넣으십시오.

<script src="assets/js/jquery-2.1.1.js"></script>

이것은 jquery를 전역 적으로 한 번만 초기화합니다-예를 들어 부트 스트랩에서 모달 창을 사용하는 데 중요합니다 ...

1 단계 : npm install jquery --save 명령을 사용하십시오.

2 단계 : 단순히 각도를 다음과 같이 가져올 수 있습니다 :

'jquery'에서 $ 가져 오기;

그게 다야 .

예를 들면 다음과 같습니다.

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

// jquery 설치npm install jquery --save

// jquery에 대한 유형 정의 설치typings install dt~jquery --global --save

// 지정된대로 빌드 구성 파일에 jquery 라이브러리 추가 ( "angular-cli-build.js"파일에서)

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// 빌드에 jquery 라이브러리를 추가하기 위해 빌드를 실행 ng build

// 상대 경로 구성 추가 (system-config.js에서) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// 컴포넌트 파일에서 jquery 라이브러리 가져 오기

import 'jquery';

아래는 샘플 구성 요소의 코드 스 니펫입니다.

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

angular-cli를 사용하면 다음을 수행 할 수 있습니다.

1. 종속성을 설치하십시오 .

   npm install jquery --save

   npm install @ types / jquery --save-dev

2. 파일을 가져옵니다 .

   .angular-cli.json 파일의 "script"섹션에 "../node_modules/jquery/dist/jquery.min.js"를 추가하십시오.

3. jquery 선언 :

   tsconfig.app.json의 "types"섹션에 "$"를 추가하십시오.

공식 각도 클리어 문서 에 대한 자세한 내용을 찾을 수 있습니다

Angular2에서 Jquery를 사용하려면 (4)

이 setps를 따르십시오

Jquery 및 Juqry 유형 정의 설치

Jquery 설치 npm install jquery --save

Jquery 유형 정의 설치의 경우 npm install @types/jquery --save-dev

그런 다음 jquery를 가져옵니다.

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

각도 클리 사용

 npm install jquery --save

angular.json의 스크립트 배열

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

이제 jQuery를 사용하려면 jQuery를 사용하려는 구성 요소에서 다음과 같이 가져 오기만하면됩니다.

예를 들어 루트 컴포넌트에서 jQuery 가져 오기 및 사용

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

나는 dunce이기 때문에 작업 코드를 갖는 것이 좋을 것이라고 생각했습니다.

또한 Angular-protractor 의 Angular2 타이핑 버전 에는 jQuery에 문제가$ 있으므로 가장 많이 받아 들여지는 대답은 깔끔하게 컴파일되지 않습니다.

내가해야 할 단계는 다음과 같습니다.

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

my.component.ts 내부

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

그냥 써

declare var $:any;

모든 가져 오기 섹션 후에 jQuery를 사용하고 jQuery 라이브러리를 index.html 페이지에 포함시킬 수 있습니다.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

그것은 나를 위해 일했다

1) 컴포넌트에서 DOM에 액세스합니다.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

다음과 같은 방법으로 jQuery를 포함 할 수 있습니다. 2) angular2 가로 드되기 전에 index.html에 jquery 파일을 포함하십시오.

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

다음과 같은 방법으로 Jquery를 사용할 수 있습니다. 여기에서는 JQuery Ui 날짜 선택기를 사용하고 있습니다.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

이것은 나를 위해 일합니다.

이 시점은 내 이전에 작성된 모든 게시물에서 언급되었으므로 jquery 설치를 건너 뜁니다. 따라서 이미 jquery를 설치했습니다. 다음과 같이 t를 컴포넌트로 가져 오기

import * as $ from 'jquery';

작동하지만 서비스를 생성하여이를 수행하는 또 다른 '각도'방법이 있습니다.

단계 번호 1 : jquery.service.ts 파일 작성 .

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

단계. 아니. 2 : app.module.ts에 서비스 등록

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

단계 번호 3 : 서비스를 컴포넌트 my-super-duper.component.ts에 삽입

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

누군가 두 가지 방법의 장단점을 설명 할 수 있다면 매우 감사 할 것입니다. 서비스로 DI jquery 대 import * as $ from 'jquery';

내가 찾은 가장 효과적인 방법은 페이지 / 구성 요소 생성자 내부에서 시간이 0 인 setTimeout을 사용하는 것입니다. Angular가 모든 하위 구성 요소로드를 완료 한 후 다음 실행주기에서 jQuery를 실행하겠습니다. 몇 가지 다른 구성 요소 메서드를 사용할 수 있지만 setTimeout 내에서 실행할 때 최선을 다했습니다.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

다음은 나를 위해 일한 것입니다-webpack이있는 Angular 2

$유형으로 선언 any하려고했지만 JQuery 모듈을 사용하려고 할 때마다 (예 :) $(..).datepicker()함수가 아닙니다.

vendor.ts 파일에 Jquery가 포함되어 있으므로 간단히 다음을 사용하여 구성 요소로 가져 왔습니다.

import * as $ from 'jquery';

Jquery 플러그인 (bootstrap-datetimepicker와 같은)을 사용할 수 있습니다.

"InjectionToken"을 사용하여 가져 오려고 시도 할 수도 있습니다. 여기에 설명 된 것처럼 : 유형 정의없이 Angular / Typescript에서 jQuery 사용

jQuery 전역 인스턴스를 주입하여 사용할 수 있습니다. 이를 위해 타입 정의 나 타이핑이 필요하지 않습니다.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

app.module.ts에서 올바르게 설정 한 경우 :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

구성 요소에서 사용할 수 있습니다.

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

공식 문서 로 글로벌 라이브러리 설치

1. npm에서 설치 :

   npm install jquery --save

2. 필요한 스크립트 파일을 스크립트에 추가하십시오.

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

서버가 실행 중이면 앱을 다시 시작해야합니다.

단일 구성 요소 내부에서 사용하려면 구성 요소 내부를 사용 import $ from 'jquery';하십시오.

다른 사람들은 이미 게시했습니다. 하지만 여기에 간단한 예를 들어서 새로운 이민자를 도울 수 있습니다.

1 단계 : index.html 파일 참조에서 jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

2 단계 : 버튼 클릭시 div를 표시하거나 div를 숨기고 싶다고 가정하십시오.

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

3 단계 : 구성 요소 파일에서 가져 오기는 $를 다음과 같이 선언합니다.

declare var $: any;

다음과 같은 함수를 만드는 것보다

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

최신 Angular 및 JQuery와 작동합니다.

먼저 다음과 같이 npm을 사용하여 jQuery를 설치하십시오.

npm install jquery — save

둘째, Angular CLI 프로젝트 폴더의 루트에있는 ./angular-cli.json 파일로 이동하여 스크립트를 찾으십시오. [] 특성을 다음과 같이 jQuery에 대한 경로를 포함하십시오.

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

이제 jQuery를 사용하려면 jQuery를 사용하려는 구성 요소로 가져 오기만하면됩니다.

import * as $ from 'jquery';
(or)
declare var $: any;

jQuery를 사용하여 클릭시 div에 애니메이션을 적용하는 아래 코드, 특히 두 번째 줄을 살펴보십시오. 우리는 jQuery에서 모든 것을 $로 가져오고 있습니다.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

jquery 설치

터미널 $ npm install jquery

(부트 스트랩 4의 경우 ...)

터미널 $ npm install popper.js

터미널 $ npm install bootstrap

그런 다음에 import문을 추가하십시오 app.module.ts.

import 'jquery'

(부트 스트랩 4의 경우 ...)

import 'popper.js'
import 'bootstrap'

이제 더 이상 필요하지 않습니다 <SCRIPT> JavaScript를 참조하기 위해 태그가 .

(사용하려는 모든 CSS는 여전히에서 참조해야합니다 styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Angular를 사용할 때는 jquery 라이브러리를 사용하지 마십시오. 각도 프레임 워크 용으로 생성 된 기능 및 라이브러리를 사용해보십시오. find () , html () , closest () 등과 같은 jquery 함수를 사용하려면 순수한 js를 사용하는 것이 좋습니다. 예 : querySelector () , innerHTML , parentElement 등 ...