1, Operation element

The DOM operation of JavaScript can change the content, structure and style of web pages. We can use DOM operation elements to change the content and attributes of elements. (Note: these operations are implemented through the attributes of the element object)

1.5. Exclusivity

If there is the same group of elements, we need to use the exclusive idea algorithm of loop if we want an element to implement a certain style:

1. Clear all elements (kill others)
2. Style the current element (leave me alone)
3. Note that the order cannot be reversed. Kill others first, and then set yourself

Case code

  <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <script>
        // 1. Get all button elements
        var btns = document.getElementsByTagName('button');
        // btns gets every element in the pseudo array btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) Let's remove all the button background colors and kill everyone
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) Then let the current element background color be pink, leaving me
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

1.6. User defined attribute operation

1.6.1 get attribute value

• element. Get attribute value
• element.getAttribute('attribute ')

difference:

• Element. Attribute gets the built-in attribute value (the attribute of the element itself)
• element.getAttribute('attribute ') mainly obtains user-defined attributes (programmer defined attributes)

Case code

 <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. Get the attribute value of the element
        // (1) element. Attribute
        console.log(div.id);
        //(2) element.getAttribute('attribute ') get the meaning of getting the attribute attribute. The attribute added by our programmers is called user-defined attribute index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

1.6.2. Setting attribute value

• element. Attribute = 'value' sets the built-in attribute value
• element.setAttribute('attribute ',' value ')

difference:

• Element. Attribute sets the built-in attribute value (the attribute of the element itself)
• element.setAttribute('attribute ',' value ') mainly sets custom attributes

Case code

// 2. Set element attribute value
        // (1) element. Attribute = 'value'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('attribute ',' value '); Mainly for custom attributes
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer');

1.6.3. Move out attribute

-element.removeAttribute('attribute ')

1.6.4. H5 user defined attribute

Custom attribute purpose: to save and use data. Some data can be saved to the page instead of the database

The custom attribute is obtained through getAttribute('attribute ')

However, some custom attributes are easy to cause ambiguity, and it is not easy to judge whether they are built-in attributes or custom attributes of elements

H5 adds custom attributes to us:

1.H5 specifies that the beginning of the custom attribute data - is used as the attribute name and assigned a value

 <div data-index='1'></div>
 Or use JS set up
 element.setAttribute('data-index',2);

2. Get H5 custom attribute

1. Compatibility acquisition
   element.getAttribute('data-index');

2. H5 added element.dataset.index or element.dataset ['index'] ie 11 to support

 <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5 is a new method to get custom attributes. It can only get the attributes beginning with data -
        // dataset is a collection containing all custom attributes starting with data
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // If there are multiple - linked words in the custom attribute, we use the hump naming method when obtaining them
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>