국비지원 79일 (attr ,porp,data 기타등등)

@ 요번에 개인플로젝트를 진행하면서 백엔드를 위한 개인프로젝트를 진행하고 있지만, 개인프로젝트를 진행함에 있어 

개인으로 하다보니 ui부분도 같이 진행하다 보니 많이 배우게 되는 부분들이 있었다.

앞으로 개인프로젝트를 하면서 좀더 알면 좋을만한 부분들을 다뤄볼예정입니다.

 

※ attr , porp , data차이점

1.attr의 경우네는 요소 내의 값과 그 이외의 값들을 지정해서 속성 값을 설정할 때 사용한다

 - 여기서 요소의 경우에 예를 들면 html 내에서 사용하는 각 요소들을 지칭

 - <input>에서의 경우에는 checked 속성을 사용할 수가 없다. 하지만 jquery으ㅏ attr의 속성을 사용하면 checked의 값들을 지정해서 사용할 수 있다.

 - attr 의경우 key-value 형태로 값을 강제로 입력할 수 있다.

 - 즉 html 내에서 속성이 명시되어있지 않아서 attr로 명시하고 싶은 속성명을 입력해 그 값을 저장할 수 있다.

 - attr 은 엘리먼트의 속성 값을 가져오거나 변경할 수 있고, 또 html에 명시 안된 속성을 새로 추가할 때 사용할 수 있는 함수이다.

 - 하나의 인자를 주면 해당 속성 값만을 조회하고 두 개를 주면 해당 속성 값을 변경한다.

<script>

    //"testName" 를 가져옴
    $("#testDiv").attr("name");
    
    
    //html태그에 없는 속성을 추가할떄도 아래와같이 사용해서 추가할수있따.
    //name 속성 "testName" 을 "attrName" 으로 변경
    $("#testDiv").attr("name", "attrName");
    
</script>
.
.
<div id="testDiv" name="testName">TestContent</div>
또는
<div id="testDiv">TestContent</div> -> 이렇게 속성명이 없는값도 아래와같이 명시하면
$("#testDiv").attr("name", "attrName"); 
<div id="testDiv" name="attrName">TestContent</div> 이런식으로 추가되어 사용할수있따.
-> 위방식은 실제html태그안에는 추가안된것처럼보이지만 f12개발자도구에서 보면 추가되있는것을 볼수있다.

 

 

2. prop의 경우에는 요소 내의 값들만 지정해서 속성 값을 설정할 때 사용한다.

 -  html에서 사용하는 요소들만 사용해서 값들을 지정해서 속성을 지정할 때 사용한다.

 -  엘리먼트의 속성 값을 가져오거나 변경한다는 점에서 attr ( )와 유사하지만,

 -  아무 속성 값이 아니라 true와 false 값 만을 가지는 속성 값을 관리한다.

<script>

    //true 를 가져옴
    $("#testDiv").prop("hidden");
    
    //readonly 속성 "true" 를 "false" 로 변경
    $("#testDiv").prop("readonly", "false");
    
</script>
.
.
<div id="testDiv" hidden="true" readonly="true">TestContent</div>

 

 

3. data의 경우에는 요소 내의 값들 이외의 값과 요소내의 값들을 지정할 때에 사용한다.

-  데이터의 경우에는 1.6 jquery 이상의 버전에서 사용되면 html요소의 범위 내에서 지정해서 사용하는 값들을 넣을 때 사용한다.

 

※(add, remove, toggle , val관련)

1. addclass()

 - 클래스가 없는 엘리먼트에 class 속성을 추가한다.

<script>

    //class 속성 "testClass" 를 추가한다.
    $("#testDiv").addClass("testClass");
    
</script>
.
.
<div id="testDiv">TestContent</div>

 

2. removeclass()

 -  클래스가 있는 엘리먼트의 class 속성을 삭제한다.

<script>

    //class 속성 "testClass" 를 삭제한다.
    $("#testDiv").removeClass("testClass");
    
</script>
.
.
<div id="testDiv" class="testClass">TestContent</div>

 

3. toggleclass()

 - 엘리먼트가 인자로 넣은 class 를 가지고 있다면 제거하고 가지고 있지 않다면 생성한다.

<script>

    //class "testClass" 가 없으니 추가한다.
    $("#testDiv").toggleClass("testClass");
    
    //위에서 class "testClass" 를 생성했기에 이를 삭제한다.
    $("#testDiv").toggleClass("testClass");
    
</script>
.
.
<div id="testDiv">TestContent</div>

 

4. val()

 - 엘리먼트가 가지고 있는 value 속성 ( 값 ) 을 관리한다.

 -  인자를 넣지 않으면 value를 가져오고 인자를 넣어주면 value 를 인자 값으로 변경한다.

<script>

    //value 속성 "testValue1" 을 가져온다
    $("#testDiv").val();
    
    //value 속성 "testValue1" 을 "testValue2" 로 바꾼다
    $("#testDiv").val("testValue2");
    
</script>
.
.
<div id="testDiv" value="testValue1">TestContent</div>

 

※ 데이터셋 속성추가

 -> HTML 어트리뷰트 추가 메서드를 사용해

    엘리먼트노드. setAttribute("속성명", "속성값");

    방식으로 노드에 데이터셋 속성을 추가합니다.

    추가한 속성은 DOM 노드의 dataset 맵 속성으로 등록되며, HTML 태그 속성으로 추가됩니다.

    또는, DOM 프로퍼티 접근 방식으로 

    엘리먼트노드. dataset. 새 데이터셋속성이름 = "속성값";

    방법으로도 데이터셋 속성을 추가할 수 있습니다.

<div id="slider" data-min="3" data-max="50" data-itemtype="noodle">컵라면</div>

let item = document.querySelector('#slider');

item.setAttribute('data-auto', true);
console.log(item.dataset.auto);
item.dataset.size = "big";
console.log(item.getAttribute('data-size'));