zoukankan      html  css  js  c++  java
  • Dom操作——创建标签

    一、找到标签

    直接找:

      document.getElementById(‘id’);  //找到一个固定对象

      document.getElementsByClassName('classname');  //找到多个对象,返回数组

      document.getElementsByTagName('tag');  //找到多个对象,返回数组

      document.getElementsByName("name");  //找到多个对象,返回数组

    间接找:

      parentNode          // 父节点

      childNodes          // 所有子节点
      firstChild          // 第一个子节点
      lastChild           // 最后一个子节点
      nextSibling         // 下一个兄弟节点
      previousSibling     // 上一个兄弟节点
     
      parentElement           // 父节点标签元素
      children                // 所有子标签
      firstElementChild       // 第一个子标签元素
      lastElementChild        // 最后一个子标签元素
      nextElementtSibling     // 下一个兄弟标签元素
      previousElementSibling  // 上一个兄弟标签元素
     
    二、创建节点 
      document.createElement('div');  //创建标签节点
      document.createTextNode("你好呀!!")  //创建文字节点
     
    三、插入节点
      appendChild(Node);  //在父级标签最后追加节点
      insertBefore(NewNode,oldNode);  //在任意地方插入节点
     
    四、删除节点
      removeChild(node);
     
    五、替换节点
      replacechild(Newnode,oldNode);
     
    六、文档碎片
      createDocumentFragment(); //提高js执行效率,相当于div包围,只是没有标签
     
    七、Dom对表格对象的操作
      var table = document.createElement("table");
    /////////注意表格结构标准就是,caption、head、foot、body  
      table.createCaption();  //创建描述 
      table.createTHead();  //创建表头
      table.createTFoot();  //创建表底
      table.createTBody();  //创建身体
    ///////////////在body中插入行
      insertRow()  //这是插入一行
      insertRow(i)   //还可以插入行号,注意行号从零开始计算
        配合rows[i]使用
    /////////////在行中插入单元格
      insertCell()  //这是插入一个单元格
      insertCell(j)  //同样可以插入标号
        配合cells[j]使用
     
    ///////删除相关
      deldexxxxx()
     
    九九乘法表实例:
      
     
  • 相关阅读:
    arcpy脚本使用多接图表图斑对对应多幅影像进行裁边处理
    小辉轶事
    一些常ArcGIS常用简单算法 C#
    Wowza 4.5 修改 manager 端口号
    win7x64 串口程序无法运行,提示:component 'MSCOMM32.OCX' or one of its dependencies not correctlu registered。。。
    win7不正常开关机,系统恢复选项
    远程桌面+程序自启动
    Beyond Compare4 激活
    edusoho 支持同一账号多人同时登录
    windows 2008 gpt
  • 原文地址:https://www.cnblogs.com/yz9110/p/8829435.html
Copyright © 2011-2022 走看看