<!--
찾기
document.getElementById(id)
.getElementByTagName(name)
.getElementsByClassName(name)
div 박스의 값을 id로 지정하고 그안의 p태그로 다시 값 조회할때 주의점...id가 아니 다른것은 유일한 것이 아니라서 여러개의 값을 주고 단 하나의 태그라고 하더라도 배열처럼 인덱스를 주어야만 원하는 값을 받는다.
---------------------------------------------------------------------------- .
변경
element.innerHTML //태그안의 값을 반영해줌.
.attribute=new value
.style.property=new stlye
요수 추가 및 삭제
document.createElement(element) //개체생성
.remeveChild(element) //자식개체삭제하기
.appendChild(element) //자식개체 추가하기
.replaceChild(new, old) //old자식개체를 new개체로 변경
.write(test)
<div>
<span id="childSpan"> foo바</span>
</div>
<script>
//빈요소노드 생성,,,ID, 속성 콘텐츠 없다.
const sp1=document.createElement("span");
console.log(sp1); //span
//'newspan이라는 id속성을 부여
sp1.id="newSpan";
console.log(sp1.getAttribute("id")); // newSpan
//일부 콘텐츠를 만듬
const sp1_content=document.createTextNode("new replace");
//새요소에 적용
sp1.appendChild(sp1_content);
console.log(sp1); //<span id="newSpan">new replace</span>
//교체할 기존 노드엔 대한 참조 작성
const sp2=document.getElementById("childSpan");
console.log(sp2); //<span id="childSpan"> foo바</span>
const parentDiv=sp2.parentNode; //부모 요소 지정
console.log(parentDiv); //부모 div가 나옴...
//기존 노드 sp2르,ㄹ 새 스펜요소 sp1로 교체
parentDiv.replaceChild(sp1,sp2);
</script>
foo바 가 new replace로 변경까지.
--------------------------------------------------
속성
.hasAttribute(name) //속성의 존재확인
.getAttribute(name) //속성값을 가져옴
.setAttribute(attribute, value) ///속성값을 변경함.
.removeAttribute(name)- //속성값을 제거함.
속성값을 2가지로 변경할수 있다.
1. setAttribute('속성명', '변경값')....
2. input. id='newId'; alert(input.getAttribute('id')); //newId 로 갱신된다.
그러나 value처럼 동기화 속성에서는 안먹힘으로 1번째 방법으로 하길 바람.
'JAVASCRIPT > 함수들' 카테고리의 다른 글
| querySelectorAll (0) | 2022.08.28 |
|---|---|
| addEnevtListener()메서드 (0) | 2022.08.28 |
| 이벤트 처리: 마우스 지나가거나 클릭등 (0) | 2022.08.28 |
| 정규표현식 (0) | 2022.08.25 |
| 이벤트 중단방법 (0) | 2022.08.25 |
