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