Manipulate HTML DOM elements with Mootools 1.2

We have already learned how to select DOM elements, how to create arrays, how to create functions, and how to add events to elements. Today we will learn in depth how to manipulate HTML elements. With MooTools 1.2, you can add new elements to an HTML page, delete elements, and change any styles or element parameters, all very easily.
Basic methods
.get();
This tool allows you to get the properties of elements. Element attributes are the various parts that make up an HTML element, such as src, value, name, etc. Using the .get(); method is very simple:
Reference code:

Copy code The code is as follows:

// The following line will return the html tag name (div, a, span...) of the element with the id "id_name" 
$('id_name').get('tag'); 
 

Reference code:

Copy code The code is as follows:

Element
< /div>

You can use the .get(); method to get more attributes, not just the html tag name:
id
name
value
href
src
class (if there are multiple CSS class names, all CSS class names will be returned)
text (text content of an element)
Wait...
.set();
.set(); method is the same as .get(); method, but instead of getting a value, it sets a value. This is useful when used in conjunction with events, where you can change some property values after the page has loaded.
Reference code:
// This will set the link address of the element with id_name to "http://www.google.com"
$('id_name').set('href', ' http://www.google.com');

Reference code:

Copy code The code is as follows:

Search Engine

. erase();
Through the .erase(); method, you can clear the attribute value of an element. It is similar to the previous two methods. Select the element, then select the attribute you want to clear.
Reference code:
// This is about removing the href attribute of the element with the id id_name
$('id_name').erase('href');

Reference code:

Copy code The code is as follows:

Search Engine

Move elements
.inject();
To move an existing element on the page, you can use the .inject(); method. Like the other methods we've seen, it's very simple to use and gives you more control over your user interface. To use the .inject(); method, first set some containing element variables:
Reference code:

Copy code Code As follows:

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

The above code assigns the following HTML to different variables, which makes it easier to operate with MooTools.
Reference code:

Copy code The code is as follows:

A

B

C

Now, to change the order of these elements, we can use the .inject(); method in four ways. We can inject elements into:
Bottom (default)
Top (top)
Before an element (before)
After an element (after)
bottom and top will inject this element inside a selected element, at the bottom or top of the element. In contrast, before and after will inject one element to the top or bottom of another element, but not inside the element.
So, let’s change the order of elements to A-C-B. Since we don't need to inject one element into another element, we can use before or after.
Reference code:

Copy code The code is as follows:

// The following sentence It means: put element C before element B 
elementC.inject(elementB, 'before'); 
// The following sentence means: put element B after element C 
elementB. inject(elementC, 'after'); 

Create a new element
new Element
You can use the "new Element" constructor to create a row of HTML elements. This is very similar to writing a normal HTML element, except that you need to adjust the syntax to run normally under MooTools:
Reference code:
// First name a variable and declare a "new Element"
// Then define the type of element (div, a, span...)
var newElementVar = new Element('div', {
// Set all attributes of the element here
'id ': 'id_name',
'text': 'I am a new div',
'styles': {
// Set all style parameters of the element here
'width': ' 200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});
Now that you have an element, you can place this element somewhere on the page through the inject(); method we just learned. We start with the following simple HTML:
Reference code:

Some div content

Now, we convert the element with the ID content_id into a variable:
Reference code:
var bodyWrapVar = $('body_wrap');
And what we just learned Similarly, we can inject the element we created into the current HTML:
Reference code:
// This sentence means: "Inject newElementVar into bodyWrapVar and place it at the top"
newElementVar.inject(bodyWrapVar, 'top');
This code may end up looking like this:
Reference code:

I am a new div

Some div content< /div>

Example
For this example, let's create a form that allows you to add a row element to your HTML page. First, create some text boxes and buttons.
Reference code:

Copy code The code is as follows:

ID:
text:
< ;button id="new_div">Create a new div

Now, let’s use MooTools to write JavaScript to make this HTML form Insert a new element into your page. First, let’s add an event to this button and write a function to include our code:
Reference code:

Copy code The code is as follows:

var newDiv = function() { 
// We will put the "add a new element" code here 
}; 
window .addEvent('domready', function() { 
$('new_div').addEvent('click', newDiv); 
}); 

The next thing we do All we have to do is specify the variables we want to work with. To use the data from the input form, we need to use the .get(); method:
Reference code:

Copy code The code is as follows:

var idValue = $('id_input').get('value'); 
var textValue = $('text_input').get('value'); 

이제 위 코드의 변수 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위치, 좌표, 치수 등을 처리하는 도구가 포함되어 있습니다.

Related labels：

dom element html

source：php.cn

Previous article：Mootools 1.2 Tutorial Introduction to Sorting Classes and Methods_Mootools Next article：Mootools 1.2 Tutorial Scroll Bar (Slider)_Mootools

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Manipulate HTML DOM elements with Mootools 1.2_Mootools