Mootools 1.2_Mootools로 HTML DOM 요소 조작

우리는 이미 DOM 요소를 선택하는 방법, 배열을 만드는 방법, 함수를 만드는 방법, 요소에 이벤트를 추가하는 방법을 배웠습니다. 오늘은 HTML 요소를 조작하는 방법을 자세히 알아 보겠습니다. MooTools 1.2를 사용하면 HTML 페이지에 새 요소를 추가하고, 요소를 삭제하고, 스타일이나 요소 매개변수를 변경할 수 있으며 이 모든 작업을 매우 쉽게 수행할 수 있습니다.
기본 메소드
.get()
이 도구를 사용하면 요소의 속성을 가져올 수 있습니다. 요소 속성은 HTML 요소를 구성하는 다양한 부분(예: src, 값, 이름 등)입니다. .get(); 메서드 사용은 매우 간단합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 다음 줄은 ID가 "id_name"인 요소의 html 태그 이름(div, a,span...)을 반환합니다.
$('id_name').get ('태그');

참조 코드:

코드 복사

Element "span" -->
< /div>

html 태그 이름뿐만 아니라 더 많은 속성을 가져올 수 있습니다.

name
value
href
src
class(CSS 클래스 이름이 여러 개인 경우 모든 CSS 클래스 이름이 반환됨)
text(요소의 텍스트 내용)
잠깐만요...
.set();
.set(); 메서드는 .get() 메서드와 동일하지만 값을 가져오는 대신 값을 설정합니다. 이는 페이지가 로드된 후 일부 속성 값을 변경할 수 있는 이벤트와 함께 사용할 때 유용합니다.
참조 코드:
// id_name이 있는 요소의 링크 주소가 "http://www.google.com"으로 설정됩니다.
$('id_name').set('href', ' http://www.google.com');

참조 코드:

코드 복사 코드

검색 엔진

.erase();
.erase() 메소드를 통해 요소의 속성 값을 지울 수 있습니다. 앞선 두 가지 방법과 비슷합니다. 요소를 선택한 다음 지우려는 속성을 선택합니다.
참조 코드:
// ID가 id_name인 요소의 href 속성을 제거하는 방법입니다.
$('id_name').erase('href')

참조 코드 :

코드 복사 코드는 다음과 같습니다.

검색 엔진 🎜>

요소 이동
.inject()
페이지에서 기존 요소를 이동하려면 .inject(); 방법. 지금까지 살펴본 다른 방법과 마찬가지로 이 방법도 사용이 매우 간단하고 사용자 인터페이스를 더 효과적으로 제어할 수 있습니다. .inject(); 메소드를 사용하려면 먼저 포함된 요소 변수를 설정하십시오.
참조 코드:

코드 복사 코드 다음과 같습니다:

var elementA = $('elemA');
var elementB = $('elemB')
var elementC = $('elemC'); >

위 코드는 다음 HTML을 다양한 변수에 할당하므로 MooTools를 사용하여 작업하기가 더 쉽습니다.

참조 코드:

코드 복사 코드는 다음과 같습니다.

A

B

C

이제 이러한 요소의 순서를 변경하려면 4가지 방법으로 .inject() 메서드를 사용할 수 있습니다. 다음 요소에 요소를 삽입할 수 있습니다.
Bottom(기본값)
Top(top)
요소 전(before)
요소 후(after)
Bottom 및 top은 이 요소를 요소 내부에 주입합니다. 선택한 요소, 요소의 하단 또는 상단에 있습니다. 대조적으로 before와 after는 한 요소를 다른 요소의 상단이나 하단에 주입하지만 요소 내부에는 주입하지 않습니다.
그럼 요소 순서를 A-C-B로 바꿔보겠습니다. 한 요소를 다른 요소에 주입할 필요가 없으므로 이전이나 이후에 사용할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 다음 문장 의미: 요소 B 앞에 요소 C 삽입
elementC.inject(elementB, 'before')
// 다음 문장 의미: 요소 C 뒤에 요소 B 삽입
inject(elementC, 'after');

새 요소 만들기
new Element
"new Element" 생성자를 사용하여 HTML 요소 행을 만들 수 있습니다. 이는 MooTools에서 정상적으로 실행되도록 구문을 조정해야 한다는 점을 제외하면 일반 HTML 요소 작성과 매우 유사합니다.
참조 코드:
// 변수 이름을 지정하고 "새 요소"를 선언합니다.
// 그런 다음 요소 유형을 정의합니다(div, a,span...)
var newElementVar = new Element('div', {
// 여기에 요소의 모든 속성을 설정합니다
'id ' : 'id_name',
'text': '나는 새로운 div입니다',
'styles': {
// 여기서 요소의 모든 스타일 매개변수를 설정하세요
'width': ' 200px ',
'높이': '200px',
'배경색': '#eee',
'float': '왼쪽'
}
}); 이제 요소가 있으므로 방금 배운 inject() 메서드를 통해 이 요소를 페이지 어딘가에 배치할 수 있습니다. 다음과 같은 간단한 HTML로 시작합니다.
참조 코드:

일부 div 콘텐츠

이제 ID가 content_id인 요소를 변수로 변환합니다.
참조 코드:
var bodyWrapVar = $('body_wrap')
그리고 방금 배운 내용도 마찬가지입니다. , 우리가 만든 요소를 ​​현재 HTML에 삽입할 수 있습니다.
참조 코드:
// 이 문장의 의미는 다음과 같습니다. "newElementVar를 bodyWrapVar에 삽입하고 맨 위에 배치합니다."
newElementVar.inject(bodyWrapVar, ' top');
이 코드는 다음과 같습니다.
참조 코드:

저는 새로운 div입니다

일부 div 콘텐츠
< ;/div>

예
이 예에서는 HTML 페이지에 행 요소를 추가할 수 있는 양식을 만들어 보겠습니다. 먼저 텍스트 상자와 버튼을 만듭니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

ID:
text: 🎜>< ;button id="new_div">새 div 만들기

이제 MooTools를 사용하여 JavaScript를 작성하여 HTML 양식을 만들어 보겠습니다. 페이지에 새 요소를 삽입합니다. 먼저 이 버튼에 이벤트를 추가하고 코드를 포함하는 함수를 작성해 보겠습니다.

참조 코드:

코드 복사 코드는 다음과 같습니다.

var newDiv = function() {

// 여기에 "새 요소 추가" 코드를 넣습니다.
}window .addEvent; ('domready', function() {
$('new_div').addEvent('click', newDiv);
})


다음으로 할 일은 우리 모두입니다. 해야 할 일은 작업하려는 변수를 지정하는 것입니다. 입력 양식의 데이터를 사용하려면 .get() 메소드를 사용해야 합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. var idValue = $('id_input').get('value')

var textValue = $('text_input').get( '값')

이제 위 코드의 변수 idValue 및 textValue에는 이들이 지정하는 입력 형식의 값이 포함됩니다. 사용자가 "새 div 만들기" 버튼을 클릭하면 입력 상자의 값을 가져와야 하므로 위 코드를 newDiv() 함수에 넣어야 합니다. 이 함수 외부에서 이 값을 가져와야 하는 경우 페이지를 클릭할 때가 아니라 페이지가 로드될 때 가져와야 합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value')
}; 🎜>window .addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
})

다음으로, 새 요소가 삽입될 요소를 가져와야 합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var newDiv = function() {
var idValue = $('id_input').get('value')
var textValue = $(' text_input').get('value' );
var bodyWrapVar = $('newElementContainer')
}
window.addEvent('domready', function() {
$(' new_div').addEvent('click' , newDiv);
})

이미 입력 양식에 대한 값이 있으므로 이제 새 요소를 만들 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var newDiv = function( ) {
var idValue = $(' id_input').get('value');
var textValue = $('text_input').get('value')
var bodyWrapVar = $( 'newElementContainer');
var newElementVar = new Element('div', {
// 이 요소의 ID를 idValue
'id' 값으로 설정합니다: idValue,
/ / 이 요소의 텍스트는 textValue
'html': textValue
})
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv );
});


우리가 해야 할 일은 이 새 요소를 페이지에 삽입하는 것입니다. 🎜>참조 코드:

코드 복사 코드는 다음과 같습니다.var newDiv = function () {

var bodyWrapVar = $('newElementContainer');

var idValue = $('id_input').get('value')
var textValue = $('text_input').get ('value');
var newElementVar = new Element(' div', {
'id': idValue,
'text': textValue
})// 다음 다음 문장은 다음과 같습니다. "bodyWrapVar의 내부 상단에 newElementVar를 삽입합니다."
newElementVar.inject(bodyWrapVar, 'top')
};
var RemoveDiv = function() {
// 이렇게 하면 제거됩니다. 내부 html 값(즉, div 태그 클래스의 모든 것)
$('newElementContainer').erase('html')
}
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv)
$('remove_div').addEvent('click',removeDiv)



자세히 알아보기...

MooTools 문서의 Elements 섹션을 잠시 살펴보세요.

요소

이 섹션에는 여기에서 다룬 대부분의 내용과 더 많은 내용이 포함되어 있습니다.
• Element.style을 사용하면 요소 스타일 속성을 더욱 효과적으로 제어할 수 있습니다(일부 내용은 향후 튜토리얼에서 자세히 설명할 예정입니다).
• Element.dimentions위치, 좌표, 치수 등을 처리하는 도구가 포함되어 있습니다.

성명：

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

이전 기사：Mootools 1.2 클래스 및 방법 정렬에 대한 튜토리얼 소개_Mootools다음 기사：Mootools 1.2 클래스 및 방법 정렬에 대한 튜토리얼 소개_Mootools

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved