웹 프론트엔드 JS 튜토리얼 자바스크립트 학습노트(20) 요소의 특성(속성) 획득 및 설정_기본지식

자바스크립트 학습노트(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>

1. HTMLElement 유형의 속성을 통해 요소 속성을 가져오고 설정합니다(객체). )

코드 복사 코드는 다음과 같습니다.
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은 지원되지 않습니다. 사용자 정의 속성을 설정할 때 사용할 수 있습니다.
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 div = document.getElementById(" myDiv");
//요소 속성 가져오기
alert(div.attributes["id"].nodeValue); //"myDiv"
//요소 속성 설정
div.attributes[" id"].nodeValue = "myDiv2"; //id "myDiv2"로 변경
//요소 속성 제거
div.attributes.removeNamedItem("class"); //클래스 속성 제거

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

Spring MVC의 주요 개념을 익히십시오: 이러한 중요한 기능을 이해하십시오 Spring MVC의 주요 개념을 익히십시오: 이러한 중요한 기능을 이해하십시오 Dec 29, 2023 am 09:14 AM

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

필요와 기능에 따라 해당 Go 버전을 선택하세요. 필요와 기능에 따라 해당 Go 버전을 선택하세요. Jan 20, 2024 am 09:28 AM

필요와 기능에 따라 해당 Go 버전을 선택하세요.

CSS 전환 효과: 요소의 슬라이딩 효과를 얻는 방법 CSS 전환 효과: 요소의 슬라이딩 효과를 얻는 방법 Nov 21, 2023 pm 01:16 PM

CSS 전환 효과: 요소의 슬라이딩 효과를 얻는 방법

Golang에 클래스와 유사한 객체지향 기능이 있나요? Golang에 클래스와 유사한 객체지향 기능이 있나요? Mar 19, 2024 pm 02:51 PM

Golang에 클래스와 유사한 객체지향 기능이 있나요?

CSS 변환: 요소의 회전 효과를 얻는 방법 CSS 변환: 요소의 회전 효과를 얻는 방법 Nov 21, 2023 pm 06:36 PM

CSS 변환: 요소의 회전 효과를 얻는 방법

CSS를 사용하여 요소의 투명도 그라데이션 효과를 얻는 방법 CSS를 사용하여 요소의 투명도 그라데이션 효과를 얻는 방법 Nov 21, 2023 pm 01:38 PM

CSS를 사용하여 요소의 투명도 그라데이션 효과를 얻는 방법

Go 언어는 C 언어 기능과 호환됩니까? Go 언어는 C 언어 기능과 호환됩니까? Mar 07, 2024 pm 03:24 PM

Go 언어는 C 언어 기능과 호환됩니까?

C++ 함수 유형 및 특성 C++ 함수 유형 및 특성 Apr 11, 2024 pm 03:30 PM

C++ 함수 유형 및 특성

See all articles