The Document node

Document property of the node

document.doctype   			// Returns the document Type definition (DTD) associated with the current document. Doctype is a read-only attribute.
document.documentElement    // Returns the root node of the current document
document.defaultView   		// Return the window object of the Document object
document.body   			// Returns the  node of the current document
document.head   			// Returns the  node of the current document
document.activeElement      // Returns the element that is in focus in the current document.
Copy the code

Node set properties Node set properties

document.links  	  // Returns all a elements of the current document
document.forms  	  // Returns all form elements in the page
document.images  	  // Returns all image elements on the page
document.embeds  	  // Returns all embedded objects in the web page
document.scripts  	  // Returns all scripts for the current document
document.styleSheets  // Returns all stylesheets for the current page
Copy the code

Document information attributes

document.documentURI    // Represents the url of the current document
document.URL  			// Returns the url of the current document
document.domain  		// Returns the domain name of the current document
document.lastModified   // Returns the last modified timestamp of the current document
document.location  		// Returns a location object that provides the URL information for the current document
document.referrer  		// Returns the source of access to the current document
document.title    		Return the title of the current document
document.characterSet 	// Returns the character set used to render the current document, such as UTF-8, ISO-8859-1.
document.readyState  	// Returns the current document status
document.designMode  	// Controls whether the current document is editable, readable and writable
document.compatMode  	// Return to the mode in which the browser processes the document
document.cookie   		// Used to manipulate cookies
Copy the code

Document node method

(1) Read-write methods

document.open()    // To create and open a document
document.close()   // Use the open method to create a new document
document.write()   // Write to the current document
document.writeIn() // Used to write to the current document with a newline character at the end.
Copy the code

(2) Find the node

document.querySelector(selectors)    		 // Takes a CSS selector as an argument and returns the first element node that matches the selector.
document.querySelectorAll(selectors)  		 // Takes a CSS selector as an argument and returns all element nodes that match that selector.
document.getElementsByTagName(tagName)       // Returns all elements with the specified HTML tag
document.getElementsByClassName(className)   // Returns all elements whose class names match the specified criteria
document.getElementsByName(name)   			 // Select HTML elements that have the name attribute (e.g. 
      

       , 
       
        , 
        , , 
        , 
        , etc.)
       
      

document.getElementById(id)   				 // Returns the element node matching the specified id attribute.
document.elementFromPoint(x,y)  			 // Returns the Element child node at the top of the page.
Copy the code

(3) Generate nodes

document.createElement(tagName)     // Used to generate HTML element nodes.
document.createTextNode(text)   	// Used to generate text nodes
document.createAttribute(name)  	// Generate a new property object node and return it.
document.createDocumentFragment()   // Generate a DocumentFragment object
Copy the code

(4) Event method

document.createEvent(type)   					     // Generates an event object that can be used by the element.dispatchEvent() method
document.addEventListener(type,listener,capture)  	 // Register events
document.removeEventListener(type,listener,capture)  // Cancel the event
document.dispatchEvent(event)  						 // Trigger the event
Copy the code

(5) Others

document.hasFocus()   					  // Returns a Boolean value indicating whether any elements in the current document are active or in focus.
document.adoptNode(externalNode)  		  // Remove a node from its original document, insert the current document, and return the inserted new node.
document.importNode(externalNode, deep)   // Copy the specified node from the external document and insert the current document.
Copy the code