zoukankan      html  css  js  c++  java
  • 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可以。
    3. 会实时更新集合内容
    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);
    // 会实时更新
    var li = document.getElementsByTagName("li");
    console.log(li.length);     // 3
    var li4 = document.createElement("li");
    li4.innerText = "4444";
    document.getElementsByTagName("ul")[0].appendChild(li4);
    console.log(li.length);     // 4
     
    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

  • 相关阅读:
    Java实现 LeetCode 136 只出现一次的数字
    Java实现 LeetCode 136 只出现一次的数字
    Java实现 LeetCode 136 只出现一次的数字
    Java实现 LeetCode 135 分发糖果
    Java实现 LeetCode 135 分发糖果
    Java实现 LeetCode 135 分发糖果
    Java实现 LeetCode 134 加油站
    Java实现 LeetCode 134 加油站
    Java实现 LeetCode 134 加油站
    Java实现 LeetCode 133 克隆图
  • 原文地址:https://www.cnblogs.com/hjqbit/p/6883694.html
Copyright © 2011-2022 走看看