Day4 JavaScript（二）dom操作

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 = "<span>bbb</span>";
    
//内容区的值的获取和修改
var val = oP.innerText;
//不能识别标签
oP.innerText = "<span>bbb</span>";

修改属性(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 1
var 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);    //<span>hello</span>
//5.追加span节点到p节点
oP.appendChild(oSpan);

//覆盖
document.getElementsByTagName("p")[0]
    .innerHTML="<span>hello</span>";

节点的删除

//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);