JavaScript中的获取DOM节点

Posted 2020-09-19

主要有：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