Talk about redrawing and rearranging

Talk about redrawing and rearranging

1. Rearrangement and redrawing are one of the main reasons for energy consumption in DOM programming.
2. Rearrangements (reflux): When render treea part or all of the elements because of the size, the layout, hidden, and so change caused by re-rendering of the page, a process referred to as rearrangement.
3. Redraw: When the render treeupdated attributes in the (render tree) only affect the appearance and style of the element, but not the layout of the element, the browser needs to redraw the style of the current element, which is called redrawing.
4. Redrawing will not cause rearrangement, but rearrangement will definitely cause redrawing. The rearrangement of an element usually brings about a series of reactions, and even triggers the rearrangement and redrawing of the entire document. The performance cost is high.

Respectively describe innerHTML innerText textContent

• innerHTML: When obtaining, the label is obtained as a string.

  • When set, the tags in the string are directly parsed.

• innerText: When getting, only get the content of the text node in the element.

  • When set, the tags in the string will not be parsed.

• textContent: When getting, only get the content of the text node in the element.

  • When set, the tags in the string will not be parsed.

The old method is set to get and delete the attribute method

• Own attributes

  1. Directly through 元素对象.属性名to get.
  2. If some of its own attributes conflict with the keywords of js, then the method of obtaining the current own attributes will be modified. For
     example, when the class attribute is obtained, it can be classNameobtained.

• Custom attributes

  • Obtain:
    1. Can not directly 元素对象.属性名get to, because he did not find the property on its own property of the current element, the current element will be the object as a js object to gain his property up.
    2. The user-defined attribute must be getAttributesearched before the current self-attribute can be found on the attribute of the element.
  • Settings:setAttribute(key,value)
  • delete:removeAttribute(key)

h5 custom attributes

1. h5 stipulates:

   • If it is a custom attribute, please add a data-*prefix.
   • h5 provides an datasetattribute for each element , which is an object, which saves all the custom attributes of the current element.
   • As long as datasetyou manipulate properties on this object, you are manipulating custom properties for the current element.

2. Set h5 custom attributes to
   useele.dataset.key = value

3. Get custom attributes
   useele.dataset.key

4. Delete custom attributes
   usedelete ele.dataset.key

Create element node insert element node copy node delete node replace node operation

1. Create an element node:
   document.createElement("元素名");
   Special: new Image()Create an img tag.

2. Insert node:

   1. A.appendChild(B);
      Insert a B node at the end of the inside of the A element.
   2. A.insertBefore(new,old);
      Insert a new directly in front of the old element. New and old are brothers.
      A is the parent element node of old and new.

3. A.cloneNode();

   • Copy node A.
   • The parameter is a boolean and the default is false.
     • false means shallow copy only copies the current element.
     • true is to deep copy the current element and all elements inside.

4. Delete element:
   A.removeChild(B)
   delete the child element B in the A element.

5. Replace element:
   A.replaceChild(new,old)
   replace old with new
   A is the parent element of new and old.