JavaScript中的擷取DOM節點

標籤：doc   document   http   img   技術   com   function   input   not   

主要有：document.getElementById，getElementsByClassName，getElementsByTagName，getElementsByName 函數名寫法：getElementsByClassName、getElementsByTagName 是elements！！！帶s！！！getElementById 才沒有s~~傳回值：

• getElementById返回的是一個element元素，若取不到返回null；

• getElementsByClassName返回的是HTMLCollection對象，類似於NodeList、Array對象，若取不到返回[]，而不是null；

注意：

1. 不是數組：可類似數組[0]這樣取值，但並不算是數組，也不能使用數組的方法，jq的$(".pink")也不是數組，但可以用ES6 Array.from()來變成數組；
2. 不可批量性操作：就算其中只有一個元素，也是一個長度為1的數組，如果要擷取元素必須要加 [0]。js不能一次性操作整個數組，但jq可以。

var nodes = document.getElementsByTagName("input");// 檢測是不是數組console.log(Array.isArray(nodes));     // falseconsole.log(Array.isArray([1,2,3]));     // trueconsole.log(nodes instanceof Array);     // falseconsole.log([1,2,3] instanceof Array);     // true// 使用數組方法console.log(nodes);     // (8) [input...]nodes.pop();     // nodes.pop is not a functionconsole.log(nodes);

 DOM是一項技術，XML中也有，HTML文檔中的Element元素都是由HTMLElement對象表示的

var div = document.getElementsByTagName("div");var node = document.getElementById("div1");             console.log(node.constructor);     // function HTMLDivElement() { [native code] }            console.log(div.constructor);     // function HTMLCollection() { [native code] }             console.log(node instanceof Node);     // true            console.log(node instanceof Element);     // true            console.log(node instanceof HTMLElement);     // true            console.log(node instanceof HTMLDivElement);     // true             console.log(typeof node);     //object             console.log(div instanceof HTMLCollection);     // true            console.log(div instanceof NodeList);     // false            console.log(div instanceof Node);     // false            console.log(div instanceof Array);     // false            console.log(typeof div);     // object

 

JavaScript中的擷取DOM節點