자바스크립트 학습노트(20) 요소의 특성(속성) 획득 및 설정_기본지식
May 16, 2016 pm 05:52 PM
요소
특성
이 html 섹션에서는 다음을 예로 들어 설명합니다.
코드 복사 코드는 다음과 같습니다.
<div id ="myDiv" class="bd" title="나는 div입니다">
<img id="img1" />
<a id="myA" href = "http://www.baidu.com">Baidu</a>
코드 복사 코드는 다음과 같습니다.
var div = document.getElementById(" myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//요소 속성 가져오기
alert(div.id ); //"myDiv"
alert(div.className); //"bd", class는 예약된 키워드이므로 div.class가 아닙니다.
alert(div.title); am div"
alert( a.href); //http://www.baidu.com
//요소 속성 설정
div.id = "myDiv2"; //id를 "myDiv2"로 변경 "
div.className = "ft"; //class는 "ft"로 변경됩니다. "ft"라는 스타일이 있으면 즉시 "ft" 스타일로 변경되며, 브라우저는 즉시 응답합니다
div.title = "나는 myDiv2입니다" ; //제목을 "나는 myDiv2입니다"로 변경합니다.
div.align = "center"; //가운데 정렬 설정
img.src ="images/img1. gif"; //이미지 경로 설정
a.innerHTML = "Sina"; //"Baidu"가 "Sina"로 변경됩니다.
a.href = "http://www.sina.com.cn" ; //하이퍼링크 재설정
2. getAttribute(), setAttribute() 및 RemoveAttribute() 메서드를 통해 요소의 속성을 가져오고 설정하고 제거합니다(권장되지 않음, 처음 두 메서드). IE6 및 7에서는 예외가 있으며 세 번째 방법 IE6은 지원되지 않습니다. 사용자 정의 속성을 설정할 때 사용할 수 있습니다. var img = document.getElementById("img1");
var a = document.getElementById("myA");
//요소 속성 가져오기
alert(div.id ); //"myDiv"
alert(div.className); //"bd", class는 예약된 키워드이므로 div.class가 아닙니다.
alert(div.title); am div"
alert( a.href); //http://www.baidu.com
//요소 속성 설정
div.id = "myDiv2"; //id를 "myDiv2"로 변경 "
div.className = "ft"; //class는 "ft"로 변경됩니다. "ft"라는 스타일이 있으면 즉시 "ft" 스타일로 변경되며, 브라우저는 즉시 응답합니다
div.title = "나는 myDiv2입니다" ; //제목을 "나는 myDiv2입니다"로 변경합니다.
div.align = "center"; //가운데 정렬 설정
img.src ="images/img1. gif"; //이미지 경로 설정
a.innerHTML = "Sina"; //"Baidu"가 "Sina"로 변경됩니다.
a.href = "http://www.sina.com.cn" ; //하이퍼링크 재설정
getAttribute() 메서드는 요소 속성을 가져오는 데 사용됩니다. 요소의 속성 이름을 가져오는 하나의 매개 변수를 허용합니다.
setAttribute() 메서드는 요소의 속성을 설정하는 데 사용됩니다. 요소의 속성 이름과 속성 값을 가져오는 두 가지 매개 변수를 허용합니다.
removeAttribute() 메서드는 요소의 속성을 제거하는 데 사용됩니다. 제거할 요소의 속성 이름인 하나의 매개변수를 허용합니다.
코드 복사 코드는 다음과 같습니다.
var div = document.getElementById("myDiv");
var img = document.getElementById("img1")
var a = document.getElementById("myA"); >//요소 속성 가져오기
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")) //"bd" className이 아니라 클래스입니다. 위와 다릅니다
alert(div.getAttribute("title")); //"나는 div입니다"
alert(a.getAttribute("href")) //http ://www.baidu.com
//요소 속성 설정
div.setAttribute("id","myDiv2"); //id를 "myDiv2"로 변경
div.setAttribute("class" ,"ft"); / /class는 "ft"로 변경됩니다. 여기서도 className이 아니라 클래스입니다.
div.setAttribute("title","I am myDiv2") //title은 "I로 변경됩니다. am myDiv2"
div.setAttribute ("align","center"); //가운데 정렬 설정
img.setAttribute("src","images/img1.gif"); //이미지 경로 설정
//요소 속성 제거
div.removeAttribute("class"); //클래스 속성 제거
3. 속성을 통해 요소의 속성을 가져오고 설정하고 제거합니다. 속성
var img = document.getElementById("img1")
var a = document.getElementById("myA"); >//요소 속성 가져오기
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")) //"bd" className이 아니라 클래스입니다. 위와 다릅니다
alert(div.getAttribute("title")); //"나는 div입니다"
alert(a.getAttribute("href")) //http ://www.baidu.com
//요소 속성 설정
div.setAttribute("id","myDiv2"); //id를 "myDiv2"로 변경
div.setAttribute("class" ,"ft"); / /class는 "ft"로 변경됩니다. 여기서도 className이 아니라 클래스입니다.
div.setAttribute("title","I am myDiv2") //title은 "I로 변경됩니다. am myDiv2"
div.setAttribute ("align","center"); //가운데 정렬 설정
img.setAttribute("src","images/img1.gif"); //이미지 경로 설정
//요소 속성 제거
div.removeAttribute("class"); //클래스 속성 제거
3. 속성을 통해 요소의 속성을 가져오고 설정하고 제거합니다. 속성
코드 복사 코드는 다음과 같습니다.
var div = document.getElementById(" myDiv"); //요소 속성 가져오기
alert(div.attributes["id"].nodeValue); //"myDiv"
//요소 속성 설정
div.attributes[" id"].nodeValue = "myDiv2"; //id "myDiv2"로 변경
//요소 속성 제거
div.attributes.removeNamedItem("class"); //클래스 속성 제거
alert(div.attributes["id"].nodeValue); //"myDiv"
//요소 속성 설정
div.attributes[" id"].nodeValue = "myDiv2"; //id "myDiv2"로 변경
//요소 속성 제거
div.attributes.removeNamedItem("class"); //클래스 속성 제거
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7287
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1342
46


라라벨 튜토리얼
1259
25


PHP 튜토리얼
1206
29



Spring MVC의 주요 개념을 익히십시오: 이러한 중요한 기능을 이해하십시오
