【JS系列10】javascript DOM操作

1. 获取节点

1-1 document

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

1-2 节点指针

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

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

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

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

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

• 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替代