This is the 27th day of my participation in the August More Text Challenge

1. Operate BOM objects

BOM: Browser object model

Navigatoe object, encapsulating the browser information.

navigator.appName
"Netscape"
navigator.appCodeName
"Mozilla"
navigator.appVersion
"5.0 (Linux; The Android 6.0. Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36"
Copy the code

(2) Location object, representing the URL information of the current page

host: "blog.csdn.net"
hostname: "blog.csdn.net"
href: "https://blog.csdn.net/ccpat/article/details/44491105"
origin: "https://blog.csdn.net"
pathname: "/ccpat/article/details/44491105"
port: ""
protocol: "https:"
Copy the code

(3) Document, representing the current page

document.location
Location {ancestorOrigins: DOMStringList, href: "Https://www.bing.com/search?q=super%28name%29&form... 11&qs=n&sk=&cvid=D099FCD46A1342A1A78EA601D989FE68".origin: "https://www.bing.com".protocol: "https:".host: "www.bing.com",... }document.URL
"https://www.bing.com/search?q=super%28name%29&form=CHRDEF&sp=-1&pq=super%28name%29&sc=0-11&qs=n&sk=&cvid=D099FCD46A1342 A1A78EA601D989FE68"
Copy the code

(4) history, which represents the history of the browser

history.forward();
Copy the code

2. Operate DOM objects

DOM is an HTML document object model.

Through the DOM, you can access all HTML elements, along with the text and attributes they contain. You can modify and delete the contents, as well as create new DOM elements.

(1) DOM node is obtained

  1. The getElementsByTagName() method returns a collection of objects with the specified label name;
  2. GetElementById () values the object based on the specified ID attribute. Returns a reference to the first object whose id attribute value is equal to sID;
  3. The getElementsByClassName() method returns a collection of all elements in the document with the specified class name.
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div id="student">
    <h1>A title</h1>
    <a id="name"> queen</a>
    <a class="birth">1997</a>
    </div>
</head>
<body>
    <script>
        let h1 = document.getElementsByTagName('h1');
        let name = document.getElementById("name");
        let birth = document.getElementsByClassName("birth");
        let student = document.getElementById('student');
        // Get all the children under the parent node
        var students = student.children;
    </script>
</body>
</html>
Copy the code

(2) Update DOM nodes

  1. Id. innerText= ‘123’ Changes the value of the text;
  2. Id.innerhtml =’123′ Parses the HTML tag.
<div id="name"></div>
    <script>
        var name = document.getElementById('name');
    </script>
Copy the code

(3) Delete DOM nodes

  1. First get the parent node;
  2. Then delete the child nodes of the parent node
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div id="student">
    <h1>A title</h1>
    <a id="name"> queen</a>
    <a class="birth">1997</a>
    </div>
</head>
<body>
    <script>
        var h1 = document.getElementsByTagName('h1');
        var father = h1.parentElement;
        father.removeChild(h1);
    </script>
</body>
</html>
Copy the code