What is the difference between innerText and innerHTML of dom objects?

This article will explain the relevant differences between innerText and innerHTML of dom objects.

innerText will display all output in the form of text on the page, and inderHTML will return the HTML structure of the element and automatically create a DOM based on the content.

What is the difference between elem.children and elem.childNodes?

elem.children is to get DOM node objects other than text nodes,
elem.childNodes is to get all DOM nodes, including empty and text nodes.

How many common methods are there to query elements?

getElementsById(): Find the element with the specified ID attribute

getElementsByClassName(): Find the element with the specified class attribute

getElementsByTagName(): Find the element with the specified tag

getElementsByName(): Find elements with the name attribute

querySeletor(): Equivalent to the css selector, find the first node with a matching label

querySeletorAll(): Equivalent to css selector, find all nodes with matching tag

How to create an element? How to set attributes to elements?

createElement() creates an HTML element, the parameter is tagname, without <> brackets.

createTextNode() creates a text node, and the parameter is the text content.

setAttribute() is used to set element attributes.

Add or delete elements?

appendChild(): Add an element at the end of an element

insertBefore(): Add an element before an element

removeChild(): Remove an element

What is the difference between DOM0 events and DOM2 level event listening methods?

DOM level 0 event is to bind a function assignment to an event handler, and can only handle one event at the same time.

DOM2 level defines two methods for handling the operations of specifying and deleting event handlers, and can add multiple event handlers for events.

What is the difference between attachEvent and addEventListener?

The number of parameters is different. addEventListener has three parameters, and attchEvent has only two. The time handler added by attachEvent can only occur in the bubbling stage. The third parameter of addEventListener can determine whether the added event handler is captured. Stage or bubbling stage processing

The meaning of the first parameter is different. The first parameter of addEventListener is the event type (such as click, load), while the first parameter of addachEvent specifies the name of the event processing function (onclick , onload)

The scope of the event handler is different. The scope of addEventListener is the element itself, this refers to the triggering element, and the attachEvent event handler will run in the global variable, this is window

When adding multiple event handlers to an event, the execution order is different. addEventListener will be added in the order of addition, while addachEvent will add multiple event handlers in an irregular order (when there are few methods added, most of them will be in the order of addition). (Executed in reverse order, but if you add too many, it will become irregular), so when adding more than one, if you rely on the order of execution functions, you need to handle it yourself, and you cannot rely on the browser.

Explain IE event bubbling and DOM2 event propagation mechanism?

IE event bubbling means that events will start from the innermost element and propagate upward layer by layer until the HTML root node.

DOM2 event propagation mechanism:

Event capture phase: Events search for the target node of the event layer by layer from the root node downwards.

Target stage: reach the target node and execute the target event.

Event bubbling stage: Events are traced back from the target node to the root node layer by layer.

How to stop events from bubbling? How to prevent default event?

Use the stopPropagation() function to prevent event bubbling.

Use the preventDefault() function to cancel the default behavior of the event.

Code question

There is the following code, which requires the console to display the text content of each element li when the element is clicked. Regardless of compatibility

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li></ul>
  <script>var ct = document.querySelector('.ct'),
    li= ct.querySelectorAll('li');for(var i= 0; i< li.length; i++){
    li[i].onclick = function(){        console.log(this.innerText);
    }
}</script>

This article explains the relevant differences between innerText and innerHTML of dom objects. For more related content, please pay attention to the php Chinese website.

Related recommendations:

Some basic questions about JS

How to modularize require using front-end js .js

An example of a button implemented with a picture using CSS

The above is the detailed content of What is the difference between innerText and innerHTML of dom objects?. For more information, please follow other related articles on the PHP Chinese website!