document 들....

    <!--

        찾기

        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번째 방법으로 하길 바람.