Get the API for the element

Get an element, also called a tag

  • window.idxxx Or directlyidxxx// Get an element of a page
  • document.querySelector('#idxxx') // Find an element that satisfies the criteria
  • document.querySelectorAll('.red')[0] // Find all elements that satisfy the condition
  • document.getElementById('idxxx')Generally not used. Used when the id name conflicts with the global attribute
  • document.getElementsByTagName('div')[0]// Find all elements whose tag name is’ div ‘
  • document.getElmentsByClassName('red')[0]// Get the element by class name

The first three apis are usually used, and the last three are used only if you want to be compatible with IE

Get a specific element

  • Getting HTML elementsdocument.documentElemnt
  • Get the head elementdocument.head
  • Get the body elementdocument.body
  • Access to the windowwindow(Window is not an element, sometimes used to get window to add some global event listener)

For example,

  • Get all elementsdocument.allIt was invented by Internet Explorer, and many early programmers used it to detect if the current page was an Internet Explorer browser.document.allIt’s the sixth falsy value.

Element’s 6-layer prototype chain

  • Div complete prototype chain

Node Node type

Enter. NodeType after any node to obtain the nodeType

  • 1 represents the element Elment, also known as the Tag
  • 3 indicates the Text
  • 8 indicates Comment
  • 9 indicates the Document
  • 11 indicates a DocumentFragment

Add, delete, modify and check nodes

increase

  • Create a label node
  1. let div1 = document.createElement('div')
  2. document.createElement('style')
  3. document.createElement('script')
  4. document.createElement('li')
  • Create a text node

Text1 = Document.createTextNode (' Hello ')

  • Insert text inside the tag
  1. div1.appendChild(text1)// Interface provided by node
  2. Div1. innerText =' Hello 'orDiv1. TextContent = 'hello'// The interface provided by Element
  3. Div1.appendchild (‘ hello ‘) cannot be used,

If div1 is created in JS, it will not be displayed on the page. It will only exist in JS memory and must be added to the body

  • Insert into the page

The tag you create is in the JS thread by default, and you must insert it in the head or body for it to take effect

document.body.appendChild(div)

or

Element already in the page. AppendChild (div)

  • The characteristics of the appendChild: An element cannot appear in two places unless it is cloned, eg:let div2 = div1.cloneNode()

For example:

The page has div#test1 and div#test2

let div = document.createElement(‘div’)

test1.appendChild(div)

test2.appendChild(div)

Eventually div will appear in Test2

delete

Two ways:

  1. Old method: parentNode.childChild(childNode)
  2. New method: childNode.remove() //IE not supported

If a node is removed from the page (DOM tree), it can still be returned to the page, removed from the page but still in memory. If you want to delete the node, remove the node first and then set node=null, the node will be disconnected from memory and will be automatically garbage collected

change

Change attributes

  • Write standard properties
  1. To change the class: div.className='red blue'// className bug: every time you change the className, it overwrites the previous one
  2. To change the class:div.classList.add('red')
  3. Change a style:div.style='width:100px; color:bule'// Not recommended, will overwrite the previous style
  4. Change part of style:div.style.color='blue'
  • Read standard attribute

div.style

div.className

Div.classlist/a.href // This method may be processed by the browser

Div.getattribute (‘class’)/a.getAttribute(‘href’) // This method is safer

Change the event handler

  • div.onclickThe default isnull

By default, nothing happens when you click div,

But if you change div. Onclick to a function fn,

So when I click on div, the browser will call this function,

And it’s called like this: fn.call(div, event),

Div will be treated as this,

The event contains all information about the clicked event, such as coordinates

  • div.addEventListener

Onclick is an updated version of div.onclick. Onclick can only write one function, while addEventListener can write an infinite number of functions

To change the content

  • Change the text content
  1. div.innertext = 'xxx'
  2. div.textContent = 'xxx'

Browsers generally support both by default, and there is almost no difference

  • To change the HTML content

Div. InnerHTML = '<strong> </strong>'

If the content is too long and complex, more than 20,000 characters, the page may get stuck

  • To change the label
  1. div.innnerHTML = ''/ / empty first
  2. div.appendChild(div2)// Add content

Change to the parent element

newParent.appendChild(div)

check

View the API for the element

  • Look up dad

Node. ParentNode or node. ParentElement

  • Check the grandpa

node.parentNode.parentNode

  • Check the offspring

Node.childnodes (including text nodes) or node.children (excluding text nodes)

  • Cha brothers and sisters

Node. ParentNode..childnodes also exclude themselves and a text node

Node.parentnode. children also excludes themselves

  • Check the boss

node.firstChild

  • Check one

node.lastChild

  • Check last brother/sister

Node.previoussibling (text node may be found)

Node. PreviousElementSibling (avoid text node)

  • Check out the next brother/sister

Node. nextSibling (text node may be found)

Node.nextelementsibling (Avoid text nodes)

  • Iterates over all the elements in a div
travel = (node,fn) = > {
  fn(node)
  if(node.children){
    for(let i=0; i<node.children.length; i++){
      travel(node.children[i], fn)
    }
  }
}
travel(div1,(node) = > console.log(node))
Copy the code