dom(文档对象模型)

文档结构

文档加载,转换为文档对象模型。将所有的标签,文本,属性转换为dom节点,形成一棵dom树。

标签，元素，节点:

           <a>

标签开始到结束的部分

标签,文本,属性

节点的访问

//1.获取p节点var oP = document.getElementById("p1");      //通过id获取//2.nodelist:节点列表         node:节点var aInput = document.getElementsByName("user");  //通过name获取//console.log(aInput[1]);//3.通过标签名称获取节点aInput = document.getElementsByTagName("input");//4.class名称//document.getElementsByClassName();console.log(aInput[0]);

 

节点操作

内容操作

 

//内容区的值的获取和修改var val = oP.innerHTML;//覆盖p标签内容值,支持使用标签oP.innerHTML = "bbb";    //内容区的值的获取和修改var val = oP.innerText;//不能识别标签oP.innerText = "bbb";

修改属性(class的修改例外)

document.getElementsByTagName("img")[0].src="img/down.png";//修改颜色为绿色 oP.className="green";

修改样式

oP.style.color="red";oP.style.fontSize="12px";

节点之间的访问

//p节点有哪些子节点列表var aChilds = oP.childNodes;//几个   3  长度//console.log(aChilds.length);//第一个子节点var fChild = oP.firstChild;//获取最后一个子节点var lChild = oP.lastChild;//2. 获取父节点var oSpan = document.getElementsByTagName("span")[0];//2.1 1var p = oSpan.parentNode;//3.获取兄弟节点oSpan = document.getElementsByTagName("span")[0];//上一个节点var pre = oSpan.previousSibling;//上一个元素节点pre = oSpan.previousElementSibling;//下一个节点var nex = oSpan.nextSibling;//下一个元素节点nex = oSpan.nextElementSibling;

节点的添加

//追加一个span节点,hello//1.获取p节点var oP = document.getElementsByTagName("p")[0];//2.创建span节点var oSpan = document.createElement("span");//3.创建文本节点var oTxt = document.createTextNode("hello");//4.添加文本节点到span节点oSpan.appendChild(oTxt);    //hello//5.追加span节点到p节点oP.appendChild(oSpan);//覆盖document.getElementsByTagName("p")[0]    .innerHTML="hello";

 

 

节点的删除

//2.删除子节点//2.1 获取span节点var oSpan = document.getElementsByTagName("span")[0];//2.2 获取父节点var oP = oSpan.parentNode;//2.3 从父节点中删除oP.removeChild(oSpan);

插入子节点

//1.创建span节点var oSpan = document.createElement("span");//创建属性节点var idAttr = document.createAttribute("id");idAttr.value = "p1";oSpan.setAttributeNode(idAttr);//设置属性/* oSpan.setAttribute("id","span1");//获取属性console.log(oSpan.getAttribute("id"));*///2.创建文本节点var oTxt = document.createTextNode("hello");//3.添加文本节点到span节点oSpan.appendChild(oTxt); //4.获取参考节点var oldSpan = document.getElementsByTagName("span")[0];//5.获取p节点var oP = oldSpan.parentNode;oP.insertBefore(oSpan,oldSpan);