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:
- Clear all elements (kill others)
- Style the current element (leave me alone)
- 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
-
Compatibility acquisition
element.getAttribute('data-index'); -
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>