BOM and DOM operation learning

1. Foreplay

JavaScript is divided into ECMAScript, DOM and BOM. Some interactive functions of web pages use BOM and DOM related knowledge.

BOM (Browser Object Model) refers to the Browser Object Model, which enables JavaScript to "talk" with the browser.

DOM (Document Object Model) refers to the Document Object Model, through which all elements of HTML documents can be accessed.

Window object is one of the top-level objects of client JavaScript. Since window object is the common ancestor of most other objects, the reference of window object can be omitted when calling the methods and properties of window object. For example: window document.write() can be abbreviated as: document write().

2,BOM

2.1 window (important)

Window stands for browser window

window.alert(1)//Spring frame
window.innerHeight//Browser inner border height
window.innerwidth//Browser inner border width
window.open()//Open a new window
window.close()//Close current window
. . . 
//You can debug the browser window and try other

2.2 Navigator (just understand)

Navigator encapsulates the information of the browser

navigator.appName　　// Full name of Web browser
navigator.appVersion　　// Detailed string of Web browser manufacturer and version
navigator.userAgent　　// Most client information
navigator.platform　　　// The operating system on which the browser is running

2.3 screen

Screen stands for screen size

screen.availWidth //Available screen width
screen.availHeight //Available screen heights
screen.height
screen.width

2.4. history object (just understand)

The history object contains the history of the browser. The browsing history object contains the user's browsing history of the current page, but we can't view the specific address. It can be simply used to move forward or backward a page.

history.forward()  // Forward one page
history.back()  // Back one page

2.5 location (important)

The location object is used to get the address (URL) of the current page and redirect the browser to a new page.

location.host:"The server"
location.href:"route"
location.protocol:"agreement"
location.reload()//Refresh page
location.assign()//Set new address

3,DOM

DOM (Document Object Model) is a set of methods to abstract and conceptualize the content of documents. When a web page is loaded, the browser creates a Document Object Model for the page. The HTML DOM model is constructed as a tree of objects.

HTML DOM tree: [external link image transfer fails, and the source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-nnt6d7ye-1646221695300) (C: \ users \ 86183 \ appdata \ roaming \ typora \ typora user images \ image-20220302155008141. PNG)]

The DOM standard specifies that each component in an HTML document is a node:

Document node (document object): represents the whole document
Element node (element object): represents an element (label)
Text node (text object): represents the text in the element (label)
Attribute node (attribute object): represents an attribute, and only elements (labels) have attributes
Comments are comment nodes (comment objects)

JavaScript can create dynamic HTML through DOM:

JavaScript can change all HTML elements in a page
JavaScript can change all HTML attributes in a page
JavaScript can change all CSS styles in a page
JavaScript can respond to all events in the page

3.1. Obtaining nodes

let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');

let children = father.children;//Get all nodes under the parent node

3.2. Update node

<div id="id1">123</div>

<script>
    let id1 = document.getElementById('id1');
</script>

Operation text

id1.innerText='456' //Modify the content of the text
id1.innerHTML='<strong>123</strong>'  //HTML text tags can be parsed

Operation css

For CSS properties without horizontal lines, style is generally used directly Property name is enough
```
id1.style.margin
id1.style.width
id1.style.left
id1.style.position
```
For CSS properties with middle horizontal line, replace the first letter after the middle horizontal line with uppercase (i.e. hump)
```
id1.style.marginTop
id1.style.borderLeftWidth
id1.style.zIndex
id1.style.fontFamily
```

3.3. Create node

CreateElement (tag name)

<script>
    //1. Create a new node through Js
    let newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'hello';
    list.appendChild(newP)
    //2. Create a label node through setAttribute
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //Create a style tag
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: yellowgreen;}';//Set label content

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

3.4. Insert node

1. append 2 insert

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    //1. append
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.appendChild(js);//Refers to appending js to the list
    //2. insert
    let ee = document.getElementById('ee');
    list.insertBefore(js,ee);//The js node is inserted in front of the ee node
</script>

3.5. Delete node

Step: get the parent node first, and then delete yourself through the parent node

<div id="father">
    <h1>title</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let self = document.getElementById('p1');
    let parentSelf = p1.parentElement;
    //parentSelf.removeChild(self);

    //Deletion is a dynamic process
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);//Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
</script>

Note: when deleting multiple nodes, children are always changing!

Keywords: Javascript Front-end Programming

Added by venradio on Wed, 02 Mar 2022 14:00:41 +0200

Programming VIP