zoukankan      html  css  js  c++  java
  • 【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替代
  • 相关阅读:
    为应用程序的选项卡及ActionBar设置样式
    在Flex中定义移动设备应用程序和启动屏幕
    在Flex中用于处理XML对象的E4X 方法
    在移动设备应用程序中嵌入字体
    【2020-01-14】一些不起眼的常态局限
    【2020-01-13】一点一点的,一点一点的
    【2020-01-12】昨天跟老骨干聚了个会
    【2020-01-11】多警惕自己的自圆其说
    【2020-01-10】每天早上一个小时的自我修养
    【2020-01-09】看书就是一种很好的娱乐
  • 原文地址:https://www.cnblogs.com/reamd/p/4955009.html
Copyright © 2011-2022 走看看