How to quickly get started with VUE3.0: Enter learning
Related recommendations: JavaScript Tutorial
1. Getoperating elements.
The document object provides some methods for finding elements. These methods can be used to find elements based on their id, name, and class. Get the element of operation through attributes and tag names.
Summary:
Except that the document.getElementById() method returns the element with the specified id, the other methods return a collection that meets the requirements. To get one of the objects, you can get it by subscript, which starts from 0 by default.
The document object provides some properties that can be used to obtain elements in the document. For example, get all form tags, image tags, etc.
Note that
the operation elements obtained through the methods of the document object and the properties of the document object represent the same object. For example, document.getElementsByTagName('body')[0] is congruent with document.body.
HTML5’s new document object methods
In order to make it easier to obtain elements for operation, HTML5 adds two new methods to the document object, namely querySelector() and querySelectorAll().
Since these two methods are used in the same way, the following uses the document.querySelector() method as an example.
In DOM operations, element objects also provide methods for obtaining specified elements within an element. The two commonly used methods are getElementsByClassName() and getElementsByTagName(). They are used in the same way as the methods of the same name in the document object.
In addition, the element object also provides the children attribute to obtain the child elements of the specified element. For example, get the child elements of ul in the above example.
HTMLCollection object
The difference between HTMLCollection and NodeList objects:
Tip: For the collection returned by the getElementsByClassName() method, getElementsByTagName() method and the children attribute, id and name can be automatically converted into an attribute.
2. Element content
In JavaScript, if you want to operate on the obtained element content, you can use the properties and methods provided by the DOM.
Give an example
Code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Element content operations</title>
</head>
<body>
<p id="box">
The first paragraph...
<p>
The second paragraph...
<a href="http://www.example.com">third</a>
</p>
</p>
<script>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</body>
</html> Note that
browser compatibility issues may occur when using the innerText attribute. Therefore, it is recommended
to use innerHTML to get or set the text content of elements as much as possible during development. At the same time, there are certain differences between the innerHTML attribute and the document.write() method in setting content. The former acts on the specified element, while the latter reconstructs the entire HTML document page. Therefore, readers should choose the appropriate implementation method according to actual needs during development
[Case] Changing the box size
Code implementation ideas :
① Write HTML and set the size of p.
② Complete the change of box size according to the number of user clicks.
③ When the number of clicks is an odd number, the box becomes larger; when the number of clicks is an even number, the box becomes smaller.
Code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box{width:50px;height:50px;background:#eee;margin:0 auto;}
</style>
</head>
<body>
<p id="box" class="box"></p>
<script>
var box = document.getElementById('box');
var i = 0; // Save the number of times the user clicks on the box box.onclick = function() { // Handle the click event of the box ++i;
if (i % 2) { // The number of clicks is an odd number and becomes larger this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'big';
} else { // The number of clicks is an even number and becomes smaller this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'small';
}
};
</script>
</body>
</html> 3. Element attributes
In the DOM, in order to facilitate JavaScript to obtain, modify and traverse the relevant attributes of the specified HTML element, operation attributes and methods are provided.
You can use the attributes attribute to get all the attributes of an HTML element, as well as the number of all attributes, length.
Give an example
Code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Element attribute operations</title>
<style>
.gray{background: #CCC;}
#thick{font-weight: bolder;}
</style>
</head>
<body>
<p>test word.</p>
<script>
// Get p element var ele = document.getElementsByTagName('p')[0];
// ① Output the number of attributes of the current ele console.log('Number of attributes before operation: ' + ele.attributes.length);
// ② Add attributes to ele and check the number of attributes ele.setAttribute('align', 'center');
ele.setAttribute('title', 'Test text');
ele.setAttribute('class', 'gray');
ele.setAttribute('id', 'thick');
ele.setAttribute('style', 'font-size:24px;border:1px solid green;');
console.log('Number of attributes after adding attributes: ' + ele.attributes.length);
// ③ Get the style attribute value of ele console.log('Get the style attribute value:' + ele.getAttribute('style'));
// ④ Delete the style attribute of ele and check the remaining attributes ele.removeAttribute('style');
console.log('View all properties:');
for (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
}
</script>
</body>
</html> 4. Element style
review: Modify the style through the operation of element attributes.
Element style syntax: style.Attribute name.
Requirement: You need to remove the hyphen "-" in the CSS style name and capitalize the second English initial letter.
Example: To set the background color, background-color, needs to be changed to backgroundColor in the style attribute operation.
Note that
the float style in CSS conflicts with JavaScript's reserved words, and different browsers have different solutions
. For example, IE9-11, Chrome, and FireFox can use "float" and "cssFloat", Safari browser uses "float", and IE6~8 use "styleFloat".
Question: An element can have multiple class selectors. How to operate the selector list during development?
The original solution: Use the className attribute of the element object to obtain the result. The obtained result is a character type, and then process the string according to the actual situation.
The method provided by HTML5: the class selector list of the new classList (read-only) element.
For example: If the class value of a p element is "box header navlist title", how to delete the header?
HTML5 solution: p element object.classList.toggle("header");
for example
Code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Usage of classList</title>
<style>
.bg{background:#ccc;}
.strong{font-size:24px;color:red;}
.smooth{height:30px;width:120px;border-radius:10px;}
</style>
</head>
<body>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Java</li>
</ul>
<script> // Get the second li element var ele = document.getElementsByTagName('li')[1]; // If there is no strong class in the li element, add if (!ele.classList.contains('strong' )) { ele.classList.add('strong'); } // If there is no smooth class in the li element, add it; if it is deleted, ele.classList.toggle('smooth'); console.log('Add and switch After style: '); console.log(ele); </script>
<script>
ele.classList.remove('bg');
console.log('After deletion:');
console.log(ele);
</script>
</body>
</html> In addition, the classList attribute also provides many other related operation methods and properties.
5. [Case] Tab bar switching effect
Code implementation ideas :
① Write HTML to design the structure and style of the tab bar, where class equals current to indicate the currently displayed tab, and the default is the first tab.
② Get all tags and the display content corresponding to the tags.
③ Traverse and add a mouse-over event for each label. In the event processing function, traverse all the display content corresponding to the label. When the mouse slides over the label, add current through the add() method of classList, otherwise use remove() Method moves out of current.
Code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab bar switching effect</title>
<style>
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
.tab-head{height:31px;}
.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text- align:center;cursor:pointer;color:#fff;}
.tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-p{display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</style>
</head>
<body>
<p class="tab-box">
<p class="tab-head">
<p class="tab-head-p current">Tab one</p>
<p class="tab-head-p">Tab 2</p>
<p class="tab-head-p">Tab three</p>
<p class="tab-head-p tab-head-r">Tab four</p>
</p>
<!--jkdjfk?-->
<p class="tab-body">
<p class="tab-body-p current"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p"> 4 </p>
</p>
</p>
<script>
// Get all tab element objects of the tab bar var tabs = document.getElementsByClassName('tab-head-p');
// Get all content objects of the tab bar var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Traverse the element object tabs[i].onmouseover = function() { // Add a mouseover event to the tag element object for ( var i = 0; i < ps.length; ++i) { // Traverse the content element object of the tab bar if (tabs[i] == this) { // Display the li element ps[i] that the current mouse has slid over .classList.add('current');
tabs[i].classList.add('current');
} else { // Hide other li elements ps[i].classList.remove('current');
tabs[i].classList.remove('current');
}
}
};
}
</script>
</body>
</html> Related recommendations: javascript tutorial
The above is the detailed content of HTML element operations explained in detail by JavaScript examples. For more information, please pay attention to other related articles on the php Chinese website!
