Mainly include: Document.getelementbyid,getelementsbyclassname,getelementsbytagname,getelementsbynameFunction name notation: Getelementsbyclassname, getElementsByTagName is elements!!! With s!!! getElementById's not s~~.return value:
- getElementById returns an element that returns nullif it is not returned;
- Getelementsbyclassname returns a htmlcollection object , similar to the NodeList, array object, if not returned [], NOT null;
Note:
- is not an array : can be similar to array [0] this value, but not the array, nor the method of using the array, JQ's $ (". Pink") is not an array, but can be used ES6 array.from () to become an array;
- non-bulk operation : Even if there is only one element, it is also an array of length 1, if you want to get the element must be added [0]. JS cannot manipulate the entire array at once, but JQ can.
varnodes = document.getElementsByTagName ("Input");//detection is not an arrayConsole.log (Array.isarray (nodes));//falseConsole.log (Array.isarray ([+]));//trueConsole.log (NodesinstanceofArray);//falseConsole.log ([i]instanceofArray);//true//using array methodsConsole.log (nodes);//(8) [input ...]Nodes.pop ();//Nodes.pop is not a functionConsole.log (nodes);
The DOM is a technique, and in XML, element elements in an HTML document are represented by the HtmlElement object.
vardiv = document.getelementsbytagname ("div");varnode = document.getElementById ("Div1"); Console.log (Node.constructor); //function Htmldivelement () {[native code]}Console.log (Div.constructor);//function Htmlcollection () {[native code]}Console.log (NodeinstanceofNode);//trueConsole.log (nodeinstanceofElement);//trueConsole.log (nodeinstanceofHtmlElement);//trueConsole.log (nodeinstanceofHtmldivelement);//trueConsole.log (typeofnode);//ObjectConsole.log (DivinstanceofHtmlcollection);//trueConsole.log (DivinstanceofNodeList);//falseConsole.log (DivinstanceofNode);//falseConsole.log (DivinstanceofArray);//falseConsole.log (typeofDIV);//Object
Get DOM node in JavaScript