zoukankan      html  css  js  c++  java
  • JavaScript学习笔记---DOM节点操作

    ## DOM操作

    document object model 文档对象模型  操作节点,标签

    ## 获取子元素

                1.childNodes   子节点(包含文本节点)
                父元素.childNodes;
                2.children  子节点(不包含文本节点)
                父元素.children;

    ## 获取父元素

                1.parentNode  直系父元素
                子元素.parentNode
                2.offsetParent 在父系元素中获取最近一个含有定位属性(值非static)的元素,若父系元素中都没有定位属性,则找到body元素
                子元素.offsetParent

    ## 节点的基本属性

                1.nodeType 【节点类型】 返回数字 1-12 常用 1、2、3、9
                    1-标签
                    2-属性  通过getAttributeNode获取
                    3-文本  文本节点
                    9-document 文档
                2.nodeName 节点名  【大写标签名】
                3.nodeValue 获取文本节点的内容

    ## 其他节点      

                1.第一个子节点

                    firstChild 【能取到文本节点】
                    父元素.firstChild
                    firstElementChild 【不会取到文本节点】 直接取到第一个标签节点
                    父元素.firstElementChild

                2.最后一个子节点

                    lastChild 【能取到文本节点】
                    父元素.lastChild
                    lastElementChild 【不会取到文本节点】 直接取到最后一个标签节点
                    父元素.lastElementChild

                3.下一个节点

                    nextSibling 【能取到文本节点】
                    元素.nextSibling
                    nextElementSibling 【不会取到文本节点】 直接取到下一个标签节点
                    元素.nextElementSibling

                4.上一个节点

                    previousSibling 【能取到文本节点】
                    元素.previousSibling
                    previousElementSibling 【不会取到文本节点】 直接取到上一个标签节点
                    元素.previousElementSibling
        

    ## 操作节点

                1.创建节点 创建文本  [需要追加]

                    创建节点:document.createElement('标签名');  
                    创建文本:document.createTextNode('文本内容')

                2.追加节点

                    appendChild
                    父元素.appendChild(要追加的元素);  【在末尾追加】

                3.插入节点

                    insertBefore 在...之前
                    父元素.insertBefore(要插入的节点,参考节点)

                4.删除节点

                    1.remove()  将该元素删除
                    元素.remove();
                    2.removeChild()  将某个元素中的某个子元素删除
                    父元素.removeChild(具体子元素)

                5.替换节点

                    replaceChild
                    父元素.replaceChild(新的节点,被替换的节点)

                6.复制节点

                    cloneNode
                    元素.cloneNode(boolean【选填】) true-标签+文本都拷贝   【默认】false-只拷贝标签不拷贝文本

    ## 获取元素方法

                1.document.querySelector('css选择器/标签名');   只能获取到第一个元素【适用于获取id】
                2.document.querySelectorAll('css选择器/标签名');  数组,通过下标取用【适用于类名、标签名】

    ## 获取/设置元素自定义属性

                自定义属性:在标签中,自己定义属性名,自己赋属性值。
                1.设置自定义属性   // 可以体现在结构中
                    setAttribute  // 怎么设置就怎么获取
                    元素.setAttribute(自定义属性名,自定义属性值)
                2.获取自定义属性
                    getAttribute   【元素原有属性也可以通过此方法获取,原有属性的设置与获取通常用.方法】
                    元素.getAttribute('属性名')

    ## 表格操作

        1.获取表格   var tab = document.querySelector('table');
            【基于整个表格获取】
                获取表头: tHead
                tab.tHead;
                获取表身: tBodies 获取到的是个数组,需要通过下标取用
                tab.tBodies[0]
                获取表尾: tFoot
                tab.tFoot;
                获取行: rows  获取到的是个数组
                tab.rows  所有行(包括表头表尾)
                tab.tBodies[0].rows   表身中的所有行(不包括表头表尾的行)
                获取列: cells 获取到的是个数组  行数rows必须明确下标
                tab.tBodies[0].rows[0].cells   // 表身中第一行所有列,通过下标取用




                
  • 相关阅读:
    IT教育课程考评系统开发-07
    2020091201-1
    ip
    输入框枚举
    语言枚举
    《岁月神偷》弹唱和弦吉他谱_六线谱
    string 转化成 string数组
    获取类的字段值
    获取类的字段
    最全的省份递归
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13275653.html
Copyright © 2011-2022 走看看