<h2>노드.....Collection과 비슷한.....</h2>
<!--   인덱스 번호로 엑세스 할수 있다.-->
<p id="demo10"></p>

<script>
const myNodelist = document.querySelectorAll("p");  //  getElementByTagName 같게 적용하여 인덱스값이 필요함

document.getElementById("demo10").innerHTML =
"2번째 p요소의 내부 html은 다음과 같다.: " + myNodelist[1].innerHTML;  //2번째  태그의 값을 가져옴..

</script>

------------------
<button onclick="myFunction2()">Try it</button>
<script>
    function myFunction2() {
      const myNodelist = document.querySelectorAll("p");
      for (let i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.color = "red";
      }
      myNodelist[1].style.color = "blue"; //2번째태그의 글자를 파란색으로 변경시킨다.
    }
    </script>

'JAVASCRIPT > 함수들' 카테고리의 다른 글

addEnevtListener()메서드  (0) 2022.08.28
이벤트 처리: 마우스 지나가거나 클릭등  (0) 2022.08.28
document 들....  (0) 2022.08.28
정규표현식  (0) 2022.08.25
이벤트 중단방법  (0) 2022.08.25
이예제에서는 addEnevtListener()메서드를 사용하여 사용자가 단추를 클릭할때 함수를 실행
</h2>
    <button id="myBtn">Try it</button>
    <script>
        document.getElementById("myBtn").addEventListener("click", myFunction);

        function myFunction() {
        alert ("Hello World!");
        }
    </script>

    <h3>많은 이벤트 추가</h3>  
    <button id="myBtn2">Try it</button>
    <p id="demo6"></p>

    <script>
        var z = document.getElementById("myBtn2");
        z.addEventListener("mouseover", myFunction);
        z.addEventListener("click", mySecondFunction);
        z.addEventListener("mouseout", myThirdFunction);

        function myFunction() {
            document.getElementById("demo6").innerHTML += "Moused over!<br>";
        }
        function mySecondFunction() {
             document.getElementById("demo6").innerHTML += "Clicked!<br>";
        }
        function myThirdFunction() {
            document.getElementById("demo6").innerHTML += "Moused out!<br>";
        }
    </script>

-------------------------------------


    <p>화면과 관련 예제</p>
   
    <p>랜덤수를 찾아 화면으로 보여줌.</p>
   
    <p id="demo7"></p>
   
    <script>
    window.addEventListener("resize", function(){  //resize 화면이 변경될때.
      document.getElementById("demo7").innerHTML = Math.random();
    });
    </script>

 

'JAVASCRIPT > 함수들' 카테고리의 다른 글

querySelectorAll  (0) 2022.08.28
이벤트 처리: 마우스 지나가거나 클릭등  (0) 2022.08.28
document 들....  (0) 2022.08.28
정규표현식  (0) 2022.08.25
이벤트 중단방법  (0) 2022.08.25
<h2>이벤트 처리기</h2>
<!--
    html 이벤트의 예:
    사용자가 마우스를 클릭할 때
웹 페이지가 로드된 경우
이미지가 로드된 경우
마우스가 요소 위로 이동할 때
입력 필드가 변경되는 경우
HTML 양식을 제출하는 경우
사용자가 키를 칠 때
-->
<!--<h1 onclick="this.innerHTML='Ooops!'">글자 클릭하세요</h1>-->
<h2 onclick="changeText(this)"> 글자를 클릭하세요.</h2>
<script>
    function changeText(id){
        id.innerHTML="Ooops!";
    }
</script>  // 클릭하면 Ooops! 으로 변경

<button onclick="displayDate()" >날짜 시간 표시</button>
<script>
    function displayDate(){
        document.getElementById("demo4").innerHTML=Date();
    }
</script>
<p id="demo4"></p>  //이안에 지금의 날짜와 시간이 표시된다.
<hr>
<!-- 온, 언 로드는 페이지 들어가거나 나갈때 트리거 됨-->
<p id="demo5"></p>
<script>
    function checkCookies(){
        var text="";
        if(navigator.cookieEnabled==true){ 
/navigator.cookieEnabled쿠키가 활성화되었는지 여부를 나타내는 부울 값을 반환
            text="cookies are enabled.";            
        }else{
            text="Cookies are not enabled.";
        }
        document.getElementById("demo5").innerHTML=text;
        document.getElementById("demo5").style.background = "green";
    }
</script>
<!--마우스 지나갈때ㅣ....-->
    <div onmouseover="mOver(this)" onmouseout="mOut(this)"
    style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
    Mouse Over Me</div>

    <script>
    function mOver(obj) {
    obj.innerHTML = "Thank You"  //지나가면 표시되는 문구
    }

    function mOut(obj) {
    obj.innerHTML = "Mouse Over Me" //평소에 표시되는 문구
    }
    </script> 

<hr>
        <!--마우스 클릭-->
    <div onmousedown="mDown(this)" onmouseup="mUp(this)"
    style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
    Click Me</div>

    <script>  //클릭되면 글씨가 변경됨
        function mDown(obj) {
          obj.style.backgroundColor = "#1ec5e5";
          obj.innerHTML = "Release Me";
        }
       
        function mUp(obj) {
          obj.style.backgroundColor="#D94A38";
          obj.innerHTML="Thank You";
        }
        </script>

<h2>

 

'JAVASCRIPT > 함수들' 카테고리의 다른 글

querySelectorAll  (0) 2022.08.28
addEnevtListener()메서드  (0) 2022.08.28
document 들....  (0) 2022.08.28
정규표현식  (0) 2022.08.25
이벤트 중단방법  (0) 2022.08.25
    <!--
        찾기
        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

+ Recent posts

티스토리툴바