Javascript Dom基本操作

获取节点

1.document

getElementById：

语法：document.getElementById(元素ID)

功能：通过元素ID获取节点

getElementsByName

语法：document.getElementsByName(元素name属性)

功能：通过元素的name属性获取节点

getElementsByTagName

语法：document.getElementsByTagName(元素标签)

功能：通过元素标签获取节点

2.节点指针

firstChild

语法：父节点.firstChild

功能：获取元素的首个子节点

lastChild

语法：父节点.lastChild

功能：获取元素的最后一个子节点

childNodes

语法：父节点.childNodes

功能：获取元素的子节点列表

previousSlibing

语法:兄弟节点.previousSlibing

功能：获取已知节点的前一个节点

parentNode

语法：子节点.parentNode

功能：获取已知节点的父节点

节点操作

1.创建节点

createElement

语法：document.createElement(元素标签)

功能：创建元素节点

createAttribute

语法：document.createAttribute(元素属性)

功能：创建属性节点

createTextNode

语法：document.createTextNode(文本内容)

功能：创建文本节点

2.插入节点

appendChild()

语法：appendChild(所添加的新节点)

功能：向节点的子节点列表的末尾添加新的子节点

insertBefore()

语法：insertBefore(所添加的新节点，已知子节点)

功能：在已知的的子节点前插入一个新的子节点

3.替换节点

replaceChild()

语法：replaceChild(要插入的新元素，将要被替换的老元素)

功能：将某个子节点替换成另一个

4.复制节点

cloneNode

语法：需要被复制的节点.cloneNode(true/false)

功能：创建指定节点的副本

参数：true：复制当前节点及所有子节点

           false：仅复制当前节点

5.删除节点

removeChild

语法：removeChild(要删除的节点)

功能：删除指定的节点

属性操作

1. 获取属性

   getAttribute

   语法:元素节点.getAttribute(元素属性名)

   功能：获取元素节点中指定属性的属性值

2. 设置属性

   setAttribute

   语法:元素节点.setAttribute(属性名，属性值)

   功能：创建或改变元素节点的属性

3. 删除属性

   removeAttribute

   语法:元素节点.removeAttribute(属性名)

   功能：删除指定属性

推荐公众号：前端达人 专注分享当下最实用的的前端技术！
长按二维码点选（识别图中二维码）