Day4 JavaScript（二）dom操作详解编程语言

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

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 
//5.追加span节点到p节点 
oP.appendChild(oSpan); 
 
//覆盖 
document.getElementsByTagName("p")[0] 
    .innerHTML="<span>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);