Javacript Day12

通过DOM获取元素

console.log(document);

1.通过标签名 类名 id name

1.1通过id获取元素 唯一 getElementById("id名")

    var oHeader = document.getElementById("header2");
    console.log(oHeader);

1.2通过class获取元素 一个或多个 getElementsByClassName("class名")
HTMLCollection 集合 类似于数组 伪数组

    var aText = document.getElementsByClassName("text");
    console.log(aText);
    console.log(aText[0]);
    console.log(aText[1]);

1.3通过标签名获取元素 一个或多个 getElementsByTagName("class名")
HTMLCollection 集合 类似于数组 伪数组

    var aItem = document.getElementsByTagName("p");
    console.log(aItem);

1.4通过 name 获取元素 主要用于form表单 getElementsByName("name名")
NodeList 节点列表 伪数组

   var aSex = document.getElementsByName("sex");
   console.log(aSex);
   console.log(aSex[0]);
   console.log(aSex[1]);

1.5 getElementsByTagNameNS() 获取多种元素

 console.log(document.getElementsByTagNameNS("p","span"));

1.6 获取根节点 getRootNode()

 console.log(document.getRootNode());

通过元素也可以获取元素

    var oWrap=document.getElementById("wrap");
    console.log(oWrap);

不能元素去获取通过id获取的元素

   console.log(oWrap.getElementsByClassName("text"));

通过DOM获取元素selector

querySelector() 获取到一个元素
id选择器 class选择器 标签选择器 ,选择器 后代选择器 亲代选择器

 var oHeader=document.querySelector("#header2");
    console.log(oHeader);
 var oText=document.querySelector(".text");
    console.log(oText);//第一个
 var oSpan=document.querySelector("span");
    console.log(oSpan);
 var oEls=document.querySelector("#header2,.text,span");
    console.log(oEls);

querySelectorAll() 获取多个

 var aEls=document.querySelectorAll("#header2,.text,span");
 console.log(aEls);
 var aText=document.querySelectorAll(".text");
 console.log(aText);

 var aItem=document.getElementsByTagName("li");//动态
 var aItem2=document.querySelectorAll("li");//静态
 console.log(aItem);
 console.log(aItem2);

 var oList=document.getElementById("list");
 var oRemove=document.getElementById("remove");
    oRemove.onclick=function(){
        oList.removeChild(aItem2[0]);
    }

DOM的节点

var oHeader = document.getElementById("header2");
 var oText = document.getElementsByClassName("text")[0];
 var oItem = document.getElementsByTagName("p")[0];
 var oSex = document.getElementsByName("sex")[0];
 var oWrap = document.getElementById("wrap");
 var oList = document.getElementById("list");
 // nodeType  返回节点类型 对象.nodeType 

// 1.元素节点    返回1
console.log(oHeader.nodeType); //1
console.log(oText.nodeType); //1
console.log(oItem.nodeType); //1
console.log(oSex.nodeType); //1

// 2.属性节点   返回2
var attrNode = oHeader.getAttributeNode("id");
console.log(attrNode.nodeType);

// 3.文本节点   返回3
var content = oHeader.firstChild; //获取第一个子节点
console.log(content.nodeType);

// console.log(oWrap.firstChild)

// 4.注释节点   返回8
console.log(oList.firstChild.nodeType);
// 5. document   返回9
console.log(document.nodeType);

nodeName 返回节点名称
元素节点 返回大写的标签名

   console.log(oHeader.nodeName); //H2
   console.log(oText.nodeName); //P

属性节点 返回属性名

    console.log(attrNode.nodeName); //id

文本节点 #text

    console.log(content.nodeName); //#text

注释节点 #comment

   console.log(oList.firstChild.nodeName);

nodeValue 返回节点值
元素节点 null

   console.log(oHeader.nodeValue); //
   console.log(oText.nodeValue); //
   console.log(oItem.nodeValue); //
   console.log(oSex.nodeValue); //
   console.log(oWrap.nodeValue);

属性节点 返回属性值

   console.log(attrNode.nodeValue);

header2
文本节点 返回文本内容

   console.log(content.nodeValue);

这是一个h2标签
注释节点 返回注释内容

   console.log(oList.firstChild.nodeValue);

DOM元素的属性

// 获取元素
var oBox = document.getElementById("box");
var aList = document.getElementsByClassName("list")[0];
var oItem = aList.getElementsByClassName("item")[0];
var oText = document.getElementById("text");
var oSpan = document.getElementsByTagName("span")[0];
var oAnchor = document.getElementsByTagName("a")[0];
var oImage = document.getElementsByTagName("img")[0];

// 获取元素的属性  getAttribute("属性名") 返回属性值（行内的属性） 查 
console.log(oBox.getAttribute("id"));
console.log(oBox.getAttribute("class"));
console.log(oBox.getAttribute("style"));
console.log(oImage.getAttribute("alt"));

// 设置属性  setAttribute("属性名","属性值") 改
document.getElementById("tab").onclick=function(){
    // oBox.setAttribute("class","box2");
    oImage.setAttribute("src","./car.jpg")
}

// 移除属性  removeAttribute("属性名")  删
document.getElementById("remove").onclick=function(){
    oBox.removeAttribute("style");
}

// 创建属性  createAttribute("属性名")  自定义 增
var attr=document.createAttribute("abc");
attr.value="自定义的属性";
document.getElementById("add").onclick=function(){
    oBox.setAttributeNode(attr)
}