zoukankan      html  css  js  c++  java
  • JavaScript之DOM操作(二)

    这一篇写写常用并且通用的操作节点的一些方法。

    1.节点方法

    1>appendChild()

    向childNodes列表的末尾添加一个节点,语法 var aChild = element.appendChild(aChild); 

    需要注意的是,如果被传入的节点在文档中已经存在,那结果会将该节点从原来位置移除,然后再添加到指定位置。例:

    var returnedNode = someNode.appendChild(someNode.firstChild);
    console.log(returnedNode  === someNode.firstChild); // false
    console.log(returnedNode  === someNode.lastChild); // true

    2>insertBefore()

    把节点放在childNodes列表中某个指定节点之前,语法 var insertedNode = parentNode.insertBefore(newNode, referenceNode); 

    该方法接受两个参数,一个需要传入的节点,一个是参考节点,当参考节点为null时,insertBefore()和appendChild()效果相同。例:

    var returnedNode = someNode.insertBefore(newNode, null);
    console.log(newNode === someNode.lastChild); // true

    3>removeChild()

    从DOM中删除一个子节点,返回删除的节点。语法 var oldChild = node.removeChild(child); 

    注意,可以使用一个变量如oldChild来保存这个被移除的节点,如果需要,还可以在重新添加到文档中。

    4>replaceChild()

    用一个节点替换另外一个节点,并返回被替换的节点。语法 var replacedNode = parentNode.replaceChild(newChild, oldChild); 

    如上,用newChild替换掉oldChild

    5>cloneNode()

    节点调用该方法,返回一个该节点的副本。语法 var dupNode = node.cloneNode(deep); 

    node将要被克隆的节点,dupNode克隆生成的副本节点,deep 可选是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。

    6>contains()

    返回的是一个布尔值,来表示传入的节点是否为该节点的后代节点。语法 node.contains( otherNode); 

    如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false.

    7>hasChildNodes()

    返回一个布尔值,当前节点有子节点时返回true,否则false。语法 element.hasChildNodes() 

    8>normalize()

    从MDN上截了一张图:

  • 相关阅读:
    解密JavaScript闭包
    如何实现JavaScript的Map和Filter函数?
    JavaScript函数重载
    ES6之Spread Operater拷贝对象
    C#中如果用await关键字来await一个为null的Task对象会抛出异常
    为何使用Microsoft SQL Server Management Studio连接Integration Services服务失败
    EF Core中如何正确地设置两张表之间的关联关系
    EF Core中外键关系的DeleteBehavior介绍(转自MSDN)
    SQL Server下ADO.NET 怎么获取数据库SQL语句INSERT,UPDATE,DELETE了多少行数据
    ASP.NET Core Middleware (转载)
  • 原文地址:https://www.cnblogs.com/mcbai/p/6623868.html
Copyright © 2011-2022 走看看