getElementsByTagNameNS

getElementById를 타이핑하다 자동완성으로 어쩌다 나온 getElementsByTagNameNS를 보았다.
TagName은 알겠는데 NS는 뭐지...?

NS는 NameSpace의 약자
그렇다면 네임스페이스는 뭘까?

위키피디아에서는

이름공간 또는 네임스페이스(Namespace)는 개체를 구분할 수 있는 범위를 나타내는 말로 일반적으로 하나의 이름 공간에서는 하나의 이름이 단 하나의 개체만을 가리키게 된다.

무슨 말인지 모르겠다

1시간 더 찾아본 결과를 바탕으로 내 방식대로 설명해 보자면

네임스페이스라는 건
이서현이 회사에 3명 있다
구분하기 위해 팀명을 붙인다고 생각하면 된다
개발팀 이서현,
디자인팀 이서현,
기획팀 이서현으로 구분하고
"개발팀 이서현"이라고 불렀을 때
누굴 부르는지 알 수 있기 때문에 혼란이 생기지 않을 수 있는 거다
이게 바로 네임스페이스라고 생각하면 된다

또 다른 예시로
같은 이름을 가진 파일 2개가 있다
사용할 때 어떤 게 내가 원하는지 모르기 때문에
각각 다른 폴더에 넣어 사용한다고 생각하면 된다

즉, 1이라는 폴더에 들어간 index.html 파일을 쓸지
2라는 폴더에 들어간 index.html 파일을 쓸지 정하는 거라고 생각하면 된다

그리고
html xmlns="http://www.w3.org/1999/xhtml" 여기에도 ns가 들어갔다
그리고 내가 종종 사용하는 svg태그에도 들어간다
svg xmlns="http://www.w3.org/2000/svg"
svg는 xml기반의 그래픽이라고 했다

그렇다는 말은
xml이라는 네임스페이스(=폴더)를 가져와 그 안에 있는 svg태그(=파일)를
사용하겠다 라고 이해하면 되지 않을까....?

맞는지 아닌지 모르겠지만
비슷한 경우가 제이쿼리를 사용할 때
script src="http://code.jquery.com/jquery-latest.min.js"를 적용하는 게
비슷하지 않을까 생각해 본다....

그렇다면 어떻게 사용할까?
document 또는 element.getElementsByTagNameNS(namespaceURI, name);로 쓰면 된다

URI (Uniform Resource Identifier)는 인터넷 자원을 식별하는 문자열이다. 가장 일반적인 URI는 인터넷 도메인 주소를 식별하는 URL (Uniform Resource Locator)이다. 이 Namespace를 선언할 때에는 URI를 사용하는 이유는 고유한 이름을 부여하기 위해서이기 때문이다. 일반적으로는 네임스페이스에 대한 정보를 가지고 있는 페이지를 사용한다.

namespaceURI의 자리에는
namespaceURI유형의 DOMString이 들어가거나,
모든 네임스페이스와 일치하는 특수 값 ""를 넣어도 된다

name의 자리에는
name 유형의 DOMString이 들어가거나,
모든 로컬네임과 일치하는 특수 값 ""를 넣어도 된다

다른 언어에서 사용방법이 있지만 잘 모르기 때문에 mdn에 나와 있는 예시를 가져왔다

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>getElementsByTagNameNS example</title>

<script type="text/javascript">

function getAllParaElems()
{
  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");

  var num = allParas.length;
  alert(num);
}


function div1ParaElems()
{
  // var div1 = document.getElementById("div1");
  // var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");

  // 위 두줄이랑 똑같이 출력됨
  // 모든 엘리먼트에 일치하는 특별 값 * 을 넣을 수도 있다
  // var div1 = document.getElementsByTagNameNS("*", "div");
  var div1 = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "div");
  var div1Paras = div1[0].getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
// HTMLCollection 을 반환하기 때문에 div1[0]으로 적었다
  var num = div1Paras.length;
  alert(num);
}
</script>
</head>

<body style="border: solid green 3px">
  <p>Some outer text</p>
  <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>
    </div>

  <p>Some outer text</p>
  <p>Some outer text</p>

  <button onclick="getAllParaElems();">
   show all p elements in document</button><br />

  <button onclick="div1ParaElems();">
   show all p elements in div1 element</button>
</body>
</html>

~~mdn에서 복붙할 때 확장자를 xhtml로 해야 한다고 하는데 모르고 .html에 해도 결과는 똑같이 나왔다~~

위 예시에서 헷갈리지 말아야 할 것은
documnet.getElementsByTagNameNS과
element.getElementsByTagNameNS는
다르다는 점이다
element.getElementsByTagNameNS는 검색이 지정된 요소의 하위 항목으로 제한된다는 점을
제외하면 document.getElementsByTagNameNS와 유사하다

(namespaceURI, name)의 자리에 "✩"를 넣을 수도 있는데
document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "✩");는
모든 요소를 다 가져오고

element.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "✩");는
해당 노드를 포함하지 않고 하위 요소들을 모두 가져올 수 있다

~~그리고 당연히 ("index.html", "p");는 당연히 아무것도 안 나온다~~
부끄럽지만 namespaceURI개념을 몰라
처음 혼자 해볼 때 직접 해본 방법이다 아이 부끄러

Author And Source

이 문제에 관하여(getElementsByTagNameNS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hamkke/getElementsByTagNameNS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

getElementsByTagNameNS

Author And Source

좋은 웹페이지 즐겨찾기