[문서] 1.4 getElement*, querySelector*로 요소 검색하기 병합충돌 해결

Author: BHyeonKim

2-ui/1-document/04-searching-elements-dom/article.md

@@ -54,13 +54,8 @@
 </script>
 ```
 
-<<<<<<< HEAD
 ```warn header="id를 따서 만들어진 전역변수를 요소 접근 시 사용하지 마세요."
 `id`에 대응하는 전역변수는 [명세서](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem)의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작입니다.
-=======
-```warn header="Please don't use id-named global variables to access elements"
-This behavior is described [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object), but it is supported mainly for compatibility.
->>>>>>> upstream/master
 
 브라우저는 스크립트의 네임스페이스와 DOM의 네임스페이스를 함께 사용할 수 있도록 해서 개발자의 편의를 도모합니다. 그런데 이런 방식은 스크립트가 간단할 땐 괜찮지만, 이름이 충돌할 가능성이 있기 때문에 추천하는 방식은 아닙니다. HTML을 보지 않은 상황에서 코드만 보고 변수의 출처를 알기 힘들다는 단점도 있습니다.
 
@@ -75,13 +70,8 @@ This behavior is described [in the specification](https://html.spec.whatwg.org/m
 같은 `id`를 가진 요소가 여러 개 있으면 `document.getElementById`같이 `id`를 이용해 요소를 검색하는 메서드의 동작이 예측 불가능해집니다. 검색된 여러 요소 중 어떤 요소를 반환할지 판단하지 못해 임의의 요소가 반환되죠. 문서 내 동일 `id`가 없도록 해 이런 일을 방지하도록 합시다.
 ```
 
-<<<<<<< HEAD
 ```warn header="`anyNode.getElementById`가 아닌 `document.getElementById`"
 `getElementById`는 `document` 객체를 대상으로 해당 `id`를 가진 요소 노드를 찾아 줍니다. 문서 노드가 아닌 다른 노드엔 호출할 수 없습니다.
-=======
-```warn header="Only `document.getElementById`, not `anyElem.getElementById`"
-The method `getElementById` can be called only on `document` object. It looks for the given `id` in the whole document.
->>>>>>> upstream/master
 ```
 
 ## querySelectorAll [#querySelectorAll]
@@ -126,11 +116,7 @@ querySelectorAll에는 `:hover`나 `:active` 같은 CSS 선택자의 가상 클
 
 지금까지 소개한 모든 메서드는 DOM 검색에 쓰입니다.
 
-<<<<<<< HEAD
 [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches)는 DOM을 검색하는 일이 아닌 조금 다른 일을 합니다. 이 메서드는 요소 `elem`이 주어진 CSS 선택자와 일치하는지 여부를 판단해줍니다. 일치한다면 `true`, 아니라면 `false`를 반환하죠.
-=======
-The [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`.
->>>>>>> upstream/master
 
 요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용합니다.
 
@@ -156,11 +142,7 @@ The [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) does n
 
 부모 요소, 부모 요소의 부모 요소 등 DOM 트리에서 특정 요소의 상위에 있는 요소들은 *조상(ancestor)* 요소라고 합니다.
 
-<<<<<<< HEAD
 메서드 `elem.closest(css)`는 `elem` 자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾을 수 있게 도와줍니다.
-=======
-The method `elem.closest(css)` looks for the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search.
->>>>>>> upstream/master
 
 `closest`메서드는 해당 요소부터 시작해 DOM 트리를 한 단계씩 거슬러 올라가면서 원하는 요소를 찾습니다. CSS 선택자와 일치하는 요소를 찾으면, 검색을 중단하고 해당 요소를 반환합니다.
 
@@ -171,13 +153,8 @@ The method `elem.closest(css)` looks for the nearest ancestor that matches the C
 
 <div class="contents">
   <ul class="book">
-<<<<<<< HEAD
     <li class="chapter">1장</li>
     <li class="chapter">2장</li>
-=======
-    <li class="chapter">Chapter 1</li>
-    <li class="chapter">Chapter 2</li>
->>>>>>> upstream/master
   </ul>
 </div>
 
@@ -386,11 +363,7 @@ DOM에서 원하는 노드를 검색하게 해주는 주요 메서드 6가지는
 </tbody>
 </table>
 
-<<<<<<< HEAD
 아마 실무에선 `querySelector`나 `querySelectorAll`을 가장 많이 사용하실 겁니다. `getElementBy`로 시작하는 메서드는 대개 오래된 스크립트에서 만날 수 있는데, 일부 이 메서드가 꼭 필요한 상황에서 쓰이는 경우도 있습니다.
-=======
-By far the most used are `querySelector` and `querySelectorAll`, but `getElement(s)By*` can be sporadically helpful or found in the old scripts.
->>>>>>> upstream/master
 
 이 외에 알아두면 좋을 만한 메서드는 아래와 같습니다.