【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替代
原文地址:https://www.cnblogs.com/reamd/p/4955009.html