HTML DOM Summary

Definition of MDN

The Document Object Model (DOM) is the programming interface for HTML and XML documents. It provides a structured representation of the document (the tree) and defines a way in which the program can access the tree to change the structure, style, and content of the document. The DOM provides a representation of the document as a structured node group and an object that contains properties and methods. Essentially, it connects web pages to scripts or programming languages.

Dom Core API

In DOM programming, the most commonly used is the document and Window objects. The Window object represents the content in the browser, which is the root element. The Document object is the root node of the documentation itself. Element inherits the common Node interface

  
 

   
  

  
document.getElementById(id)
   
  

  
element.getElementsByTagName(name)
   
  

  
document.createElement(name)
   
  

  
parentNode.appendChild(node)
   
  

  
element.innerHTML
   
  

  
element.style.left
   
  

  
element.setAttribute
   
  

  
element.getAttribute
   
  

  
element.addEventListener
   
  

  
window.onload
  
 

Interfaces and objects

Many objects are implemented on several different interfaces. For example, the Table object implements the HTML table element Interface, because the Table object is also an HTML element, so it also implements the element interface, and finally, it is a node in the number of nodes, so more basic also implemented the Node interface

Property manipulation

  
 

   
  

  
// 获取一个{name, value}的数组
   
  

  
var attrs = el.attributes;
   
  

  

   
  

  
// 获取、设置属性
   
  

  
var c = el.getAttribute(‘class‘);
   
  

  
el.setAttribute(‘class‘, ‘highlight‘);
   
  

  

   
  

  
// 判断、移除属性
   
  

  
el.hasAttribute(‘class‘);
   
  

  
el.removeAttribute(‘class‘);
   
  

  

   
  

  
// 是否有属性设置
   
  

  
el.hasAttributes(); 
  
 

From for notes (Wiz)

HTML DOM Summary