DOM（基础篇）

DOM基础篇
一、DOM介绍
1.node 节点
DOM节点树是有若干个子节点组成
2.节点种类
元素节点、属性节点、文本节点
二、查找元素
eg: <div id="box" name="pos">测试DIV</div>

1.getElementById(ID号);    //通过Id号获取元素节点
var box=getElementById("box")  //获取Id为box的div

2.getElementsByTagName(标签名);  //通过标签名获取元素节点
var box=getElementsByTagName("div") //获取div

3.getElementsByName(name名);  //通过name获取元素节点
var box=getElementsByName("pos") //获取name为pos的div

4.getAttribute(属性名称);   //通过属性名称获取元素节点
var box=getAttribute("name")  //获取name属性的div

5.setAttribute(属性名称)=属性值; //通过属性名称设置属性值
var box=getElementById("box")  //获取Id为box的div
box.setAttribute("name","aaa")  //将box的name属性设置为aaa

6.removeAttribute(属性名);   //通过属性名删除属性值
var box=getElementById("box")  //获取Id为box的div
box.removeAttribute("name")   //将box的name属性删除
三、DOM节点
eg: <div id="box" name="pos">测试DIV</div>

1.node节点属性
nodeType节点类型、nodeName节点名、nodeValue节点值
var box=getElementById("box")  //获取Id为box的div
box.nodeType      //返回1,1为元素节点
box.nodeName      //返回div
box.nodeValue      //返回null

2.层次节点属性
eg:
<ul id="ul">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
①childNodes  获取子节点
var ul=getElementById("ul")  //获取Id为ul的ul
ul.childNodes[0].innerHTML  //获取ul的第一个空白节点的内容，为空

②firstChild和lastChild   //获取第一个和最后一个节点
var ul=getElementById("ul")  //获取Id为ul的ul
ul.firstChild.innerHTML   //获取ul的第一个节点的内容，内容为空
ul.lastChild.innerHTML   //获取ul的最后一个节点的内容，内容为空

③ownerDocument      //获取html节点
var ul=getElementById("ul")  //获取Id为ul的ul
ul.ownerDocument    //获取节点

④parentNode、previousSibling、nextSibling  获取父节点、相邻节点
var ul=getElementById("ul")   //获取Id为ul的ul\
ul.parentNode.nodeName    //获取body元素
var space=ul.firstChild.innerHTML //获取ul的第一个节点的内容，内容为空
var li=space.nextSibling.innnerHTML //获取ul的第二个节点的内容(<li>1</li>)，内容li
li.previousSibling.innerHTML  //获取ul的第二个节点之前的节点
         //（即第一个节点），内容为空
         
⑤attribute       //获取属性节点

⑥忽略空白节点
//过滤空白文本
function filterWhiteSpace(nodes){
 var res=[];
 for(var i=0;i<nodes.childNodes.length;i++){
  if(nodes.childNodes[i].nodeType==3&&/^\s+$/.test(nodes.childNodes[i].nodeValue)) continue;
  res.push(nodes.childNodes[i]);
 }
 return res;
}

四、节点操作
1.write();  //添加文本内容，但会覆盖
document.write("aaa") //返回aaa

2.createElement(元素名); //创造元素节点
3.apeendChild  //将创建的节点添加到目标节点中
4.createTextNode(文本内容);  //创建文本节点
var div=document.createElement("div")//创建div元素
var text=document.createTextNode("测试div")//创建文本节点，内容为"测试div"
div.appendChild(text)   //将文本节点添加到div中
document.body.appendChild(table)//将div元素节点添加到body中

5.insertBefore  将节点添加到目标节点之前
eg:
<ul id="ul">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
var ul=document.getElementById('ul');  //获取id为ul的UL
var li1=ul.getElementsByTagName[1];   //获取ul下的第二个字标签(<li>1</li>)
var newLi=document.createElement("li");  //创建li节点
li1.parentNode.insertBefore(newLi)   //将newLi添加到li1的前面
//显示的html代码为
<ul id="ul">
 <li></li><li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
扩展：如何在一个元素节点之后添加节点
function insertAfter(newElement,targetElement){
 var parentElement=targetElement.parentNode;
 if(parentElement.lastChild===targetElement){
  parenteElement.appendChild(newElement);
 }else{
  parentElement.insertBefore(newElement,targetElement.nextSibling);
 }
}

6.replaceChild  //用新节点替代目标节点
eg: <div id="box" name="pos">测试DIV</div>
var box=document.getElementById("box"); //获取div
var p=document.createElement("p");//创建p标签
box.parentNode.replace(p,box);//将box标签替换成p标签

7.cloneNode   //克隆节点
var box=document.getElementById("box"); //获取div
var box2=box.firstChild.cloneNode(true);//将box的文本节点复制
document.body.appendChild(box2);//将box2插入到body中

8.removeChild  //删除节点
box.parentNode.removeChild(box)//将box删除

 

 

 

 我的博客        blog.csdn.net/xinguan1132yangchao