Shulou(Shulou.com)06/01 Report--

Editor to share with you the example analysis of the operation of the HTML element in JavaScript, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Get the methods and attributes of the element document object of the operation

The document object provides methods for finding elements that can be used to get elements of an operation based on their id, name, and class attributes and tag names.

Summary

Except that the document.getElementById () method returns an element with the specified id, all the other methods return a collection that meets the requirements. To get one of the objects, you can get it by subscript, starting with 0 by default.

The document object provides properties that can be used to get elements in a document. For example, get all form tags, picture tags, and so on.

The body property of the document object is used to return the body element.

The documentElement property of the document object is used to return the root node html element of the HTML document.

Be careful

The operation elements obtained through the methods of the document object and the properties of the document object represent the same object. Such as document.getElementsByTagName ('body') [0] and document.body etc.

Document object method added by HTML5

To make it easier to get the elements of the operation in HTML5, two new methods, querySelector () and querySelectorAll (), have been added to the document object.

The querySelector () method returns a reference to the first object in the document that matches the specified element or CSS selector.

The querySelectorAll () method returns a collection of objects in the document that match the specified element or CSS selector.

Because the two methods are used in the same way, let's take the document.querySelector () method as an example.

Methods and properties of the Element object

In the DOM operation, the element object also provides a method to get the specified element within an element. The two commonly used methods are getElementsByClassName () and getElementsByTagName (), respectively. They are used in the same way as methods with the same name in the document object.

In addition, the element object provides a children attribute to get the children of the specified element. For example, get the child elements of ul in the example above.

The children property of the element object also returns a collection of objects. To get one of the objects, you also need to get it by subscript, starting with 0 by default.

In addition, there is a children attribute in the document object, and its first child element is usually the html element.

HTMLCollection object

HTMLCollection object: the set of objects returned by calling the getElementsByClassName () method, the getElementsByTagName () method, the children property, and so on through a document object or an Element object.

NodeList object: the document object calls the getElementsByName () method to return the NodeList object in Chrome and FireFox browsers, and the IE11 returns the HTMLCollection object.

The difference between HTMLCollection and NodeList objects:

The HTMLCollection object is used for element manipulation.

The NodeList object is used for node operations.

Tip: id and name can be automatically converted to a property in the collection returned by the getElementsByClassName () method, the getElementsByTagName () method, and the children property.

II. Element content

In JavaScript, if you want to manipulate the acquired element content, you can make use of the properties and methods provided by DOM.

The property belongs to the Element object and the method belongs to the document object.

InnerHTML maintains the formatting and label style when it is used.

InnerText is plain text content that removes all formatting and tags.

The textContent attribute retains text formatting when the tag is removed.

For instance

Code implementation

Element content operation The first paragraph...

The second paragraph... Third

Var box = document.getElementById ('box'); console.log (box [XSS _ clean]); console.log (box.innerText); console.log (box.textContent)

Be careful

Browser compatibility issues may occur when using the innerText property. Therefore, it is recommended in the

When developing, use innerHTML to get or set the text content of the element as much as possible. At the same time, there is a difference between the innerHTML property, which acts on the specified element, and the [xss_clean] () method, which reconstructs the entire HTML document page. Therefore, readers should choose the appropriate implementation method according to the actual needs in the development.

[case] change the box size

Code implementation ideas:

① writes HTML to set the size of p.

② changes the size of the box according to the number of clicks by the user.

When the number of ③ clicks is odd, the boxes become larger, and when the number of clicks is even, the boxes become smaller.

Code implementation

.box {width:50px;height:50px;background:#eee;margin:0 auto;}

Var box = document.getElementById ('box'); var I = 0; / / Save the number of times the user clicked on the box box.onclick = function () {/ / handle the click event + + I of the box; if (I% 2) {/ / the number of clicks is odd, enlarged this.style.width =' 200pxboxes; this.style.height = '200px` Else [XSS _ clean] = 'big';} else {/ / the number of clicks is even, reducing the number of clicks to this.style.width = '50px'; this.style.height = '50px'; is [XSS _ clean] = 'small';}}; third, element attributes

In DOM, attributes and methods for operations are provided to facilitate JavaScript to obtain, modify, and traverse the relevant attributes of a specified HTML element.

Using the attributes attribute, you can get all the attributes of a HTML element, as well as the number of length of all attributes.

For instance

Code implementation

Element attribute operation .gray {background: # CCC;} # thick {font-weight: bolder;}

Test word.

/ / get p element var ele = document.getElementsByTagName ('p') [0]; / / ① outputs the number of attributes in the current ele console.log ('number of attributes before operation:' + ele.attributes.length); / / ② adds 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 added:' + ele.attributes.length) / / ③ gets the style attribute value of ele console.log ('get style attribute value:' + ele.getAttribute ('style')); / / ④ deletes the style attribute of ele and views the remaining attributes ele.removeAttribute (' style'); console.log ('View all attributes:'); for (var I = 0; I < ele.attributes.length) + + I) {console.log (ele.attributes [I]);} IV, element style

Review: modify the style through the operation of element attributes.

Element style syntax: style. Attribute name.

Requirement: you need to remove the "-" from the CSS style name and capitalize the second English initials.

For example: set the background color of the background-color, in the style attribute operation, need to be modified to backgroundColor.

Be careful

The float style in CSS conflicts with the reserved words of JavaScript, and different browsers in the solution

There are differences. For example, IE9--11, Chrome, and FireFox can use "float" and "cssFloat", Safari browsers use "float", and IE6~8 use "styleFloat".

Question: there can be more than one class selector for an element. How to manipulate the selector list in development?

The original solution: using the className attribute of the element object to get the result is a character type, and then deal with the string according to the actual situation.

Method provided by HTML5: a new list of class selectors for classList (read-only) elements.

For example: how to delete header if the class value of a p element is "box header navlist title"?

HTML5 solution: P element object .classList.toggle ("header")

For instance

Code implementation

Use of classList .bg {background:#ccc;} .strong {font-size:24px;color:red;} .smooth {height:30px;width:120px;border-radius:10px;} PHP JavaScript C++ Java / / 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 If you delete ele.classList.toggle ('smooth'); console.log (' after adding and switching styles:'); console.log (ele); ele.classList.remove ('bg'); console.log (' after deletion:'); console.log (ele)

In addition, the classList property provides methods and properties for many other related operations.

Fifth, [case] tab bar switching effect

Code implementation ideas:

① writes HTML to design the structure and style of the tag bar, where class equals current represents the currently displayed label, and the default is the first tag.

② gets the display of all tags that correspond to tags.

③ traverses and adds a mouse-over event for each tag. In the event handler, iterate through all the display content corresponding to the tag. When the mouse is over the tag, add current through the add () method of classList, otherwise remove the current through the remove () method.

Code implementation

Tab bar switching effect. 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;} label one

Label two

Label three

Label four

one

two

three

four

/ / get all tag element objects of the tag bar var tabs = document.getElementsByClassName ('tab-head-p'); / / get all content objects of the tag bar var ps = document.getElementsByClassName (' tab-body-p'); for (var I = 0; I < tabs.length) + + I) {/ / iterate through the element object tabs [I] .onMouseover = function () {/ / add a mouse over event for (var I = 0; I < ps.length) for the tag element object + + I) {/ / traversing the content element object if of the tag bar (tabs [I] = = this) {/ / shows the current mouse-over li element PS [I] .classList.add ('current'); else [I] .classList.add (' current');} else {/ / hides other li elements PS [I] .classList.remove ('current') Tabs [I] .classList.remove ('current');} above is all the content of the article "sample Analysis of HTML element Operations in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.