반응형
DOM탐색
어떠한 태그의 상위,하위 태그 사용시
- 태그간의 관계를 가지고 선택하는 경우
- 페이지의 크기가 작을 경우 직접적으로 원하는 태그를 선택하지만 커질수록 간접적으로 관계를 가지고 태그를 선택하는 경우가 효율적
객체의 종류
- document : 문서에 접근할 때 (문서객체)
- Element : tag, 요소 등 (태그객체) ->객체생성 (getElement...()이용): 인스턴스화인스턴스 -메모리에 올라가있는 것
var doc =document.getElementByID() doc.title , doc,class, doc.onclick- Attribute : 속성 id, class, title, style .. (속성개체)
- Text : 태그 안의 내용 (텍스트객체)
- Node : html을 구성하는 모든 요소들을 포함하는 객체
객체 생성 방법
1. DOM탐색 메서드를 이용(직접선택)
2. 속성을 이용(간접선택 : 상대적위치)
| 이름 | 정의 | 반환타입 |
|---|---|---|
| parentNode | 타겟요소의 부모요소를 구함 | node(모든요소) |
| parentElement | 타겟요소의 부모요소를 구함 | element(tag요소) |
| childNodes | 타겟요소의 자식요소를 구함 | node(모든요소) |
| childElements | 타겟요소의 자식요소를 구함 | element(tag요소) |
| firstChild/lastChild | 자식요소의 첫번째/마지막요소를 구함 | node(모든요소) |
| firstElementChild/lastElementChild | 자식요소의 첫번째/마지막요소를 구함 | element(tag요소) |
HTML
<body>
<div>
<p>child01</p>
<p>child02</p>
<p>child03</p>
</div>
<button onclick="searchPar()">부모탐색</button>
<button onclick="searchChi()">자식탐색</button>
<button onclick="firstLastChi()">맨앞뒤탐색</button>
<button onclick="siblingTest()">인접태그탐색</button>
</body>
JavaScript
function searchPar(){
//직접선택
var child02=document.getElementsByTagName("p")[1];
//간접선택
var div=child02.parentElement;
// var div=child02.parentNode;
console.log(div.tagName);
}
출력
DIV
function searchChi(){
var div=document.getElementsByTagName("div")[0];//target요소
var divChildNodes=div.childNodes; //[n,p,n,p,n,p,n]
console.log(divChildNodes.length+":"+divChildNodes[1].nodeName);
var divChildElements=div.children;//[p,p,p]
console.log(divChildElements.length+":"+divChildElements[0].nodeName);
}
출력
7 : P
3 : P
function firstLastChi(){
var div=document.getElementsByTagName("div")[0];//target요소
var firstChi=div.firstChild;
var firstChiEle=div.firstElementChild;
console.log(firstChi.nodeName);
console.log(firstChiEle.textContent);
var lastChi=div.lastChild;
var lastChiEle=div.lastElementChild;
console.log(lastChi.nodeName);
console.log(lastChiEle.textContent);
}
출력
#text
child01
#text
child03| 이름 | 정의 | 반환타입 |
|---|---|---|
| previousSibling/nextSibling | 타겟요소의 형제요소를 구함 | node |
| previousElementSibling/nextElementSibling | 타겟요소의 형제요소를 구함 | element |
HTML
<body>
<div>
<p>child01</p>
<p>child02</p>
<p>child03</p>
</div>
<button onclick="siblingTest()">인접태그탐색</button>
</body>
JavaScript
function siblingTest(){
var child02=document.getElementsByTagName("p")[1];
var preP=child02.previousSibling;
var nextP=child02.nextSibling;
var preEleP=child02.previousElementSibling;
var nextEleP=child02.nextElementSibling;
console.log(preP.nodeName +":"+preEleP.textContent);
console.log(nextP.nodeName +":"+nextEleP.textContent);
}
출력
#text : child01
#text : child033. create메서드를 이용하여 새롭게 생성Element객체
createElement("태그이름")
- Element객체반환
- setAttribute() : 태그.setAttribute("속성명","속성값") -> 재사용 불가
- setAttributeNode() : 태그.setAttributeNode(Attribute객체이름) -> 속성의 재사용가능Attribute객체
createAttribute("속성이름")
- Attribute객체반환
- nodeValue : 속성객체에 값을 지정할 때 : .nodeValue="border : 2px solid blue"Text객체
createTextNode("text")
- Text객체반환
코드
<script type="text/javascript">
function eleCreate(){
var div=document.createElement("div"); // 1.<div></div>생성
var styleAttr=document.createAttribute("style");//2.style=""생성
var txt =document.createTextNode("엘리먼트 생성");//3."엘리먼트생성" 생성
//속성 적용
styleAttr.nodeValue="border:2px solid red;";
div.setAttributeNode(styleAttr);
// div.setAttribute("style","border: 2px solid red");
//text객체
div.appendChild(txt);
// <div style="border:2px solid red;">엘리먼트생성</div>
document.getElementById("main").appendChild(div);
}
</script>
</head>
<body>
<button onclick="eleCreate()")>엘리먼트 생성하기</button>
<div id="main"></div>
</body>
</html>기존방식으로 하면
div.textContent("엘리먼트 생성")
div.style.border="2px solid blue"
appendChild를 사용해서 추가하면 기존의 태그다음에 계속 쌓이기 때문에 따로 그 부분을 처리해 주어야함
-> inner.HTML
기타참고
- text객체
Element객체.appendChild : 자식요소 끝으로 붙이는 메서드 - 속성에 관련된 메서드
- setAttribute("name","value") : 속성을 엘리먼트에 추가 (리터럴)
- setAttributeNode(Attr name) : 속성을 엘리먼트에 추가(객체)
- getAttribute("name") : "name"속성의 값을 가져옴
- hasAttribute("name") : "name"속성이 존재하는지 여부(true/false)
반응형
'Front-end > Javascript' 카테고리의 다른 글
| (JavaScript)DOM -appendChild,insertBefore (0) | 2023.03.03 |
|---|---|
| (JavaScript)window객체-open,close (0) | 2023.02.28 |
| (JavaScript)날짜 객체 (0) | 2023.02.27 |
| (JavaScript)로또 (0) | 2023.02.27 |
| (JavaScript)함수 (0) | 2023.02.23 |