zoukankan      html  css  js  c++  java
  • js节点常用操作

     1 节点:节点就是w3c推荐的处理可扩展标记语言(HTML或者xml)的标准编程接口,可以通过这些dom接口可以改变网页内容,结构和样式;
     2     节点类型:
     3         元素节点:nodetype=1;
     4         属性节点:nodeTyep=2;
     5         文本节点:nodeTyep=3;//(文字,空格,换行)
     6     获取元素节点:
     7         父元素节点:
     8             element.parentNode;    //父亲元素节点;如果找不到,返回null;
     9         子节点:
    10             element.childNodes;    //所有的子节点,包括元素节点,注释和文本节点,拿过的是集合;
    11             element.children或者children[i,];    //获取所有子元素的节点,集合,只获取元素节点;
    12             element.children[ol.children.length - 1]) //最后一个子元素节点;
    13         第一个子节点:
    14             firstChild;    //获取的是第一个子节点,包括元素节点,和文本节点;
    15             firstElementChild;    //返回第一个子节点,不包括文本节点;
    16         最后一个子节点:
    17             lastElementChild;    //返回最后一个子节点;
    18         兄弟节点:
    19             下一个兄弟节点:
    20                 element.nextSibling;    //(获取下一个兄弟节点,包含元素节点或者文本节点等等;)
    21             上一个元素的兄弟节点
    22                 element.previousSibling;    //上一个元素的兄弟节点,找不到返回null,包含所有节点;
    23             下一个兄弟元素节点(ie9)
    24                 element.nextElementSibling;    //得到下一个兄弟元素节点;
    25             上一个兄弟元素节点(ie9)
    26                 element.previousElementSibing;    //上一个兄弟元素节点;
    27     创建节点元素;
    28         1,创建节点:
    29             var tag = document.createElement('tagName');
    30         2,父级孩子后面添加节点:
    31             node.appendChild(tag);    //node为父级节点;
    32         3,父级孩子前面添加节点;
    33             node.insertBefore(插入对象,node.children[0]);    //node为父亲节点
    34     删除节点:返回值为被删除的节点
    35         node.removeChild(node.children[0]);            //node为父元素;
    36     复制节点:    
    37         node.cloneNode(false||true);    //要复制的节点;如果参数为空或者为false,浅拷贝,只复制标签,不复制内容,如果里面为true,既复制标签,也拷贝内容;
    38     
    39     三种动态创建元素区别:
    40         # document.write()
    41             直接将内容写入页面的内容流,但是文档流执行完毕,则会导致页面全部重绘;
    42         # element.innerHTML
    43             创建多个元素效率要高(不要采用拼接字符串,采取数组形式拼接),字符串拼接效率会很慢;
    44         # document.createElement()
    45             创建多个元素效率稍微低一点点,但是结构更清晰;
    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    scons配置文件
    与冯大辉谈数据库架构(InfoQ)
    7 Habits of Highly Effective Program Managers
    开心农场的架构
    二级下拉菜单被遮住,css设置zindex在ie下没作用的问题解决办法
    可伸缩性最佳实践(翻译)
    AJAX延迟异步加载边栏+服务器端缓存AJAX输出
    SQLServer索引调优实践
    SQLServer索引调优实践(2) 索引覆盖
    简单JS实现走马灯效果的文字(无需jQuery)
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13619651.html
Copyright © 2011-2022 走看看