자바스크립트에서 Attr(dom의 속성) 동작 설명 예시

저자：Eve Cole 업데이트 시간：2025-02-14 23:24:02

다음과 같이 코드 코드를 복사합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<머리>

<스크립트 유형="텍스트/자바스크립트">

//Atr(속성)은 노드이지만 firstChild 및 childNodes를 사용하여 접근할 수 없습니다.

함수 testBtn() {

// var myNode = document.getElementById("btn");//요소 태그 가져오기

// var myNodeName = myNode.nodeName; // 위 라벨의 이름을 버튼으로 가져옵니다.

// var x = myNode.attributes["onclick"].nodeType; //atrributes는 속성 배열입니다. 이 문장의 의미는 속성이 'btn'인 nodeType=2를 찾는 것입니다.

// if (x == 2) {

// Alert("속성 노드에 접근하고 있습니다!");

// }

//다음은 노드의 속성을 수정하는 코드입니다===================================== ==== =========================

//================================================ ============================================

var myNode = document.getElementById("btn");//요소 태그 가져오기

var x = myNode.getAttribute("id");//레이블의 id 속성을 가져옵니다.

myNode.setAttribute("value", "test");//레이블의 id 속성을 수정합니다.

var y = myNode.getAttribute("value");

Alert("id의 속성이 "" + x + ""에서 "" + y + """로 변경되었습니다.);

//다음은 요소에 속성을 추가하는 것입니다======================================== === ============================

//================================================ ============================================

var myAtrr = document.createAttribute("class");

myAtrr.nodeValue = "classStyle";

myNode.setAttribute(myAtrr);

//getAttributeNode와 getAttribute의 차이점은 속성 값을 얻는 것입니다 - getAttribute()

//getAttribute("") 메소드는 속성 값을 반환합니다.

//속성값 가져오기 - getAttributeNode()

//getAttributeNode("") 메소드는 속성 노드를 반환하고, getAttributeNode('').value는 노드 값을 가져옵니다.

//브라우저마다 결과가 다릅니다.============================= ====== ==============

if (myNode.getAttributeNode("class") != null)

Alert("성공적으로 추가되었습니다!!");

또 다른

Alert("성공적으로 추가되지 않았습니다.");

//다음은 제거된 속성의 값입니다======================================== === =================================

//================================================ ===========================================

// myNode.removeAttribute("class");

// if (myNode.getAttribute("class") == null)

// Alert("삭제 성공!!");

//또 다른

// Alert("성공하지 못했습니다.");

var delNode=myNode.getAttributeNode("class");

if (myNode.getAttribute("class") == null)

Alert("삭제 성공!!");

또 다른

Alert("성공하지 못했습니다.");

}

</script>

</head>

<본문>

</body>

</html>

Node가 있는 매개변수 방법과 Node가 없는 매개변수 방법의 차이점에 주의하세요.