Related concepts and operations of DOM model

DOM Basic concepts

Document object model （DOM,Document Object Model） Is aimed at XML But extended to HTML Application programming interface for （API,Application Programming Interface）

DOM Display and operation HTML and XML The basis of document content API, among Document -- XML file or HTML file ;Object -- Object Properties and methods of objects ;Model -- Model Model ,DOM Is aimed at XML or HTML Based on tree structure API

according to W3C DOM standard ,DOM It's a browser , platform , Language independent interfaces , It allows us to access other standard components of the page

DOM Map the whole page to a multi-layer node structure ,HTML or XML Each component of the page is a node of some kind , These nodes contain different types of data .

Core DOM The operation of

Look at the node

getElementById();              By element id Value to view

getElementsByName();          Of the query element name attribute

getElementByTagName();       Returns a collection of objects with the specified label name

The parent node finds the child node  

  Find child node objects through parent node objects （ There may be text nodes ） Compatibility is good.

Parent node object .firstChild Find the first child node under the parent node

Parent node object .lastChild Find the last child node under the parent node

Parent node object .childNodes Multiple Find all child nodes under the parent node

Find the child element node object through the parent node object  

  Parent node object .firstElementChild Find the first child element node under the parent node

Parent node object .lastElementChild Find the last child element node under the parent node

Parent node object .children Multiple Find all child element nodes under the parent node

  The child node finds the parent node

  Child node object .parentNode Find the parent node through the child node

Child node object .parentElement Find parent elements through child nodes

  Search between brothers

.nextSibling   Find the next sibling   May be text

.nextElementSibling Find the next element sibling node

.previousSibling   Find the last sibling   May be text

.previousElementSibling    Find the sibling node of the previous element

Node object

Node object .getAttribute(" Property name ") Get the property value according to the property name
Node object .setAttribute(" Property name "," Property value ")
Node object .removeAttribute(" Property name ")   Delete the corresponding pair of genera