This is the 17th day of my participation in the August Challenge

DOM full name is (Document Obejct Model), it is a Document object Model, DOM represents a Document composed of multiple nodes, through which developers can add, delete and modify pages. DOM is a cross-platform, language-independent way of representing and manipulating web pages.

What is the Document

The Document type is the type of Document node in JS. In the browser, Document is an instance of HTMLDocument, which represents the entire HTML page. The Document object can also be used to retrieve information about a page and manipulate the appearance and underlying structure of the page.

Document child node

The child nodes of document can be DocumentType, Element, processing-Instruction, and Comment. We usually use document.Element to get page elements.

The Document object also has a body attribute, which points directly to the body element. We can see that we have the body element.

Document information

There are also properties on the Document object that provide information about the page that the browser is loading, and one of them is the common title, which is the title of our page.

    let Rtitle = document.title;
    console.log(Rtitle);// Read the current document.title
    document.title = 'jacksonDOM'; / / modify the document. The title
Copy the code

We can see the default document, we changed the title in the third line of code, it just changed.

The document object also has three properties URL, domain, and referrer.

URL is the full URL of the current page

Domain is the domain name of the page

Referrer is the last URl linked to the current page, and is an empty string if the current page is not redirected.

    let url = document.URL;
    let domain = document.domain;
    let referrer = document.referrer;
    console.log(url);
    console.log(domain);
    console.log(referrer);
Copy the code

We can actually see this in the HTTP request header

Positioning elements

The most common way to get a page element or a set of elements is by id, tag name, or class name.

  • getElementById()

    GetElementById () gets the element ID. It receives an ID value and returns the element if it is found, or null if it is not. If there are two ids, only the first one is displayed, because the first one is returned.

    let root = document.getElementById('root');
    console.log(root);
Copy the code

  • getElementsByTagName()

GetElementsByTagName () is a set of elements that we can manipulate with subscripts.

    let lis = document.getElementsByTagName('li');
    console.log(lis);
Copy the code

  • GetElementsByClassName () gets the element of the class class name.
    let active = document.getElementsByClassName('active');
    console.log(active);
Copy the code

There are a lot of variations on these three methods of acquisition that you can try on your own.

Document writing

The document object also has a document writing function,write () and writeln(), which are writes. Write is to write u text, and writeln is to add a newline after writing.

    document.write('<p>' + 'jackson' + '</p>');
    document.writeln('<p>' + 'bear' + '</p>');
Copy the code

Document also has two methods, open(),close(), the first one is open and the second one is close, which we don’t really use in development, but these are ancient skills.