Add/Remove - HTML DOM Common Objects - BOM - Opening and Closing Windows - history-location

1. Add/Remove

3 steps:

1. Add an empty element

var a=document.createElement("a");

<a></a>

2. Define the key attributes of the element

a.innerHTML="text";

a.href="url";

3. Add a new element to the DOM tree

parent.appendChild(a) Append a to the end of the child element under parent

parent.insertBefore(a,child) insert a before child

parent.replaceChild(a,child) replace child with a

Optimization: Minimize the number of operations on the DOM tree

Why: As long as the DOM tree is modified, it will cause a reflow and repaint

Reducing the number of times to modify the DOM tree is to reduce the number of reordering and redrawing

Web page loading process:

html -> DOM Tree

↓

Render Tree -> layout -> paint

↑ Reflow Redraw

css -> cssRules

How: 2 types:

1. Add both parent and child elements:

In memory first, add all child elements to the parent element

Finally, add the parent element to the DOM tree all at once

2. If the parent element is already on the page, add multiple flat child elements:

Using document snippets:

What is: A virtual parent element that temporarily holds multiple flat child elements in memory

When: Add multiple flat child elements

How To: 3 Steps:

1. Create a document fragment:

var frag=document.createDocumentFragment();

2. Temporarily add child elements to the frag

frag.appendChild(child);

3. Add the document fragment as a whole to the DOM tree

parent.appendChild(frag)

删除: parent.removeChild(child)

child.parentNode.removeChild(child)

2. Common objects of HTML DOM:

Image: Represents an <img element

var img=new Image();

Select: represents a <select element

Attribute: .selectedIndex Get the index of the currently selected item

.value Get the value of the currently selected item

If option has no value, use innerHTML instead

.options Get the collection of all option objects under the current select

.options.length Get the number of all options under select

.length => .options.length

Fixed usage: Clear all options under select: .length=0

Method: .add(option) does not support document fragments

.remove(i)

Option: Represents an <option element

Create: var opt=new Option(text,value);

Attributes:

Table: manage row grouping:

1. Create row grouping:

var thead=table.createTHead();

Create thead and append to the table at the same time

.createTBody()

.createTFoot();

2. Delete row grouping: table.deleteTHead()

.deleteTFoot();

3. Get row grouping: table.tHead

.tFoot

.tBodies[i]

Row grouping manages rows:

1. Add a new row: var tr=row grouping.insertRow(i);

Add a new row at position i in row grouping

Fixed usage:

1. Add to end: .insertRow ()

2. Insert at the beginning: .insertRow(0)

2. Delete an existing row: row grouping.deleteRow(i)

Emphasis: i must be a relative subscript position within the row grouping.

Problem: tr.rowIndex can get the row index, but it is relative to the index position of all tr in the whole table. Inconsistent with the deleteRow requirement of row grouping

Solution: Instead of deleting rows with row grouping, use:

table.deleteRow(tr.rowIndex)

3. Get rows: row grouping.rows[i]

Line management:

1. Add cell: var td= tr.insertCell(i)

2. Delete cell: tr.deleteCell(i);

3. Get cells: tr.cells[i]

Form element: represents a <form element on the page

获取: var form=document.forms[i/id];

Attribute: .elements Get all form elements: input select textarea button

.elements.length gets the number of form elements

.length => .elements.length

Method: .submit() to submit the form manually

How to submit the form manually:

1. Change the submit button to a normal button

2. Bind the click event for the submit button

3. In the click event, call the validate method again. Form.submit() is called manually only if the verification is passed.

Form element:

Get: var elem=form.elemens[i/id/name];

Even simpler: if the form element has a name attribute: form.name

Method: elem.focus() makes the current form element focus

elem.blur() makes the current form element lose focus

3. What is BOM: Browser Object Model

API specifically for manipulating browser windows, no standard

include:

window 2 roles:

1. Act as a global scope object instead of Global

2. Encapsulate all ES, DOM, BOM APIs

include:

history

location

navigator

document

screen

event

4. Open and close windows:

<a href="url" target="_blank"

/*window.*/open("url","_blank|_self")

/*window.*/close();

Limit only one open: open("url","custom window name")

Principle: Each window has a unique name attribute in memory, which uniquely identifies the current window

The browser stipulates that only one window with the same name attribute can be opened.

The one opened later will overwrite the first opened window with the same name

How to set custom name attribute:

<a href="url" target="custom window name"

open("url","custom window name")

Predefined name:

_self: Open a new window with the current window's own name, and the new window will overwrite the current old window

_blank: Do not specify the name of the window. When opened, the window name is randomly assigned. almost no repetition.

5. history:

What is: Save the history stack of successfully visited urls after the current window is opened.

API: history.go(n)

For example: one step forward history.go(1)

one step back history.go(-1)

If taking one step back doesn't work, take two steps back history.go(-2)

refresh history.go(0)

6. location:

What is: Represents the url object that the current window is opening

Attributes:

.href Get and modify the url address opened by the current window

Open a new link in the current window, you can go back:

location.href="新url"

.protocol: protocol

.host: hostname + port number

.hostname: hostname only

.port: port number

.pathname: relative path

.hash: #Anchor address

.search: ? query string

Despise: "?uname=zhangdong&upwd=123456"

Convert to object: var obj={uname:zhangdong,upwd:123456}

obj.uname obj.upwd

API:

.assign("url") => location.href="url"

.replace("url") replaces the url being browsed with the new url - no backtracking

.reload() => reload the current page

2 refreshes:

1. Ordinary refresh: Get files from the local cache first, and re-request the server unless the local cache is unavailable or expired

history.go(0)

location.reload()

2. Force refresh: skip local cache, always request new files on server

location.reload(true)

force

7. navigator: object that saves browser configuration information

cookieEnabled: Determines whether the browser enables cookies

What is a cookie: a small file that persistently stores user private information on the client's local hard disk

Why: The data in the memory is temporary, once the program is closed or shut down, the memory is released and the data is lost.

When: whenever you want to persist private data on the client side

plugins: A collection containing information about plugins installed by the browser

What is a plug-in: small software that adds new functionality to a browser

How to judge: navigator.plugins["plugin name"]!==undefined

Add/Remove - HTML DOM Common Objects - BOM - Opening and Closing Windows - history-location

Guess you like