JavaScript Basics (DOM)

Methods to get elementsWhoever is to be manipulated must first obtain whom;Get element 1, document.getElementById: Get element by ID name

compatibility: Under IE8, the name attribute is acquired by default as an ID; document: documentation; Documentget: Get element: Elements by: Id:id name; ID is unique;

var oBox = document.getElementById ("box"); // {className: "", style:{}}var oBox1 = Obox.getelementbyid ("Box1"); var a = document.getElementById ("a"); Console.log (a); Console.log (OBox); Console.log (typeof OBox); // "Object"oBox.style.background = "Red";

2. document.getElementsByTagName: Get element by tag name

is a collection of class arrays

var arr = obox.getelementsbytagname ("span"); // "label name" [{style:{}]arr[0].style.background = "Red"; Console.log (arr);

3, Document.getelementsbyclassname (); A collection of class arrays;

IE8 and below are incompatible; Get elements by class name;

var a = document.getelementsbyclassname ("box"); Console.log (a.length); Console.log (a) ;

4, Document.getelementsbyname; Gets the element by the name attribute;

in IE9 and below, the ID name is obtained by default.

var inputs = Document.getelementsbyname ("a"); Console.log (inputs);

5, Document.documentelement get the current HTML

Console.log (document.documentelement); var htm = document.getelementsbytagname ("html") Console.log (HTM);

6, Body: Get the BODY element of the page;

Console.log (document.body); Gets the current browser visual window height and width

var winw= Document.documentElement.clientWidth | | Document.body.clientWidth; var winh = Document.documentElement.clientHeight | | Document.body.clientheight;console.log (WINW); Console.log (Winh);

7, Document.queryselector ();

var divs = Document.queryselector (". Box"); // if it is an ID name, add a # to the front, or add one if it is class. Console.log (divs);

8, Document.queryselectorall ();

// Queryselectorall: Get all the elements; var divs = Obox.queryselectorall ("div") console.log (divs);

The nodes and properties of the DOM

DOM nodes: four types of nodes;

TYPE	NodeType	NodeName	NodeValue
ELEMENT node	1	Name of the tag in uppercase	Null
Text node	3	Text	Text content
Comment Node	8	Comment	Comment Content
Document	9	Document	Null

spaces and line breaks are text nodes;Node Properties 1, ChildNodes: Gets all the child nodes of the current element;

Console.log (parent.childnodes);p arent.childnodes[1].style.width= "100px";

2, children: Gets the child element node of the current element, 3, FirstChild: Gets the first child node;

Firstelementchild: The first child element node, in IE8 and below, is incompatible;

4. LastChild: Get the last child node

Lastelementchild: The last child element node, in IE8 and below, is incompatible; Console.log (parent.firstchild); Console.log (Parent.firstelementchild);

5, PreviousSibling: Get the previous brother node

 previouselementsibling encapsulation  var  last = document.getElementById ("Last"  //  Gets the element node of the previous brother;  function   Getbrother (curele) { var  pre = curele.previoussibling;  while   (pre) { if  (Pre.nodetype ===1) {//  Not satisfied, description is not an element;  return   pre;} Pre  = pre.previoussibling;}  return   pre; Getbrother (SEC); Getbrother (last)  

6, NextSibling: Get the next brother node

Nextelementsibling: Gets the next element of the Brother node; Console.log (sec.previoussibling);

7. ParentNode: Gets the Father node of the current element;

Console.log (sec.previoussibling); Console.log (sec.parentNode.previousElementSibling); var body =document.body;document No father node; If no result is obtained null;console.log ( Body.parentNode.parentNode.parentNode);

Methods for manipulating the DOM dynamically

obox.innerhtml = "function is important";

1.document.createelement; Create an element

var newdiv = document.createelement ("div"); Console.log (newdiv);

2.appendChild: Adds a child node to the end of the element;

parent. appendchild (son) Obox.appendchild (newdiv); // Failed to execute ' appendchild ' on ' node ': Parameter 1 was not of type ' node ' var div = document.getelementsbytagname ("div") [1];

3.removeChild: Delete child nodes;

Obox.removechild (div); var span = document.createelement ("span")

4.replaceChild: Replacement node;

Parent. ReplaceChild (Newchild,oldchild); Obox.replacechild (SPAN,DIV);

5.insertBefore: Inserting an element node in front of a node

Parent. InsertBefore (Newchild,oldchild) Obox.insertbefore (SPAN,DIV);

6.cloneNode: Copy node;

// parameter: true: Deep clone, the current element and descendant nodes are all retrieved // false or not: a shallow clone that only clones the current element node;Console.log (Obox.clonenode (true)); Console.log (Obox.clonenode () ); var a = Document.getelementsbyclassname ("a") [0]; var b = A.clonenode (true); Obox.appendchild (a);

7. Set/get/remove Attribute: Set custom inline attributes;

// getattribute cannot get through elements. Property = property value The new property is added in this way, you can get the direct setting in the row, and the property set by SetAttribute;Div.setattribute ("name", "Time "=console.log; (div.name); // undefineddiv.setattribute ("NA", "Ti") if the custom inline attribute is not obtained, the result is Null;console.log (Div.getattribute (" Name ")Console.log (Div.getattribute (" index "));Console.log (Div.getattribute (" hh ")) ; // Move the property div.removeattribute ("NA") in the travel.

JavaScript Basics (DOM)