DOM operation
Is a document object model, which is a method for JavaScript to manipulate html documents
DOM operation methods:
1, Get the object of the operation, that is, the label of the operation , adopt JavaScript Defined DOM Manipulate function methods to get label objects .
2, adopt JavaScript Defined DOM Operation function method pair html Perform actions on label objects
How to get the label object by DOM operation:
-
Easy to use, poor compatibility (not supported by low version IE browser)
var variable = document.querySelector('condition'); Get entire html The first eligible label object in the file The execution result is a separate label object DOM Operation can directly operate on the label object of an object. var variable = Label object.querySelectorAll('condition'); Gets all eligible label objects in the label object If there are no eligible label objects ,The execution result is an empty array , (array.length The array that is 0 is an empty array) var variable = document.querySelectorAll('condition'); Get entire html All eligible label objects in the file The execution result is a pseudo array The data value stored in each cell in the pseudo array is the qualified label object DOM Operations cannot directly manipulate pseudo arrays of label objects. Must be a pseudo array[Index subscript] Get a label object for DOM operation, perhaps Loop through the pseudo array to get each independent label object DOM operation.-
Supported conditional syntax:
All html css All supported syntax properties can be defined: 'Label name' '.class Attribute value' '#'id attribute value' '[attribute="Attribute value"]' 'ul>li' ... (As long as it is html , css Everything supported was OK)
-
-
Good compatibility and inconvenient use
var variable = document.getElementById('id Attribute value'); The result is a separate label object var variable = document.getElementByClassName('class Attribute value') ; The result is a pseudo array , out of commission forEach var variable = document.getElementsByTagName('Label name'); The result is a pseudo array No forEach var variable = document.getElementsByName('label name Attribute value'); The result is a pseudo array sure forEach
Summary:
document.querySelector('condition');
Get entire html The first eligible label object in the document.
Gets a separate label object , Can be executed directly DOM operation.
You can also obtain qualified label objects from the obtained label objects
Label object.querySelector('condition');
If there are no eligible label objects , The result is null
document.querySelectorAll('condition');
Get entire html All eligible label objects in the document
Gets a pseudo array of label objects ,
Cannot be executed directly DOM operation , A pseudo array is required[Index subscript] Get an independent label object to execute DOM operation , Or loop through the pseudo array to get each independent label object for execution DOM operation.
You can also obtain qualified label objects from the obtained label objects
Label object.querySelectorAll('condition');
If there are no eligible label objects , The result is null
array.length The array that is 0 is an empty array.
I DOM content operation
Label content:
1. Label object innerHTML
Support label resolution
obtain
var variable = Label object.innerHTML ;
set up
Label object.innerHTML = '' ;
2. Label object innerText
Label resolution is not supported
obtain
var variable = Label object.innerText ;
set up
Label object.innerText = '' ;
The result obtained and the content set are in string format
II. Attribute operation of DOM tag
Attribute actions for Tags:
1. The tag supports properties that can be operated directly
id id attribute
className class attribute
title title attribute
Operational syntax:
obtain:
var variable = Label object.id
var variable = Label object.ClassName
var variable = Label object.title
set up:
Label object.id = Attribute value
Label object.ClassName = Attribute value
Label object.title = Attribute value
Each type of tag directly supports different attributes.
2. Boolean attributes supported by tags
Boolean attribute
The property name is the same as the property value
(Selected by default, Multiple choice, read-only, Disable ....)
set up
Label object.Boolean attribute = Attribute value
obtain
var variable = Label object.Boolean attribute
The operation result of Boolean property, whether obtained or set , The attribute value must be true(implement) / false(I won't support it)
3. General operation method of label attribute, except Boolean attribute
The result obtained is a string type
set up
Label object.setAttribute('attribute', Attribute value);
obtain
var variable = Label object.getAttribute = ('attribute');
delete
Label object.removeAttribute('attribute');
<script>
var oDiv = document.querySelector('div');
var oA = document.querySelector('a');
var oIpt = document.querySelector('input');
console.dir( oDiv ); // Console output attribute value
console.dir( oA );
// Tag supported attribute id class title attribute
// set up
oDiv.id = 'Set id Attribute value' ;
oDiv.className = 'Set class Attribute value' ;
oDiv.title = 'Set title';
// obtain
var res1 = oDiv.id ;
console.log( res1 );
var res2 = oDiv.className ;
console.log( res2 );
// General operation method of label attribute
// obtain
// div does not support direct manipulation of the name attribute
// The result obtained is undefined
// Obtain the attribute value of the div tag name attribute through the general operation method
var oDivName = oDiv.getAttribute( 'name' );
console.log( oDivName );
// The a tag supports the name attribute, which can be operated directly
var oAName1 = oA.name ;
console.log( oAName1 );
// The name attribute can be manipulated using common methods
var oAName2 = oA.getAttribute('name') ;
console.log( oAName2 );
// set up
oDiv.setAttribute('name' , 'I am js Set');
console.log( oDiv );
// delete
oA.removeAttribute( 'name' );
// Boolean attribute
// obtain
var res = oIpt.checked ;
console.log( res );
// set up
oIpt.checked = false ;
</script>
Three label data
General labels are label objects used for label content innerHTML or tag object innerText operation data, special taginputtextarea Select > optionuse tag object value to manipulate data
-
Get data:
In general , input By default, such tags have no data , Generally, data values are obtained in cooperation with events . var variable = Label object.value; Through object.value The data obtained must be of string type.if necessary ,Can be converted to numeric type -
Setting data:
Label object.value = Data value;
select>option
If option The label is not set value attribute , The result of getting data is option Label content.
If option Label setting value attribute , The result of getting data is value Property value of the property.
In the actual project option Label general settings value The property value is an integer value starting from 0.
Four click event
Bind the click event to the tag through the event listening syntax,
Label object addEventListener('click, callback function ');
The callback function can be an anonymous function / function name
(the callback function defines the program to be executed.)
<script>
// Get div tag object
var oDiv = document.querySelector('div');
// Bind click event (anonymous function)
oDiv.addEventListener('click' , function(){console.log(111)}) ;
// Bind click event (function name)
oDiv.addEventListener('click',fun);
function fun(){
console.log(222);
}
Five class attributes
Operation method of class attribute:
The class attribute can have multiple attribute values and has special operation methods
1,newly added class Attribute value
Label object.classList.add(New attribute value)
You can add one or more attribute values at a time , Multiple attribute values are separated directly by commas.
2,delete class Attribute value
Label object.classList.remove(Delete attribute value)
3,replace class Attribute value
Label object.classList.replace(Original attribute value,New attribute value)
4,switch class Attribute value
Label object.classList.toggle(Attribute value)
If the original state has attribute values, the deletion operation is performed , If there is no attribute value in the original state, perform the add operation.
<div class="s1 s2 s3 s4"></div>
<script>
var oDiv = document.querySelector('div');
// New class attribute value
oDiv.classList.add('m1');
//Delete class attribute value
oDiv.classList.remove('s1');
//Replace class attribute value
oDiv.classList.replace('s2' , 'm2');
//Toggle class attribute values
oDiv.classList.toggle('t2'); // The original class attribute value does not have t2, add t2
oDiv.classList.toggle('m2'); // The original class attribute value has m2. Delete m2
Vi. css style setting and acquisition
set up
DOM operation css Style:
There is only one syntax for setting css style in JavaScript
Label object.style.css attribute = css Attribute value
The setting result is inline style.
1. In JavaScript - is a minus sign to perform subtraction, so the css attribute with - should be written in the form of small hump syntax For example: font size - > fontsize
2. If there is a unit, the unit must be written
3. The syntax form of attribute value is exactly the same as that of css attribute value
4. The grammatical form is an inline grammatical form
<button>set up</button>
<div>I am div</div>
<script>
// Get div tag object
var oBut = document.querySelector('button');
// Get button label object
var oDiv = document.querySelector('div');
// Add a click event to the button tag
oBut.addEventListener('click',function(){
//Style div labels
oDiv.style.color = 'red';
oDiv.style.width = '62px';
oDiv.style.height = '40px';
oDiv.style.backgroundColor = 'pink';
oDiv.style.fontSize = '15px';
oDiv.style.border = '3px double #f5f5f5';
oDiv.style.textAlign = 'center';
oDiv.style.lineHeight = '40px';
oDiv.style.marginTop = '20px';
})
obtain
css style attribute value acquisition:
Syntax 1: only attribute values of inline styles can be obtained
var variable = Label object.style.attribute
Syntax 2: acquisition of non inline styles
var variable = window.getComputedStyle(Label object).attribute ;
You can get any syntax setting css style , Get results with units , sure parseInt() Get integer part.
Compatibility issues:
window.getComputedStyle(Label object).attribute
Standard browser syntax
Label object.currentStyle.attribute
Low version IE Browser syntax
// Get label object
var oDiv = document.querySelector('div');
// Get css Style
// Inline can use label objects style. attribute
var dColor = oDiv.style.color ;
console.log( dColor );
// Acquisition of non inline styles
var resColor = window.getComputedStyle( oDiv ).color ;
console.log( resColor );
VII. Occupation of labels
The box model attribute in css style determines the occupancy of a label
Label object.offsetWidth
Label object.offsetHeight
content + padding + border
Label object.clientWidth
Label object.clientHeight
content + padding
Label object.clientTop
Label object.clientLeft
upper , Width of left border line
Label object.offsetTop
Label object.offsetLeft
The current label is distance JavaScript Locate the spacing of the parent
Locate who the parent is , Object stored in label.offsetParent Attribute.
1, Label has no parent / Parent not positioned
Locate parent yes body ,that is HTML file
2, The label has a parent and the parent has a location
Locating the parent is the parent element
3, The label has fixed positioning
Locate parent yes null , That is, windows
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 5000px;
}
div{
width: 600px;
height: 600px;
margin: 100px auto;
background: pink;
border: 3px solid #000;
position: relative;
}
div p{
width: 100px;
height: 100px;
padding: 50px;
margin: 150px;
border: 10px solid #000;
background: cyan;
position: absolute;
/* display: none; */
}
</style>
...
<div>
<p></p>
</div>
...
// Get label object
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
// Get the occupation of div tag
// Offsetwidth offsetHeight (content + padding +border)
console.log(oDiv.offsetHeight); // 606
console.log(oDiv.offsetWidth); //606
// clientWidth clientHeight (content + padding)
console.log(oDiv.clientHeight); //600
console.log(oDiv.clientWidth); //600
// clientTop clientLeft (width of upper left border line)
console.log(oDiv.clientTop); //3
console.log(oDiv.clientLeft); //3
console.log(oP.clientTop); //10
console.log(oP.clientLeft); //10
// Locate parent
console.log(oP.offsetParent);
console.log( oP.offsetTop ) ; // 150
console.log( oP.offsetLeft ) ; //150
Eight top-level objects for DOM operations
document -> That is, the whole HTML file
document.documentElement -> html label
document.body -> body label
document.head -> head label
document.title -> title label