html dom增删改查的功能,JS的基本DOM操作（增删改查）

### 查找 ###

(就是获取元素)

(1)，标准DOM API

document.getElementById(id);

document.getElementsByTagName(name);

document.getElementsByName(name);

document.getElementsByClassName(names);

document.querySelectorAll(selectors);

(2)，亲属访问

parentNode /*访问父节点*/

parentElement /*父元素*/

childNodes /*访问子节点*/

children /*子元素*/

//下面获取操作有IE8兼容问题

firstChild /*访问第一个子节点*/-------------IE8中获取到的是元素

firstElementChild /*第一个子元素*/-------------IE8不支持

lastChild 或 childNodes[childNodes.length - 1] /*访问最后一个子节点*/-------------IE8中获取到的是元素

lastElementChild /*最后一个子元素*/-------------IE8不支持

previousSibling /*访问上一个兄弟节点*/-------------IE8中获取到的是元素

previousElementSibling /*上一个兄弟元素*/-------------IE8不支持

nextSibling /*访问下一个兄弟节点*/-------------IE8中获取到的是元素

nextElementSibling /*下一个兄弟元素*/-------------IE8不支持

attributes[0] /*访问第一个属性节点*/

(3)，属性获取

getAttribute(attributeName);

getAttributeNode(attrName);

### 增加 ###

(1)，创建

document.createElement(tagName); /*元素节点*/

document.createTextNode(data); /*文本节点*/

document.createAttribute(name); /*属性节点*/

cloneNode(deep)

(2)，加入

document.write(markup) /*一般不用，文档加载完毕后使用会覆盖页面！*/

appendChild(aChild) /*追加到结尾处*/

innerHTML

innerText

insertBefore(newElement, referenceElement)

/*用法----父元素.insertBefore(新元素, 旧元素)*/

(3)，其它

style. 的操作

setAttribute(name, value)

### 删除 ###

删除元素

removeChild(child)

removeAttributeNode(attributeNode)

### 修改 ###

(1)，修改节点

删除节点再加入

replaceChild(newChild, oldChild)

/*用法----父元素.replaceChild(新元素, 旧元素)*/

(2)，修改样式

style.xxx = sss ;

setAttribute(name, value)

(3)，修改文本

innerHTML

innerText

nodeValue

/*节点操作(删除旧文本节点再加入新文本节点)*/

(4)，修改属性

setAttribute(name, value)

. 属性名 = 值