DOM

  • Document Object Model
  • JS through THE DOM to the HTML document operation. As long as you understand the DOM, you can manipulate WEB pages in any way you want
  • The document
    • A document represents the entire HTML web page document
  • object
    • Object means to convert every part of a web page into an object
  • model
    • Using models to represent relationships between objects makes it easy to get objects

node

  • The most basic unit of an HTML document
  • A Node is the most basic component of a web page. Each part of a web page can be called a Node
  • For example, HTML tags, attributes, text, comments, entire documents, etc. are all nodes
  • Although both are nodes, their specific types are actually different
  • For example, tags are called element nodes, attributes are called attribute nodes, text is called text nodes, and documents are called document nodes
  • Different types of nodes have different attributes and methods

Common nodes

  • Document node: The entire HTML document
  • Element nodes :HTML tags in HTML documents
  • Attribute node: Attributes of an element
  • Text node: Text content in AN HTML tag

Attributes of nodes

The event

  • Events are specific moments of interaction that occur in a document or browser window
  • The interaction between JavaScript and HTML is achieved through events
  • Typical times for Web applications are clicking on an element, moving the mouse over an element, pressing a key on the keyboard, and so on

The binding event

  • You can bind events in button properties (not recommended)
  • You can also get objects by binding events to functions (recommended)

The order in which the browser loads the page

Script attributes are usually written at the bottom of the body

  • When a browser loads a page, it loads the page from top to bottom. When it reads a line, it runs the line. If the script tag is written to the top of the page, the page is not loaded when the code is executed

onload()

The onload event is triggered after the entire page is loaded. Bind an onload event to the window, and the corresponding response function will be executed after the page is loaded. This ensures that all DOM objects have been loaded by the time our code executes

Get element node

  • Through the Document object
  • GetElementById () gets an element node object via the ID attribute
  • GetElementsByTagName () gets a set of element node objects by tag names
    • This method returns an array-like object in which all queried elements are encapsulated
    • Even if only one element is queried, it will be wrapped in an array and returned
  • GetElementsByName () gets a set of element node objects through the name attribute

innerHTML

To get the HTML code inside the element

For self-closing tags, this attribute has no meaning

Reads element node attributes

Use element. Attribute names directly

For example, element id element Name element value

Note: The class attribute does not work this way

The.class.name element is required to service the class attribute

The instance

Gets the children of the element node

  • Called by a specific element node
  • GetElementsByTagName () — method that returns the descendant node of the current node with the specified tag name
  • ChildNodes — Property that represents all children of the current node
    • The childNodes property retrieves all nodes, including text nodes
    • Based on DOM tags, the space between tags is also treated as a text node
    • Note that in browsers below IE8, blank text is not treated as a child node
  • The children property gets all the children of the current element
  • FirstChild — property that represents the firstChild of the current node
    • FirstElementChild does not support Internet Explorer 8 and below
    • Don’t use them if you need to
  • LastChild – property that represents the lastChild of the current node

Gets the parent and sibling nodes

  • Called by a specific node
  • ParentNode — Property that represents the parent of the current node
  • PreviousSibing — property that represents the previous sibling of the current node
  • NextSiblin – Property that represents the next sibling of the current node

innerText

  • This property retrieves the text inside the element
  • It’s similar to innerHTML, but it automatically strips out the HTML if it’s different

body

There is an attribute body in the document, which holds a reference to the body

documentElement

Document.documentelement holds the HTML root tag

all

Represents all elements in the page

Class attribute value

  • Queries a set of element node objects based on their class attribute value
  • GetElementsByClassName () gets a set of element node objects based on the class attribute value
  • However, this method does not support Internet Explorer 8 and below

querySelector()

document.querySelector()

  • Requiring a selector string as an argument, you can query an element node object against a CSS selector
  • Although THERE is no getElementsByClassName() in IE8, you can use querySelector() instead
  • Using this method returns a unique element, or only the first value if there are multiple elements that satisfy the condition

querySelectorAll()

  • This method is similar to querySelector(), except that it returns the matched elements wrapped in an array
  • It returns the array even if only one element matches the criteria

Dom additions, deletions and changes

createElement

  • document.createElement()
  • Can be used to create an element node object. It takes a label name as an argument and will create the element node object based on that label name
  • And returns the created object as the return value

createTextNode

  • document.createTextNode()
  • Can be used to create a text node object
  • A text content is required as an argument, and a text node is created from that content and the new node is returned

appendChild

  • appendChild()
  • Adds a new child node to a parent node
  • Usage: Parent node. AppendChild (child node)

insertBefore

  • insertBefore()
  • You can insert a new child node before the specified child node
  • Syntax: parent node. InsertBefore (new node, old node);

replaceChild

  • replaceChild()
  • You can replace an existing child node with a specified child node
  • Syntax: parent. ReplaceChild (new node, old node);

removeChild

  • removeChild()
  • You can delete an existing node
  • Syntax: parent node. RemoveChild;

ParentNode child node

  • When the parent element of the child node (for example, BJ) is not known
  • Get the parent element using bj. ParentNode
  • bj.parentNode.removeChild(bj);
  • You can delete an existing BJ node without knowing its parent

innerHTML

  • You can also add, delete, or modify the DOM using innerHTML
  • Change the Beijing node to Changping

  • Add guangzhou node to city

  • Usually we use a combination of the two