DOM基础

//1,获取指定标签

//通过id查找对应的元素节点,返回一个具体的元素节点

var one= document.getElementById("one");

//通过class名查找对应的元素节点,返回一个 包含元素节点的数组

var ones= document.getElementsByClassName("son");

//通过标签查找对应的元素节点,返回一个 包含元素节点的数组

var divs  = document.getElementsByTagName("div");

//通过选择器获取查找元素节点 返回一个包含元素节点的数组

var divall= document.querySelectorAll(".fat .son");

//通过选择器获取查找元素节点 返回一个包含元素节点,只返回找到的第一个

var divsel= document.querySelector(".fat .son");

//特殊的节点

//1,document 文档节点

console.log(document);

//2,html 节点

console.log(document.documentElement);

//3,body 节点

console.log(document.body);

//4,head 节点

console.log(document.head);

//5,声明节点

console.log(document.doctype);

//2,创建新的标签

var imgM= document.createElement("img");

imgM.src= "img/1.jpg";

imgM.width= "300";

//3,添加标签

var conDiv= document.getElementById("container");

//(1)A.appendChild(B) :将B元素添加到A元素内部的后边 A 和 B 是父子关系

conDiv.appendChild(imgM);

//(2) A.insertBefore(B,C) 将B元素添加到 A元素中 C元素的前边.A 和 B,C 是父子关系

var linkm= document.createElement("a");

linkm.innerText= "图片";

linkm.innerHTML+= "拼在后边";

var txt=document.createTextNode("最后边");

linkm.appendChild(txt);

linkm.href= "###";

conDiv.insertBefore(linkm,imgM);

//4,替换标签

var pM= document.createElement("p");

pM.innerHTML= "P";

//A.replaceChild(B,C) 用B元素 替换A元素中的C 元素

conDiv.replaceChild(pM,imgM);

//5,移除标签

//A.removeChild(B):移除A元素中的B元素

conDiv.removeChild(linkm);

 

//一: 设置属性

//第1种设置方式

// div.id = "oneDiv";

// div.className = "oneDiv";

//第2种设置方式

div.setAttribute("id","oneDiv");

div.setAttribute("class","oneDiv");

//二: 获取属性

//第一种获取方式

console.log(div.id);

console.log(div.className);

//第二种获取方式

console.log(div.getAttribute("id"));

console.log(div.getAttribute("class"));

//判断元素是否拥有某一个属性

var rel= div.hasAttribute("id");

if(rel){

console.log(div.getAttribute("id"));

}

//其他获取操作

//(1)子节点

var childs= div.childNodes;

console.log(childs);

//(2)父节点

var parent= div.parentNode;

console.log(parent);

//(3)上一个兄弟节点

var sib= div.previousSibling;

console.log(sib);

//(4)下一个兄弟节点

var nextSib= div.nextSibling;

console.log(nextSib);

//(5)div 标签的节点名(大写形式放回当前元素节点名)

var name= div.nodeName;

console.log(name);

//(6)标签的克隆

//A.cloneNode(deep):克隆A标签,并返回. 

/*deep 是一个布尔值:

* ture 同时克隆A标签中的内容及子元素

* false 只克隆当前A标签

* 

*/

var val= div.cloneNode(true);

document.body.appendChild(val);