“This is my 7th day of the Gwen Challenge in November. Check out the details: [Last Gwen Challenge 2021]

preface

The Document Object Model (DOM) is a programming interface for HTML and XML documents. The DOM represents a document made up of several layers of nodes through which developers can add, remove, and modify parts of the page. Born out of netscape and Microsoft’s early days of Dynamic HTML (DHTML), DOM is now a truly cross-platform, language-neutral way of presenting and manipulating web pages. DOM Level1 became a W3C recommendation in 1998 and provides an interface to basic document structure and queries. This chapter introduces the DOM primarily because it relates to HTML pages in the browser and provides the DOM API in JavaScript. \

Note: DOM in IE8 and below is implemented through COM objects. This means that DOM objects in these versions of IE behave and function differently than native JavaScript objects.

The node type

DOM Levell describes the interface called Node, which all DOM Node types must implement. The Node interface is implemented as a Node type in javascript and is directly accessible in all browsers except IE. In JavaScript, all Node types inherit from Node types, so all types share the same basic properties and methods. Each node has the nodeType attribute, which indicates the type of the node. Node types are represented by 12 numeric constants defined on the Node type :\

  •  Node . ELEMENT _ NODE (1)
  •  Node . ATTRIBUTE _ NODE (2)
  •  Node . TEXT _ NODE (3)
  • Node.cdata _ SEC ION _ Node (4)
  • Node.evti Y _ REFERENCE _ Node (5)
  •  Node . ENTITY _ NODE (6)
  •  Node .PROCESS1NG_ INSTRUCTION _ NODE (7)
  • Node.co mand_node (8)
  •  Node . DocUMENT _ NODE (9)
  •  Node . DocUMENT _ TYPE _ NODE (10)
  •  Node . DocUMENT _ FRAGMENT _ NODE (11)
  •  Node . NO Т ATION _ NODE (12)

The node type can be determined by comparing it with these constants, for example:

 if ( someNode . nodeType == Node . ELEMENT _ NODE ){ alert ("Node is an element.");Copy the code

This example compares somenode.nodeType with the node.element _ Node constant. If the two are equal, it means that someNode is an element node. Browsers do not support all node types. The most common ones developers use are element nodes and text nodes. The extent to which each node is supported and its usage will be discussed later in this chapter.

NodeName and nodeValue

NodeName and nodeValue hold information about a node. The values of these two attributes depend entirely on the node type. Before using these two attributes, it is a good idea to check the node type, as shown below:

if ( someNode . nodeType ==1){ value = someNode . nodeName ; // The tag name of the element is displayedCopy the code

In this case, the node is checked to see if it is an element. If so, the value of its nodeName is assigned to a variable. On the element side, nodeName is always equal to the label name of the element, and nodeValue is always null.

Relationship between nodes

All nodes in a document are related to other nodes. These relationships can be described as family relationships, the equivalent of comparing document trees to authors. In kHTML, the < body > element is a child of the < HTML > element, and the < HTML > element is the parent of the < body > element. A < head > element is a sibling of a < body > element because they share a parent < HTML >.

Each node has a childNodes property that contains an instance of NodeList. NodeList is an array-like object for storing ordered nodes that can be accessed by location. Note that NodeList is not an instance of Array, but its value can be accessed using brackets, and it also has a Length attribute. The NodeList object is unique in that it is actually a query into the DOM structure, so changes to the DOM structure are automatically reflected in NodeList. A NodeList is usually said to be a live object, rather than a snapshot of the content acquired when first accessed.

let firstChild = someNode . childNodes [0]; \ let secondChild = someNode . childNodes . item (1); let count = someNode . childNodes . length ; \Copy the code

The example shows how to access elements in NodeList using brackets or the item () method: Both brackets and the item () method are ok, but most developers prefer to use brackets because it is an array-like object. Note that the Length attribute represents the number of nodes in NodeList at that time. Use array.prototype.slice () to convert a NodeList object to an Array just as we introduced arguments earlier.