DOM simple content

DOM: Document Object Model, the objects owned by the currently loaded page (document). It is developed by the World Wide Web Consortium (W3C) and has several different versions (levels). The latest one today is DOM level 3. Browsers now basically fully implement level 1. The implementation of browsers accessing documents before the DOM appeared is now marked as level 0, and some are also written to level 1, and others are used as features of some browsers. The methods and properties for adding, moving, changing or removing elements of a page through JavaScript are all provided by the DOM.

Also, the BOM is the browser object model, objects owned by things other than the page (browser windows and desktop screens). It is not a standardized component, but similar to level 0, a part of the object set is supported by all major browsers, and the other part is a browser feature.

The DOM can access and modify the content and structure of a document in a platform- and language-independent manner. It is a common method for processing HTML documents. Its design is based on the Object Management Group (OMG) specification and is also A set of language-independent application programming interface (API), so it can be used in any programming language, can be used to make js files portable during browsing, but in fact it can make the user page dynamically change can dynamically show or hide or add or remove elements , to change the attributes of the element.

According to the W3C's HTML DOM standard, all content in an HTML document is a node, and the entire document is a document node; each HTML element is an element node; the text within an HTML element is a text node; each HTML attribute is an attribute node; comments is the comment node. All nodes through the DOM are accessible through js. In short, DOM is a way to parse HTML documents into tree nodes.

<html>
       <head>
              <title>POS Machine-Web Version</title>
       </head>
       <body>
              <h1></h1>
              <p></p>
       </body>
</html>

In the above code, the head node can be regarded as the parent node (the ancestor node) of the title node, the relative title is its child node, and the title node also has a child node: the text node' POS machine-web version, and the parent node of the head node The node is the html node (and HTML is also the root node), body and head, h1 and p are sibling nodes (? sibling nodes).

The two methods, getElementById() and getElementByTagName(), can be used to access all HTML nodes. These two methods ignore the HTML document structure and return the required elements, and search directly through the node's id or tag name attribute, while the tagname method will return an List of all required labels.

document.getElementsById（‘POS’）.getElementsByTagName('p')

The above example will return all p tags with id POS in the HTML document.

(PS: The value of a text node can be accessed through the node's innerHTML property.)

var a = document.getElementsByTagName('p')

The above example shows that we can store all the obtained tag lists in a variable a in the form of an array, and then we can obtain the corresponding elements through the index, so add functions such as forEach, length, or lodash to the js file. to access this list. At the same time, there are three properties of parentNode, firstChild, and lastChild, which follow the document structure and move to the node that meets the requirements.

var a = document.getElementsById('sp');
a.parentNode.removeChild('b')

This code will first get the element whose id is sp, then move to its parent node and execute the removeChild() method. DOM components can access any element in the page (even comments and whitespace), while the content that js can access is limited to some elements in HTML, such as the following collection objects:

document.images is equivalent to document.getElementsByTagName('img') in Core DOM components
document.applets is equivalent to document.getElementsByTagName('applets')
document.links is a list containing all a tags with href attributes in the page
document.anchors contains all a tags with name attribute in the page
document.forms is the most widely used, this is a list of all form tags, such as accessing the first form in the page  
Elements can be document.form[0]

The forms collection contains a series of input fields and buttons, which can be accessed through the elements property of the object, such as the first input field in the first form element on the page:

document.forms[0].elements[0]

Finally, when this dish encounters the problem of page jumping in the production page, a function method to try: (Because there are other problems that have not been solved, the correctness of the method cannot be judged)

var obj = document.getElementsById('to be processed')
obj.onclick = function(){
       windows.location.href('www.asdfg.com')
}

Guess you like