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

JavaScript中的获取DOM节点

2024-09-23 20:38:43   217人阅读

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


联系
我们