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

  • 相关阅读:
    secureCRT 实现windows和linux文件互传
    Mybatis Generator最完整配置详解
    部署Maven项目到tomcat报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
    阿里云服务器实战: Linux MySql5.6数据库乱码问题
    如何将 Java 项目转换成 Maven 项目
    Windows7下Maven环境搭建及其使用
    Java HashMap工作原理及实现
    关于tomcat部署应用的三种方式
    关于浏览器缓存
    MySql使用存储过程实现事务的提交或者回滚
  • 原文地址:https://www.cnblogs.com/hjqbit/p/6883694.html
Copyright © 2011-2022 走看看