1. 程式人生 > >JavaScript中的獲取DOM節點

JavaScript中的獲取DOM節點

true rip strong asc on() var ive ins .cn

主要有: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));     // false
console.log(Array.isArray([1,2,3]));     //
true console.log(nodes instanceof Array); // false console.log([1,2,3] instanceof Array); // true // 使用數組方法 console.log(nodes); // (8) [input...] nodes.pop(); // nodes.pop is not a function console.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節點