This is the 11th day of my participation in the August More Text Challenge

☆☆☆ Consider the old and learn the new! Today’s reinforcement (DOM- Document Object Model) is important! Still want to refuel today yo!! Do do do

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Keep updating,

With their own understanding, simple and comprehensive summary of the basic knowledge points, most of the content for the vernacular content, the foundation of the foundation of the foundation to deepen understanding!

Consolidate the basic knowledge of learning JavaScript, deepen the understanding of memory, to build a solid foundation to high-rise! Come on

Let’s get started! Take it seriously!

1, comb the knowledge learned yesterday

  • BOM Model (Browser Object Model) :

    Location, History, Event, Document, Screen, Navigator, Window

  • The window object has some common methods:

    Alert Prompt confirm setInterval setTimeout Open (” URL “,””,” appearance “) close

  • Location: The page is redirected

    location.href = url

    assign()  replace()

  • Document how to find page elements:

    Operation on elements

    • Style operation. Style. Style   .style.cssText   .className
    • Attribute operation
    • Content of the operation

    Value, innerHTML, innerText

DOM Document Object Model

2.1 nodes:

HTML is the DOM root node

  • All of thehtmlElements are called element nodes
  • Attributes of all element nodes are called attribute nodes for example:The SRC attribute
  • The contents of all element nodes are called text nodes, for example:<p> Text node </p>
  • Everything is a node

2.2 Node-relation (attributes, by which relevant elements are found) :

ParentNode: parentNode

  • FirstChild node: firstElementChild(no Element means compatible with IE firstChild)

  • Last child node: lastElementChild

  • Previous sibling: previousElementSibling

  • The next sibling: nextElementSibling

  • Child node:

    • children
    • childNodes

TagName or nodeName gets the tagName

2.3 distinguishing nodeType attributes nodeType

There are three cases of value

NodeType Value element node 1 Text node 3 Property node 2Copy the code

3. Dynamic operation of nodes (create, add and delete)

Create Add Delete

3.1 create:

Document.createelement () creates the element node

document.createTextNode(); Create a text node (Understand)

Note: When an event is added to a dynamically created element, the event is added after the dynamically created element (inside the same function body).

It can also be implemented by delegation

3.2 Add: appendChild():

Usage: Parent node.appendChild (node to be added)

insertBefore()

Usage:

Parent node. InsertBefore (child node to add, refer to node)

If the reference node is null, the default is appended with the appendChild effect

Make sure you fill out both arguments

3.3 Remove: removeChild() or remove()

  • Parent node. RemoveChild (element to remove)

  • The element to remove. Remove ()

4. Node cloning

cloneNode( )

If the value is true, it indicates that both the element itself and the content are cloned

If true is not added, only the shallow clone of the element itself is cloned

5. Document Fragments:

The equivalent of a computer cache,

  • Function: improve the execution efficiency of the program

document.createDocumentFragment()

Interview questions:

Write a function exactly like this:

This function takes two parameters, the first parameter is a DOM element, the second parameter is a positive integer, the second parameter is passed a number, the DOM element to mount several

hello world

tags, implementation process, please consider JS performance optimization. 

  function fn( ele , m ){... }Copy the code

6. Dynamic operation of node properties

getAttribute()  

You can get custom and inherent property values

Obj. getAttribute(" Attribute name ")Copy the code

setAttribute()

Set properties

Obj. setAttribute(" Attribute ", "value")Copy the code

Preview: Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!

Read more:

Review of previous updates

【 Relearn JS】 Learn every day to consolidate the foundation:

Day1: js initialization

[DAY2] Various operators,

[DAY3] Data type,

【day4】 Loop structure & Conditional statement,

【 DAY5 】 function (key),

【 DAY6 】 Scope & event

【day7】 Object & Array method summary,

[day8] String method & partial sort,

【 DAY9 】Math object & Encapsulation function,

【 DAY10 】BOM- Browser object model,

More on the way… There is a long way to go