This is the 31st day of my participation in the August More Text Challenge
In order to thank readers for their support during this period of time, I put a private wechat on the homepage. If you need technical communication, you can directly add A Ken to communicate with me on wechat. Thank you for meeting me
Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).
This blog is suitable for just contactJSAnd the friends who want to review after a long time.
🌊🌈
Under the DOM
7.2_ Attribute Operations
In HTML, elements have built-in attributes, such as id, class, title, and style for div elements. Developers can also add custom attributes to elements. In practice, custom attributes have a wide range of applications, such as storing data that needs to be used in JavaScript.
7.2.1_ Get the Attribute Value Element. attribute
You can use the “element. attribute” method in DOM objects to obtain built-in attribute values, but DOM objects cannot directly obtain custom attribute values using dot syntax. How to obtain custom attribute values? In the DOM, you can use the getAttribute(‘ attribute ‘) method to return the attribute value of a given element.
Example: Demonstrates how to get property values,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
console.log(div.id); // The result is demo
console.log(div.getAttribute('id')); // The result is demo
console.log(div.getAttribute('index')); // Result :1
</script>
</body>
</html>
Copy the code
In the above code, we use element. attribute and element.getAttribute to get the built-in attribute ID of the div element, and the output is demo. Although both methods can be used to obtain built-in attribute values, in practice it is recommended to use “Element. Property “is a more succinct way. Use getAttribute(‘ index ‘) to get the developer-defined index attribute, and the output is 1.
7.2.2_ Setting the Attribute Value Element. setAttribute(‘ Attribute ‘, ‘value’)
Built-in attribute values can be set using “element. attribute = ‘value'” in DOM objects, and “element.setAttribute(‘ attribute ‘, ‘value’)” is provided for custom attributes. It is worth mentioning that the tag has a custom attribute set that can be seen in the HTML structure of the browser.
Example: Demonstrates how to set property values,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.id = 'test';
div.className = 'navs';
div.setAttribute('index'.2);
</script>
</body>
</html>
Copy the codeIn the code above, set the div element’s built-in attribute to “element. attribute = ‘value’, set the id value to test, and set the class name to navs. Using the setAttribute() method, set the name of the attribute to index and the value to 2.
Alternatively, if you want to use setAttribute() to set the element’s class name, you can add the following code.
div.setAttribute ('class'.'footer');
Copy the codeBecause class is special, the attribute value used here is class and the value is footer.
7.2.3_ Removing the Attribute Element.removeAttribute
Once you know how to get and set element attributes, there is another operation to learn, which is to remove element attributes. Use the “element.removeAttribute” method in the DOM to remove element attributes.
Example: Demonstrates how to remove attribute values,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="test" class="footer" index="2"></div>
<script>
var div = document.querySelector('div');
div.removeAttribute('id');
div.removeAttribute('class');
div.removeAttribute('index');
</script>
</body>
</html>
Copy the codeIn this code, we use the removeAttribute() method to remove the ID, class, and index attributes of the div element.
7.2.4_[Case] Tab Bar Switching
TAB bar is widely used in websites. Its advantage lies in that it can display multiple pieces of content in a limited space. Users can switch between multiple pieces of content through tags.
Next we use our knowledge of custom properties to implement tab-bar toggle effects.
(1) Write HTML page, sample code is as follows,
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">The introduction</li>
<li>Specifications and Packing</li>
<li>After-sale protection</li>
<li>Commodity Evaluation (50000)</li>
<li>Mobile community</li>
</u1>
</div>
<div class="tab_con">
<div class="item" style=" display: block; ">Product introduction module content</div>
<div class="item">Specifications and packaging module content</div>
<div class="item">After-sales support module content</div>
<div class="item">Product evaluation (50000) module content</div>
<div class="item">Mobile community module content</div>
</div>
</div>
Copy the codeIn the code above, the element class as TAB is used to implement the outer border of the TAB bar. Lines 2 to 10 and 11 to 17 implement the tag section and content section of the TAB bar, respectively. In the first li of the label part, the current style is added to achieve the effect of the current label selection. Similarly, a display: block style is added to the corresponding content block div under this label to display the contents under the current label and hide the contents under other labels.
(2) To achieve label bar switch, the specific code is as follows.
<script>
// Get all the element objects in the tag section
var tab_list = document.querySelector (' .tab_llst ');
var lis = tab_list.guerySelectorAll('li');
// Get all the content objects in the content section
var items = document.querySelectorAll ('.item');
for (var i = 0; i < lis.length; i++) {// The for loop binds the click event
lis[i].setAttribute ('index',i);
lis[i].className = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ' ';
}
this.className = 'current';
// Display the content module below
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>
Copy the codeIn the above code, lines 3 and 4 retrieve elements through the querySeletorAIl() method. Lines 7 through 21 traverse each element object lis[I] in the tag section and bind the click event. In the event handler, lines 10 to 12 use exclusivity to click on the current item, clear all of Li’s class classes, and set itself the current class at line 13. At the same time, when the event occurs, execute lines 15 to 19 to display the current mouse click label and its corresponding content, and hide the display of other labels.
That’s the end of today’s introductory study
Peace
🌊🌈
A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms A Ken HTML, CSS introduction guide (16) _ multimedia technology
Suggest collection 】 【 HTML dry share | challenge the shortest possible time to take you into the HTML (18) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (19) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (20)
Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) [JS dry share | suggestion collection] challenges the shortest time to take you into the JS (15)
🌊🌈 About postscript:
Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice
Original is not easy, “like” + “attention” thanks for your support ❤