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

This article is about sample analysis of HTML element attribute testing. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

The code element has the meaning (semantics) of "code content," and FireFox renders the code label content as "monospaced font"(each character has the same width), which causes the semantics and presentation of the element to be mixed together; the correct approach is that browsers should ignore the default rendering effect (monospaced font) of the code element due to historical reasons.

Semantic elements only describe the structure and meaning of the document content, for example, code represents the code in the document;video represents the video in the document; CSS is used to control the form of these elements presented to the user (the content of the code element is presented to the user in a monospaced font), which separates the content from the presentation, for example, for the following document:

XssPayloadTest this is normal textNode

this is normal textNode include in code element

The rendering effect is as follows:

In addition, although chrome will change the font style inside the code label by default, its effect is not obvious, and it is impossible to distinguish between equal width and non-equal width fonts, as follows:

Summary: None of the above three browsers implement the concept of separating semantic elements from their rendering very well. Developers can change the "default" style of code elements through CSS.

getElementById(), getElementsByTagName(), getElementsByClassName()

The first function selects an element by its id attribute, which is unique and cannot set two elements to the same id, so the first function returns only one element;

The second function selects elements by their tag names, just as an HTML document may contain multiple div elements, a elements, etc. This selects all elements with the same tag name (As can be seen from the Elements in its name, in contrast, the function selected by id has no s after the Element in its name), so it returns a collection of elements with the same tag name. In actual development programming, it is usually used to store these elements with a javascript variable, and then access the individual elements through C array-style syntax;

The third function selects elements by their "class names," which are defined by the HTML specification and depend on to build the DOM tree; conversely, class names, which are part of the element's optional attributes, need to be user-defined and generally do not depend on to build the DOM tree.

Class names can divide HTML documents into elements with the same tags and different tags into the same class, and then reference these elements through the third function, so it returns the same collection of elements, which needs to be accessed through arrays, and often traverses each element in a for loop to set the rest of the attributes of each element;

Class names are also often used as class selectors for CSS, applying the same style to elements of the same class name;

Finally, pay attention to the form of the Element word when writing code. If there is less s or more s, browsers and development tools will report errors.

In Chrome and FireFox implementations, getElementsByTagName() returns an array of classes called "HTMLCollection," which is not an array defined by the true JavaScript language core, so there is a difference in "read-write performance."

If you need to select a large number of the same elements in the document to read and write through getElementsByTagName(), you can convert them into javascript arrays before reading and writing, and the speed will be significantly improved. Using Array.prototype.slice.call () you can convert to javascript arrays.

To illustrate the performance gap, consider the following code:

XssPayloadTest for (var i = 0; i < 2000; i++){ var newspanelements = document.createElement("span"); document.getElementById("SpanElementTest").appendChild(newspanelements); newspanelements.appendChild(document.createTextNode("span" + i + " ")); } var nodelist = document.getElementsByTagName("span"); [xss_clean](nodelist instanceof HTMLCollection); [xss_clean]("

"); [xss_clean](nodelist.length); [xss_clean]("

"); var convertnodelistToArray = Array.prototype.slice.call(nodelist); [xss_clean](convertnodelistToArray instanceof Array); console.time("Total time spent getting each span element one by one and reading its length each time"); for (var i = 0; i < 2000; i++){ for (var j = 0; j < nodelist.length; j++){ nodelist[j]; } } console.timeEnd("Total time spent getting each span element one by one and reading its length each time"); console.time("Total time spent getting each span element one by one"); for (var i = 0; i < 2000; i++){ for (var j =0, len = nodelist.length; j < len; j++){ nodelist[j]; } } console.timeEnd("Total time spent getting each span element one by one"); console.time("The total time it takes to convert a span element collection into an Array object and read it one by one, reading its length each time"); for (var i = 0; i

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.