• Node方法


    appendChild(obj):使某节点成为另一个节点的最后一个子节点

    参数是节点对象。

    如果给的是已经在DOM中存在的节点,此方法会将它从原来的位置移动到新位置。

    如果给的是DocumentFragment节点,此方法会将它的所有子节点都插入,返回空的Document节点。

    hasChildNodes(obj):有子节点吗?

    其他方法:

    node.firstChild !==null;

    node.childNodes && node.childNodes.length>0;

    cloneNode(boolean):除了克隆节点,子节点要克隆吗?

    克隆节点的全部属性,但会丢失addEventListener方法和on-属性(node.onclick=fn),也就是添加在这个节点上的事件回调函数。

    克隆的结果节点不再文档中,当然也没得父节点。可以用Node.appendChild来添加至文档之中。

    克隆的结果节点和原节点可能会有一样的id,修改一下。

    insertBefore(newNode,referenceNode):把某个节点插入到父节点的某个位置

    newNode:被插入的节点;referenceNode:父节点的某个子节点

    本质是插在某节点之前,如果被插者为空,也就是插在空之前,很明显插入者成为了最后一个子节点;如果被插者是DOM现存节点,则被插者从原位置移动到新位置。

    如果插入者是DocumentFragment类型,那么其所有子节点都会被插入,返回一个空的DocumentFragment节点。

    说到现在都是插在某节点之前,如果想要插在某节点的后面咋办?

    那就通过插入到该节点后面的节点(nextSibling)的方式嘛。

    老师指定你能在班级选一个位置坐,但老师说了,你现在只能选择坐在一个人的前面。

    你暗恋翠花许久,好家伙,你一看翠花后面是马保国,啪的一下很快啊,你就跑到马保国前面去了。

    你和老师说:老师,伦家想坐在马保国前面。说白了,虽然明面上没提翠花,但是!你说我要坐在翠花后面和要坐在马保国前面的结果是一样一样的。

    removeChild(childNode):删除某个子节点

    参数不是子节点会报错,如果是子节点会返回被删除的子节点。

    var v=document.getElementById('ele');

    while(v.firstChild){

      v.removeChild(v.firstChild);

    }

    这段代码能够删除某节点的所有子节点。

    被删除的节点依然存在于内存之中,在需要时(将它插入到DOM中),还能发光发热。但从DOM中消失了。

    replaceChild(newChild,oldChild):替换子节点

    把原先的子节点换成新的,返回原先的子节点。

    contains(node):比较两个节点,是我或是我子孙?

    两个主角a和b:

    a:你是我?

    b:不是

    a:你是我儿子?

    b:不是

    a:你是我孙子?

    b:是

    说白了就是做亲子鉴定,是就是,返回true。

    compareDocumentPosition():同上,但返回一个表示两个节点关系的六位二进制数字

    二进制值

    十进制值含义
    000000 0 两个节点相同
    000001 1 两个节点不在同一个文档(即有一个节点不在当前文档)
    000010 2 参数节点在当前节点的前面
    000100 4 参数节点在当前节点的后面
    001000 8 参数节点包含当前节点
    010000 16 当前节点包含参数节点
    100000 32 浏览器内部使用

    每个数字都有其特定的含义,操作不一样的数字当然会有不一样的结果发生,这个结果当然也有意义。

    isEqualNode():类型,属性,子节点是否完全相同

    isSameNode():同一个节点吗?容不下半点偏差

    normalize():删除节点的所有文本节点

    去掉空的文本节点,把相邻的文本节点合并为一个

    getRootNode():节点所在文档的根节点

    document.body.firstChild.getRootNode() ===document

    document.getRootNode() //document

    document.ownerDocument() //null

  • 相关阅读:
    【代码审计】XDCMS 报错注入
    【渗透测试】MS17-010 "永恒之蓝" 修复方案
    【代码审计】MenInfo文件包含漏洞
    【代码总结】数据库抽象层PDO
    【代码总结】PHP面向对象之接口与多态性应用
    【代码总结】PHP面向对象之抽象类
    东哥手把手带你刷二叉树(第一期)
    二叉树的序列化,就那几个框架,枯燥至极
    二叉堆详解实现优先级队列
    递归反转链表的一部分
  • 原文地址:https://www.cnblogs.com/flyover/p/14179743.html
Copyright © 2020-2023  润新知