首页 > 代码库 > JavaScript中的获取DOM节点

JavaScript中的获取DOM节点

主要有: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节点