MooTools-DOM 조작
우리는 이미 모든 HTML 페이지가 DOM 요소를 사용하여 설계되었음을 알고 있습니다. MooTools를 사용하면 DOM 요소를 조작 할 수 있습니다. 즉, DOM 요소의 스타일을 생성, 제거 및 변경할 수 있습니다.
기본 방법
다음은 DOM 요소의 속성을 캡처하고 수정하는 데 도움이되는 기본 메서드입니다.
가져 오기()
이 메서드는 src, value, name 등과 같은 요소 속성을 검색하는 데 사용됩니다. 다음 문은 get 메서드의 구문입니다.
통사론
//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');get () 메서드를 사용하여 요소를 검색하는 동안 다음 속성 목록을 받게됩니다.
- id
- name
- value
- href
- src
- 클래스 (요소 인 경우 모든 클래스를 반환 함)
- 텍스트 (요소의 텍스트 콘텐츠)
세트()
이 방법은 값을 변수로 설정하는 데 사용됩니다. 이벤트와 결합 할 때 유용하며 값을 변경할 수 있습니다. 다음 문은 set 메서드의 구문입니다.
Syntax
//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');삭제()
이 방법을 사용하면 elements 속성 값을 지울 수 있습니다. 요소에서 지울 속성을 선택해야합니다. 다음 문장은 erase () 메서드의 구문입니다.
Syntax
//this will erase the href value of #id_name
$('id_name').erase('href');움직이는 요소
요소 이동은 기존 요소를 페이지의 한 위치에서 다른 위치로 이동하는 것을 의미합니다. inject () 메소드를 사용하여 페이지에서 요소를 이동할 수 있습니다. 하나의 HTML 페이지에 콘텐츠 A, B, C를 각각 순서대로 포함하는 3 개의 div 요소가 포함 된 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.
예
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
})
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>다음과 같은 출력을 받게됩니다.
산출
이제 MooTools의 inject () 메소드를 사용하여 순서를 ABC에서 ACB로 변경할 수 있습니다. 즉, elementC 뒤에 elementB를 배치하고 elementB 앞에 elementC를 배치해야합니다. 다음 코드를 살펴보십시오.
예
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
//translates to: inject element C before element B
elementC.inject(elementB, 'before');
//translates to: inject element B after element C
elementB.inject(elementC, 'after');
});
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>다음과 같은 출력을 받게됩니다.
산출
새 요소 만들기
MooTools는 모든 유형의 DOM 요소를 생성하고 HTML 페이지에 삽입하는 옵션을 제공합니다. 그러나 모든 요소에 대해 적절한 구문을 유지해야합니다. 다음 코드 스 니펫이 (앵커) 요소를 생성하기위한 구문 인 예를 들어 보겠습니다.
통사론
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://MooTools.net',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});MooTools 라이브러리를 사용하여 앵커 요소를 만드는 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.
예
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://www.tutorialspoint.com',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
el.inject(document.body);
});
</script>
</head>
<body>
</body>
</html>다음과 같은 출력을 받게됩니다.