核心内容就是利用 增删改查
查询:
就是获取元素
1.标准DOM API
*document.getElementById
*document.getElementsByTagName
*document.getElementsByName //input 中name
*document.getElementsByClassName
*document.querySelectorAll
2.亲属访问 (从一个中心元素访问其他所有的直系亲属元素)
*访问父节点:parentNode
*访问上一个兄弟节点:previousSibling
*访问下一个兄弟节点:nextSibling
*访问第一个属性节点:attributes[0]
*访问最后一个子节点:lastchild或childNodes[childNodes.length-1]
3. 属性获取
*getAttribute
*getAttributeNode
增加:
1.创建
* document.createElement //创建元素节点
* document.createTextNode //创建文本节点
* document.createAttribute //创建属性节点
* innerHTMl
*innerText
*cloneNode()
2.加入
*appendChild //追加到结尾处
*innerHTML
*insertBefore //将元素超如到某一个元素的前面
父元素.insertBefore(新元素,旧元素); //将新元素插入到旧元素的前面
3.其他
*style 的操作
*setAttribute(属性名,属性值)
删除:
1.删除元素
*removeChild
*removeAttributeNode
修改:
1.修改节点
*删除节点再加入
2.修改样式
*style.xxx=vvv;
*setAttribute
3.修改文本
*innerHTML
*innerText
*节点操作
*nodeValue //表示节点的值,所有的节点都有该属性,但是一般文本节点才使用该属性
var txt=document.body.lastChild.nodeValue;
alert(txt);
document.body.lastChild.nodeValue="nihao";
4.修改属性
* .xxx=vvv;
*setAttribute
// nodeName表示节点的名字,虽然所有的节点都有该属性,但是一般元素节点才使用
// 元素节点打印的元素名均为大写字母
alert(document.body.nodeName ); //BODY
var div=document.createElement("div");
alert(div.nodeName) //DIV