zoukankan      html  css  js  c++  java
  • js获取节点的DOM操作

    一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了。

    HTML DOM类型

    Node类型

    Javascript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。

    除IE外其他浏览器都可以访问到这个类型。

    每个节点都有一个NodeType属性,用于表明节点的类型,节点类型由在Node类型中定义的下列12个常数值来表示,任何节点类型必居其一。

    根据这些常量值可以很容易的判断节点类型。

    if(someNode.nodeType == Node.ELEMENT_NODE){//IE无效
         alert("Node is an element!");   
    }
    if(someNode.nodeType == 1){ //所有浏览器有效
         alert("Node is an element!");   
    }
    1. Node.ELEMENT_NODE(1);   元素节点
    2. NOde.ATTRIBUTE_NODE(2);    节点属性
    3. Node.TEXT_NODE(3);    文本节点
    4. Node.CDATA_SECTION_NODE(4);   CDATA区域中的内容
    5. Node.ENTITY_REFERENCE_NODE(5);
    6. Node.ENTITY_NODE(6);
    7. Node.PROCESSING_INSTRUCTION_NODE(7);
    8. Node.COMMENT_NODE(8);    注释的文本节点
    9. Node.DOCUMENT_NODE(9);    document节点
    10. Node.DOCUMENT_TYPE_NODE(10);
    11. Node.DOCUMENT_FRAGMENT_NODE(11);    document片段
    12. Node.NOTATION_NODE(12);

    JS操作DOM节点操作:

    添加节点:

    appendChild():通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。

    复制节点:

    cloneNode():复制当前节点,或者复制当前节点以及它的所有子孙节点。

    判断是否拥有该节点:

    hasChildNodes():如果当前节点拥有子节点,则将返回true。

    插入节点:

    insertBefore():给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。

    删除节点:

    removeChild():从文档树中删除并返回指定的子节点。

    替换节点:

    replaceChild():从文档树中删除并返回指定的子节点,用另一个节点替换它。

    DOCUMENT类型:

    查找节点:

    getElementById()

    getElementByTagName()

    getElementByClassName()

  • 相关阅读:
    顶级Kagglers的心得和技巧
    大数加法
    TensorFlow 2.0高效开发指南
    Java 8 特性 —— Stream
    Java 8 特性 —— 函数式接口
    Java 8 特性 —— 方法引用
    Java 8 特性 —— 默认方法和静态方法
    Java 8 特性 —— lambda 表达式
    Effective Java 读书笔记
    jQuery动态添加、删除按钮及input输入框
  • 原文地址:https://www.cnblogs.com/calamus/p/5870332.html
Copyright © 2011-2022 走看看