JavaScript BOM, Dom operations, nodes, and tables (ii)

BOM operation one, what is a BOM

BOM (Browser object model)
The BOM provides an object that is independent of the content and interacts with the browser window;
A BOM is composed of a series of related objects, and each object provides many methods and properties;

Second, the BOM commonly used objects

Screen object: Dimensions
Window.screen;
Screen.width
Screen.height
screen.availheight//Available height = available height-bottom taskbar height
screen.availwidth//Available Width

Location object: Address
Console.log (location)
location.href//full URL address
location.protocol//protocol name
location.hostname//Host name
location.port//Port Name
location.host//host name + port name
location.pathname//file path
location.search//from? The beginning part
location.hash//starting from the # section

Historical objects: History
history.length;//The number of history records that are used to record the current page jumps
History.forward ();//Click to go to the previous page, equivalent to the browser's forward button
history.back ();//Click to go to the next page, equivalent to the browser's Back button
history.go (): Indicates any interface that jumps to the browser
History.go (-1);//Next page, equivalent to History.forward ()
history.go (0);//Current page, indicates refresh current page
history.go (1);//previous page, equivalent to History.back ()

Navigator Object: (understanding) returns various system information about the browser.

Common methods for Windows objects that are commonly used by window:

1.window.alert (): Pop-up window output
2.window.prompt (): Pop-up window input
3.window.confirm (): A prompt with confirmation and cancellation. Return True,false respectively.
4.window.close (): Close the browser window.
5.window.open (): Opens a new window, parameter 1: address, Parameter 2: Name of the new window, Parameter 3: Various configuration properties of the new window ;
6.window.settimeout (): A timer that represents how much delay after a function is executed. Parameter 1: Function name or anonymous function; parameter 2: mm; parameter 3: Parameters passed to the page
7.window.setinterval (): the timer, which executes the function once every few milliseconds, and the other is used exactly as the settimeout.
8.clearInterval (), Clearimmediate (): Clear the timer, the delay device respectively. The declaration timer can accept an ID and pass it to Clearinterval ().

DOM Operations

1.DOM node points

1.DOM nodes are divided into three categories: element nodes (label nodes), attribute nodes, text nodes.
attribute and text nodes belong to the child nodes of the element node, so when you do so, you need to select the element nodes before modifying the properties and text.

2. View ELEMENT nodes

1, using GetElement series method.

            function () {                var lis  = document.getElementById ("First");                                 var lis1 = Document.getelementsbyclassname ("CLS");                                 var lis2 = Document.getelementsbyname ("NA");                                 var lis3 = document.getElementsByTagName ("Li");}

2. Precautions:

(1) ID cannot be the same name, if the ID is repeated, only the first one can be taken.
(2) When you get an element node, you must wait until the DOM tree has finished loading to get it.

Two ways: ① JS is written after the document. ②, written in Window.onload.
(3) through the GetElements series to the array format, the operation must be taken to each of the elements in order to operate, but not directly to the array operation.
(4) This series of methods, you can also select the DOM node, from the selected DOM node in the selection of the desired node.

3, through the Queryselector () series method

(1) passing in a selector name, returning the first element found, typically used to find the ID
(2) pass in a selector name, find all elements, no matter how many are found, return an array-formatted element.

Document.queryselector ("#first");d Ocument.queryselectorall ("#div Li");

3. Set the attribute node

1. View attribute node: getattribute ("Property name")
2. Set attribute node: SetAttribute ("Property name", "Property value")
3. Delete attribute node: removeattribute ("attribute name");
4. Note: SetAttribute () in the old version of IE, there will be compatibility issues, you can use the dot symbol (.) Instead, set the property.

"JS modify CSS in a variety of ways"

(1) Set class and style using SetAttribute ()
(2) use. ClassName add a class selector to modify the style
(3) Use the. style. Style to modify a single style directly, note that the style name must use the Hump naming method.
(4) Use the. style. Or. Style.csstext modify the style directly.

             document.getElementById ("First"). SetAttribute ("Class", "Class1");             document.getElementById ("First"). SetAttribute ("style", "color:red;" );             document.getElementById ("First"). GetAttribute ("style"); // View CSS             document.getElementById ("First"). Style.fontsize = "20px";             document.getElementById ("First"). RemoveAttribute ("style"); // Remove CSS                           document.getElementById ("first"). style = "font-size:20px"; // IE not compatible             document.getElementById ("First"). Style.csstext = "font-size:20px";

4. View the Settings text node

(1) InnerHTML: Takes or sets the HTML code in a node.
(2) InnerText: Takes or sets the text in a node and cannot set the HTML code.

            var s1 = document.getElementById ("First"). InnerHTML;            document.getElementById ("First"). InnerHTML = "<a>yiyiyi</a>";             var s2 = document.getElementById ("First"). InnerText;            document.getElementById ("First"). InnerText = "Teset";

The hierarchy node in JS 1. Basic node

　　1.childNodes: Gets all the child nodes of the current node (element nodes and text nodes)

2.children: Gets all the element child nodes of the current node (without text nodes)

3.parentNode: Gets the parent node of the current element.

4.firstChild: Gets the first child node, including character nodes such as carriage returns

5.lastChild: Get the last child node

6.firstElementChild: Gets the first element node, without a character node such as a carriage return.

7.lastElementChild: Gets the last element node, excluding character nodes such as carriage returns.

8.previousSibling: Gets the previous sibling node of the current node, including the text node

9.previousElementSibling: Gets the previous element sibling node of the current node, not including the text node.

10.nextSibling: Take the next sibling node of the current node, including the text node

11.nextElementSibling: Gets the next element sibling node of the current node, not including the text node.

12.attributes: Gets the property node of the current node, returning the array pattern.

2. Create an Add node

1.document.createelement ("tag name"): Creates a new node.
You need to set the properties for the new node with setattribute ().

                var img = document.createelement ("img");                Img.setattribute ("src", ".. /.. /01-html basic label/img/female.gif_temp.bmp ");

2.① parent node. insertbefore (new node, target node): In the parent node, the new node is inserted before the target node.

② parent node. appendchild (New node): Inserts a new node at the end of the parent node.

③ the original node. CloneNode (True): Clones a node.

Incoming true indicates cloning of the original node and all child nodes of the original node

Passing in false indicates that only the original node is cloned and other child nodes cannot be long.

Window.onload =function(){                varUL = document.getElementById ("Ul1"); //before inserting a targetdocument.getElementsByTagName ("div") [0].insertbefore (Img,ul); //insert to lastdocument.getElementsByTagName ("div") [0].appendchild (IMG); //Cloning                varNewul = Ul.clonenode (true); document.getElementsByTagName ("Div") [0].appendchild (Newul); }

3. Remove the replacement node

① parent node. removechiled (Child node): Removes the specified child node from the parent node.

② parent node. ReplaceChild (new node, old node): From the parent node, replace the old node with the new node.

                document.getElementsByTagName ("div") [0].removechild (newul);                document.getElementsByTagName ("div") [0].replacechild (Img,ul);

JS action on a table: There are three objects in the HTML table:

1. Table object: var table = document.getElementById ("table");
2. Line object: Table.rows[0]
3. Cell object: Table.rows[0].cells[0]

Properties and methods in table objects

1.rows property: Returns all rows of the current table, in the form of an array.

2.insertRow (Index): Inserts a new row at the index row of the table, returning the newly created object.

3.deleteRow (Index): Deletes the index line of the table.

Properties and methods for row objects

1.cells property: Returns all the cell objects in the current row, in an array format.

2.rowIndex property: Returns the subscript of the current row in the table.

3.insertCell (Index) property: Represents the index position in the row, inserts a new cell, and returns the newly created Cell object.

4.deleteCell (Index) property: Represents the deletion of the index cell in the bank.

Properties and methods for cell objects

1.cellIndex property: Returns the subscript of the current cell in the bank

2.innerhtml/innertext/classname/style.color, etc. can be used.

JavaScript BOM, Dom operations, nodes, and tables (ii)