• 【JavaScript知识点十】javascript DOM基本操作


    1. 获取节点

    1-1 document

    • getElementById() 通过元素ID获取
    • getElementsByTagName() 通过元素标签获取
    • getElementsByName() 通过name属性获取
    • getElementsByClassName()通过class属性获取

    1-2 节点指针

    • firstChild
      语法:父节点.firstChild
      功能:获取元素的首个子节点

    • lastChild
      语法:父节点.lastChild
      功能:获取元素的最后一个子节点

    • childNodes
      语法:父节点.childNodes
      功能:获取元素的子节点列表

    • previousSibling
      语法:兄弟节点.previousSibling
      功能:获取已知节点的前一个节点

    • nextSibling
      语法:兄弟节点.nextSibling
      功能:获取已知节点的后一个节点

    • parentNode
      语法:子节点.parentNode
      功能:获取已知节点的父节点

    2. 节点操作

    2-1 创建节点

    • createElement document.createElement(元素标签)
    • createAttribute document.createAttribute(元素属性)
    • createTextNode document.createTextNode(文本内容)
      注:元素标签节点.setAttributeNode(元素属性节点)可以把创建的元素属性节点放到元素节点中

    2-2 插入节点

    • appendChild appendChild(新节点) 向节点的子节点列表末尾添加新节点
    • insertBefore insertBefore(索要添加的新节点,已知节点) 在已知的子节点前插入一个新的子节点

    2-3 替换节点

    • replaceChild replaceChild(要插入的新元素,将被替换的老元素) 将某个子节点替换为另一个

    2-4 复制节点

    • cloneNode 需要被复制的节点.cloneNode(true/false)
      功能 创建指定节点的副本
      参数 true——复制当前节点及其所有子节点 false——仅复制当前节点

    2-5 删除节点

    • removeChild
      语法 removeChild(要删除的节点)
      功能 删除指定的节点

    3. 属性操作

    • 获取属性 getAttribute
      语法:元素节点.getAttribute(元素属性名)
      功能:获取元素节点中指定的属性值

    • 设置属性 setAttribute
      语法:元素节点.setAttribute(属性名,属性值)
      功能:创建或改变元素节点的属性

    • 删除属性 removeAttribute
      语法:元素节点.removeAttribute(属性名)
      功能:删除元素中的指定属性

    4. 文本操作

    • insertData(offset,string) 从offset指定的位置插入string
    • appendData(string) 将string插入到文本节点的末尾处
    • deleteData(offset,count) 从offset起删除count个字符
    • replaceData(off,count,string)从off将count个字符用string替代
  • 相关阅读:
    OSDEV网站提供了非常丰富的操作系统方面知识
    一本牛X的逆向工程权威指南
    视频时序计算器Video Timings Calculator
    编写C编译器入门教程Let's write a compiler
    开源USB协议栈CherryUSB
    基于STM32动态加载实现原理
    云上弹性高性能计算,支持生命科学产业高速发展、降本增效
    Apsara Stack 同行者专刊 | 政企混合云技术架构的演进和发展
    DataWorks开发ODPS SQL开发生产环境自动补全ProjectName
    代码注释的艺术,优秀代码真的不需要注释吗?
  • 原文地址:https://www.cnblogs.com/reamd/p/4955009.html
Copyright © 2020-2023  润新知