javaScript. (11) Document 객체

Document 객체

 

- Window 객체(=전역객체)에 속해있음.

 

- Document는 HTML에 관한 것을 담당. (=웹페이지)

>> 대부분의 것이 태그(tag)를 선택하고 조작하는데 사용됨.

 

 

---

 

- 요소 선택

>> 선택한 부분의 html 코드를 반환

 

1) document.getElementById(아이디)

document.getElementById('id-name');      // <div id="id-name'> ... </div>

 

2) document.getElementsByClassName(클래스)

3) document.getElementsByName(이름)

4) document.getElementsByTagName(태그)

 

- Id와는 다르게 여러개가 선택되었으므로 배열의 형태로 해당 html 코드가 반환된다.

- 그래서 getElement가 아닌 getElements이다.

 

document.getElementByClassName('class-name');      // [<div class="class-name'> ... </div>]

document.getElementByName('hello');      // [<div name="hello'> ... </div>]

💡 name 속성 : form 컨트롤 요소의 값(value)를 서버로 전송하기 위한 속성.

>> class / id / name 의 차이와 사용 예시는 아래 포스팅 참고 🔻

 

Html. class와 id, name의 차이

document.getElementByName('hello');      // [<div name="hello'> ... </div>]

 

 

- query selector(CSS 선택자)

5) document.querySelector(선택자)

 

- css의 선택자로 선택할 수 있게 해준다.

- 아이디 : # / 클래스 : .(점) 

- 태그명[속성] 같이 할 수도 있고, 부모 > 자식 / 부모 자손 등 CSS 선택자 모두 사용 가능.

- 맨 처음것만 반환해줌. (최상단 요소)

 

 

6) document.querySelectorAll(선택자)

 

- 선택자에 해당하는 모든 요소들을 다 반환해줌. 

- 정적 nodeList로 반환함.  (배열과 비슷한 객체)

- for문 또는 forEach문을 사용함.

- , 를 사용하면 여러 요소를 한꺼번에 가져올 수 있음.

querySelectorAll("#id, .class");

 

 

 

-  생성 (태그 / 텍스트 / document)

7) document.createElement(태그명)

- document에 새로운 태그를 만들 때 사용.

- 변수를 통해 메모리에 저장됨. (바로 생기는 것이 X)

- 만든 태그를 추가하는 메소드가 필요함.

예> appendChild() 

const bgimage = document.creatElement("img");  // 태그 작성
bgimage.src = 'img/image1';                    // 속성 작성
document.body.appendChild(bgimage);            // body부분에 태그를 붙여넣음 ㅡ 자식노드로 추가

 

+) 그 外

 

document.createTextNode(텍스트);

- Node는 태그와 텍스트를 가리키는 명칭이다.

- 태그와 마찬가지로 바로 생기는 것이 아니라 변수를 통해 메모리에 저장됨.

document.write('hello');

 

Object.innerhtml = 'hello';

 

.createTextNode('hello');

 

document.createDocumentFragment()

- 가짜 document를 만듬.

- js로 document의 태그를 조작하는 것은 매우 성능이 떨어짐. (특히, 여러 태그를 반복문으로 추가할 경우)

>> 가짜 document를 만들어 추가한 후, 한번에 추가하면 좋음

 

 

 

-  접근

8) document.head / document.body

- 각각 html 문서의 head와 body에 접근하게 해줌.

 

9) document.anchors / document.links / document.forms / document.images / document.scripts

- 모든 html 앵커 / 링크 / 폼 / 이미지 / 스크립트에 접근하게 해줌.

 

10) document.title

- html 문서의 제목에 접근 가능. (변경도 가능)

document.title = '변경된제목';

 

---

REFERENCE

 

https://www.zerocho.com/category/JavaScript/post/573b3235a54b5e8427432947

(JavaScript) Document 객체

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!