DOM programming

Get elements, also known as tags

Window.idxxx or direct IDxxxdocument.getElementById('idxxx')
  document.getElementsByTagName('div') [0]
  document.getElementsByClassName('classxxx') [0]
  document.querySelector('#idxxx')
  document.querySelectorAll('xxx') [0]
Copy the code

• Now commonly usedquerySelector querySelectorAll
• getElement(s)ByxxxOnly compatible with IE

Get specific elements

  // 1. Get the HTML element
  document.documentElement
  // 2. Get the head element
  document.head
  // 3. Get the body element
  document.body
  // 4. Get window
  window
  //5. Get all elements
  document.all // It is a Falsy value
  if(document.all){
    console('Only runs in IE')}else{
    console('Other browsers, not IE')}Copy the code

Add, delete, change and check nodes

increase

• Create a label node

  let div1 = document.creatElement('div')
  document.creatElement('style')
  document.creatElement('script')
  document.creatElement('li')
Copy the code

• Create a text node

  text1 = document.creatTextNode('hellow')
Copy the code

• Insert text inside the tag

  div1.appendChild(text1)
  div.innerText = 'hellow' | div1.textContent = 'hellow'
Copy the code

delete

old

  parentNode.childChild(childNode)
Copy the code

new

  childNode.remove()
Copy the code

  // old
  div1.parentNode.removeChild(div1)
  // new
  div1.remove()
  // Bring back the deleted node
  document.body.appendchild(div1)
  // Completely killed
  div1 = null
Copy the code

change

• Write standard attributes

  // 改class
  div.className = 'pink red' / / full coverage
  div.classList.add('red')
  / / change style
  div.style = 'width: 100px; color: blue; '
  // Change part of the style
  div.style.width = '200px'
  / / case
  div.style.backgroundColor = '#e3e3e3'
  // Change the data-* attribute
  div.dataset.x = 'xxx'
Copy the code

• Read standard attributes

  div.classList / a.href
  div.getattribute('class') / a.getAttribute('href')
Copy the code

• Change the event handler function
  1. Div.onclick defaults to null
  • Clicking div by default does nothing
  • If div. Onclick is changed to a function fn
  • So when you click on div, the browser will call this function
  • And fn.call(div, event)
  • Div will be called this
  • Enent contains all the information about the click event, such as coordinates
  2. div.addEventListenter
  • Is an updated version of div.onclick
• Modify text content

  div.innerText = 'xxx'
  div.textcontent = 'xxx'
Copy the code

• To change the HTML content

  div.innerHTML = '< strong > note < / strong >'
Copy the code

• To change the label

  div.innerHTML = ' ' / / empty first
  div.appendChid(div2) // Add the content
Copy the code

• Change to the parent

  newParent.appendChild(div)
Copy the code

check

  / / daddy
  node.parentNode | node.parentElement
  / / grandpa
  node.parentNode.parentNode
  / / the child
  node.childNodes // Descendant nodes have text and element
  node.children // The child element
  // Check siblings
  node.parentNode.childNodes // Also exclude yourself
  node.parentNode.children // Also exclude yourself
  node.firstChild / / the boss
  node.lastChild / / the youngest
  node.previousSibling // Check brother/sister
  node.nextString // Check next brother/sister
Copy the code

• Iterate over all the elements in a div

  travel1 = (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

Object styles encapsulate DOM

increase

  dom.create(`<div></div>`) // Used to create a node
  dom.after(node, node2) // Add a brother
  dom.before(node, node2) // Use it to add an older brother
  dom.append(parent, child) // For a new son
  dom.wrap(`<div></div>`) // For new fathers
Copy the code

delete

  dom.remove(node) // Used to delete a node
  dom.empty(parent) // Used to delete offspring
Copy the code

change

  dom.attr(node, 'title',?)// Used to read and write attributes
  dom.text(node, ?) // Used to read and write text content
  dom.html(node, ?) // Used to read and write HTML content
  dom.style(node, {color: 'red'}) // Change the style
  dom.class.add(node, 'pink') // Used to add classes
  dom.class.remove(node, 'pink') // Used to delete class
  dom.on(node, 'click', fn) // Used to add event listeners
  dom.off(node, 'click', fn) // Used to delete event listeners
Copy the code

check

  dom.find('selector') // Used to get tags or tags
  dom.parent(node) // Used to get the parent element
  dom.children(node) // Used to get child elements
  dom.siblings(node) // Used to get siblings
  dom.next(node) // To get the younger brother
  dom.previoous(node) // Get the older brother
  dom.each(nodes.fn) // Used to traverse all nodes
  dom.index(node) // Used to get the ranking number
Copy the code

Chain style wraps DOM(jquery-style)

check

  jQuery('#xxx') The return value is not an element, but an API object
  jQuery('#xxx').find('.red') // Look for the.red element in # XXX
  jQuery('#xxx').parent(node) // Used to get the parent element
  jQuery('#xxx').children(node) // Used to get child elements
  jQuery('#xxx').siblings(node) // Used to get siblings
  jQuery('#xxx').next(node) // To get the younger brother
  jQuery('#xxx').prev(node) // Get the older brother
  jQuery('#xxx').each(nodes.fn) // Used to traverse all nodes
  jQuery('#xxx').index(node) // Used to get the ranking number
  jQuery('.red').each(fn) // Iterate over and perform fn on each element
Copy the code

increase

  // jQuery('# XXX ') $('# XXX ')
  $('<div><span> 1 </span></div>') / / create a div
  .appendTo(document.body) // Insert into the body
Copy the code

delete

  $div.remove()
  $div.empty()
Copy the code

change

  $div.attr('title',?)// Used to read and write attributes
  $div.text(?) // Used to read and write text content
  $div.html(?) // Used to read and write HTML content
  $div.css({color: 'red'}) // Change the style
  $div.addClass('pink') // Used to add classes
  $div.on('click', fn) // Used to add event listeners
  $div.off('click', fn) // Used to delete event listeners
Copy the code