노드 속성

✍️ dom 조작을 통한 UI 구현 할 때, 많이 사용하는 속성과 메서드를 정리 해보았다.

주요 속성

innerHTML

elem.innterHTML

• 요소 안의 html을 읽거나 수정 함.

<div id='target'>결과 : </div>

console.log(target.innerHTML); // 결과 :

let result = target.innerHTML;

const fruits = ['mango', 'apple', 'banana', 'strawberry'];
fruits.forEach(el => {
	result += `${el},` ;
});
result = result.slice(0, result.length-1);

target.innerHTML = result; //결과 : mango,apple,banana,strawberry

textContent

elem.textContent

• 요소 안의 텍스트에 접근.
• 태그를 구성 하는 특수 문자도 문자열로 처리 됨.

<div id="question">너의 이름은</div>
<div id="answer1"></div>
<div id="answer2"></div>

let name = '<b>mangojang</b>';
window.prompt(question.textContent, name);
answer1.innerHTML = name; // **mangojang**
answer2.textContent = name;// <b>mangojang</b>

hidden

elem.hidden

• 값은 boolean (true, false)

<div id="target">보인다!</div>

target.hidden = true;

id

elem.id

• elem: 모든 노드

let posturl = `/user/${target.id}`;

href

elem.href

• elem: <a>

alert(`${target.href}로 접속 하세요.`);

value

elem.value

• elem: <input>, <select>, <textarea>

<input id='phonenumber' type='number' value='01012345678'/>

const phonenumber = document.getElementById('phonenumber').value;
if(phonenumber.length < 11){
	alert('다시 확인 해주세요');
	document.getElementById('phonenumber').value = '';
}

type

elem.type

• elem: <input>

let checkboxes = [];
document.querySelectorAll('.inputs').forEach(el=>{
	if(el.type ==='checkbox'){
		checkboxes.push(el);
	}
});

dataset

• 표준이 아닌 속성
• 속성 값은 String.

활용

1. HTML → javascript or javascript→HTML 넘기고 싶은 값을 표시 할 때 사용.

2. 상태 값을 표시하여 상태 값에 따라 css를 적용 하는데 유용함.

   <div class="order" data-state="new">
     A new order.
   </div>
   
   <div class="order" data-state="pending">
     A pending order.
   </div>
   
   <div class="order" data-state="canceled">
     A canceled order.
   </div>

   .order[data-state="new"] {
     color: green;
   }
   
   .order[data-state="pending"] {
     color: blue;
   }
   
   .order[data-state="canceled"] {
     color: red;
   }

   • getAttribute, setAttibute, removeAttibute 메서드를 이용하여 속성값을 변경 → css 변경 → UI 변경 가능.

   const state = docuemnt.querySelector('.order').getAttribute('data-state');
   if (state ==='new'){
   	// .... state 에 따른 코드 진행
   	state.setAttribute('data-state', 'pending');
   }

data-

• data- 로 시작하는 속성은 dataset 속성으로 접근 가능.
  ex) data-state 는 elem.dataset.state로 접근 가능.
  
• 여러 단어로 구성된 속성은 카멜 표기법으로 접근 가능.
  ex) data-order-state 는 elem.dataset.orderState 로 접근 가능.
  

메서드

hasAttribute

elem.hasAttribute(name)

• 속성 존재 여부 확인

const foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
    // do something
}

getAttribute

elem.getAttribute(name)

• 속성 값을 가져옴.

let div1 = document.getElementById("div1");
let align = div1.getAttribute("align");

alert(align);

setAttribute

elem.setAttribute(name, value)

• 속성 값을 변경.

<button>Hello World</button>

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

removeAttribute

elem.removeAttribute(name)

• 속성 값 삭제.

document.getElementById("div1").removeAttribute("align");

참고 문헌

• https://ko.javascript.info/basic-dom-node-properties
• https://ko.javascript.info/dom-attributes-and-properties
• https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute
• https://developer.mozilla.org/ko/docs/Web/API/Element/getAttribute
• https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
• https://developer.mozilla.org/ko/docs/Web/API/Element/removeAttribute