DOM operations in JavaScript

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"]'
               ... (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   


             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
            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

         var variable = Label object.innerHTML ;

       set up
         Label object.innerHTML = ''  ;

2. Label object innerText
Label resolution is not supported

        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:
              var variable = Label
              var variable = Label object.ClassName
              var variable = Label object.title

            set up:
              Label = 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
            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);

            var variable = Label object.getAttribute = ('attribute');

            Label object.removeAttribute('attribute');
        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 = 'Set id Attribute value' ;
        oDiv.className = 'Set class Attribute value' ;
        oDiv.title = 'Set title';
        // obtain
        var res1 = ;
        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 = ;
        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 ;

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;


        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.)

         // 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)
         function fun(){

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>
         var oDiv = document.querySelector('div');
         // New class attribute value

         //Delete class attribute value
         //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 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>
         // 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
            //Style div labels
    = 'red';
    = '62px';
    = '40px';
    = 'pink';
    = '15px';
    = '3px double #f5f5f5';
    = 'center';
    = '40px';
    = '20px';


css style attribute value acquisition:

Syntax 1: only attribute values of inline styles can be obtained

             var variable = Label

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 = ;
          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
            margin: 0;
            padding: 0;

            height: 5000px;

            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; */

         // 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.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

Keywords: Javascript Front-end html

Added by vboctor on Tue, 11 Jan 2022 14:50:18 +0200