SOURCE

// 区别：
// 1、通过id名访问，由于是唯一，所以只返回一个元素
// 2、通过标签名访问，由于可以返回多个，所以返回一个伪数组、集合(只能访问下标和length)
// 3、ById只能在document下进行访问，而TagName可以用document或子节点进行访问
// 4、可以定位某个结点的子节点中的标签或访问所有结点下的子节点的标签
//节点：文本内容、标签（附着的属性不算）
//window是对全文进行解析，在开始分析下面代码
window.onload=function(){
    //元素节点：通过id名中的内容来获取元素节点
    var oDiv1=document.getElementById("Div1");
    //元素节点类型返回1
    console.log("The node type of oDiv1 is"+oDiv1.nodeType);

    //属性节点：通过标签名对元素进行访问
    var oAttributeNode=oDiv1.getAttributeNode("id");
    console.log("The node type of oArributeNode is "+oAttributeNode.nodeType);

    //文本节点：获取div标签下的子节点
    console.log('The length of oDiv1 is '+oDiv1.childNodes.length);
    var oTextNode=oDiv1.childNodes[0];
    console.log("The textcontent of childNodes[0] is"+oDiv1.childNodes[0].textContent);
    console.log("The node type of oArributeNode is "+oTextNode.nodeType);
    //输出的是p标签里的内容，但还是指的是p非hello
    console.log("childNodes[1] is "+oDiv1.childNodes[1].textContent);
    console.log(oDiv1.childNodes[1].tagName);
    console.log("childNodes[2] is "+oDiv1.childNodes[2].textContent);
    console.log("The node type of childNodes[1] is "+oDiv1.childNodes[1].nodeType);
    console.log("The node type of childNodes[2] is "+oDiv1.childNodes[2].nodeType);
    
    //打印p标签节点里的子节点
    console.log(oDiv1.childNodes[1].tagName);
    console.log(oDiv1.childNodes[1].childNodes[0].nodeValue);

    //计算有多少个div，伪数组：只能进行下标操作、length操作，方法不能用
     var oDivs=document.getElementsByTagName("div");
     console.log("The length of oDivs is "+oDivs.length);

     //判断节点类型是否相同
      if(oDiv1==oDivs[0]){
          console.log("we are the same node");
      }


      var oUls=document.getElementsByTagName("ul");
      //在第一个ul标签内有多少个li标签
      var oLisInul1=oUls[0].getElementsByTagName('li');
      //在所有ul标签内有多少个li标签
      var oLisInDoc=document.getElementsByTagName('li');
      console.log('The length of oLisInul1 is '+oLisInul1.length);
      console.log('The length of oLisInDoc is '+oLisInDoc.length);
      //不可以使用这个方法访问，只能用document访问id名
      //var oLi=oUls[0].getElementById('li');

      //通过类名进行访问
      var oLists=document.getElementsByClassName('list');
      console.log('The length of oLists is '+oLists.length);
    
      //访问第二个div标签，查看里面有多少个类名为radio的标签
       var oRadios=oDivs[1].getElementsByClassName('radio');
       console.log('The length of oRadios is '+oRadios.length);

      //访问第二个div标签，查看里面有多少个类名为radio的标签
       var oRadios1=oDivs[2].getElementsByClassName('radio');
       console.log('The length of oRadios1 is '+oRadios1.length);








       //通过css来访问id名或标签，对其进行输出
       //querySelector（查询选择器）查找第一个节点
       //查找第一个input标签下的check为true的值value
       var oInputFemale=document.querySelector("input:checked");
       console.log("line 70："+oInputFemale.value);

       //查找所有input标签
       var oInputs=document.querySelectorAll("input");
       console.log("line 73："+oInputs.length);
       
       //是否勾选
       oInputs[1].checked=true;
       oInputs[3].checked=true;
       
       //通过类名进行访问
       var oClassInputs=document.querySelectorAll(".radio");
       oClassInputs[0].checked=true;

       var oLi11=document.querySelector("#Li11");
       oLi11.style.color="red";

       var oList2Lis=document.querySelectorAll("#List2 li");
       oList2Lis[0].style.color="blue";
       oList2Lis[1].style.color="red";
       oList2Lis[2].style.color="green";


      //通过getElementsByName访问
       var oNamedRadios=document.getElementsByName("gender");
       console.log("Line 94："+oNamedRadios[0].value);
       oNamedRadios[1].checked=true;

       var oFruits=document.getElementsByName("fruit");
       console.log("Line 98："+oFruits[0].value);
       oFruits[0].checked=true;

       console.log(document.title);//只能设置字符串
       console.log(document.body.tagName);//可以对body的子元素进行操作
       console.log(document.body.childNodes.length);//可以对body的子元素进行操作

    //    var oDiv1=document.getElementById("Div1");
    //    var oTextNode=oDiv1.childNodes[0];
    //    var oUls=document.getElementsByTagName("ul");
       //创建一个按钮标签
       var oFynamicButton=document.createElement("button");
       //命名为“提交”
       var oTextNode=document.createTextNode("替换");
       //将命名赋给按钮
       oFynamicButton.appendChild(oTextNode);//oFynamicButton是父元素，oTextNode是子元素
       //给body附加一个孩子节点oFynamicButton
       document.body.appendChild(oFynamicButton);
       //插入到之前创建的Uls标签的第一个ul标签前面
       document.body.insertBefore(oFynamicButton,oUls[0]);//document.body是父元素，oFynamicButton插入到列表中某个子元素的前面
       //对某个子节点的元素进行替换
       //当点击“替换”按钮时，进行替换
       oFynamicButton.onclick=function(){
           var oDiv1=document.getElementById("Div1");
           var oPH1=document.createElement("p");
           var oPText=document.createTextNode("Hi");
           oPH1.appendChild(oPText);
           oDiv1.replaceChild(oPH1,oDiv1.childNodes[1]);

       }




       // 两种方式：1 获取HTML的属性值（通过属性名obj.attr="值"） 2 HTML属性操作（Attribute）对象方法
       //查看属性
       //对于标签原本具有的属性，两种方式皆可访问
       //对于自定义的属性，只有对象方法才能访问，另者未被定义
       console.log("line 138:The id of oDiv1:"+oDiv1.id);
       console.log("line 139:The id of oDiv1:"+oDiv1.getAttribute("id"));
       console.log("line 140:The data of oDiv1:"+oDiv1.data);
       console.log("line 141:The data of oDiv1:"+oDiv1.getAttribute("data"));
       //访问类名时，用className，不能用class,class是系统关键字
       console.log("line 142:The class of oDiv1:"+oDiv1.className);

       var oInput=document.getElementById("insertInput");
       //使用属性值对属性赋值，不能将其删除
       //oInput.value="Enter...";
       oInput.setAttribute("value","enter");
       //判断属性是否存在（真1）
    if(oInput.hasAttribute("value")){
       console.log("value is the attribute of oInput");
       
   }
      //删除属性
      oInput.removeAttribute("value");
      //判断属性是否存在(假0)
   if(oInput.hasAttribute("value")){
       console.log("value is the attribute of oInput");
   }

   
//通过删除类名，使得css样式对oUls的第一个标签名不起作用
      oUls[0].removeAttribute("class");
      console.log("line 168:The class of oUls[0]:"+oUls[0].className);
    
   
}








// 插入列表元素顶部
function insertChild(){
    var oInput=document.getElementById("insertInput");
    var strValue=oInput.value;
    //显示插入的元素
    console.log(strValue);

    //创建的方法
    //克隆的方法(id大写)
    var oList1=document.getElementById("List1");
    var oLis=document.getElementsByTagName("li");
    var oCreatedLi=oLis[0].cloneNode(true);
    oCreatedLi.textContent=strValue;
    oList1.insertBefore(oCreatedLi,oLis[0]);

}

// 删除列表元素顶部
function removeTop() {
var oUl = document.getElementById("List1");
var oLis = oUl.getElementsByTagName("li");
oUl.removeChild(oLis[0]);
}


// 插入列表元素尾部(不能用appendChild因为重名)
function appendToList(){
    var oInput=document.getElementById("appendInput");
    var strValue=oInput.value;
    //显示插入的元素
    console.log(strValue);
    
    //创建的方法
    //克隆的方法(id大写)
    //前面加个o：表示object  i:数字    str:字符串
    var oList1=document.getElementById("List2");
    var oLis=document.getElementsByTagName("li");
    var oCreatedLi=oLis[0].cloneNode(true);
    oCreatedLi.textContent=strValue;
    oList1.appendChild(oCreatedLi,oLis[1]);

}

// 删除列表元素尾部
function removeButton() {
var oList2 = document.getElementById("List2");
var oLis = oList2.getElementsByTagName("li");
//访问数组用中括号
oList2.removeChild(oLis[oLis.length-1]);
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1" data="userDefined" class="div1">
            <p id="Paragraph">Hello</p >
            World
        </div>
        <ul id="List1" class="list">
            <li id = "Li11"> Html </li>
            <li> Javascript </li>
            <li> CSS </li>
            <li> Webpack </li>
        </ul>
        <input id="insertInput" type="text"></input>
        <button onclick="insertChild()">插入列表元素顶部</button>
        <button onclick="removeTop()">删除列表元素顶部</button>
        <ul id="List2" class="list">
            <li> Vue </li>
            <li> React </li>
            <li> Angular </li>
        </ul>
        <input id="appendInput" type="text"></input>
        <button onclick="appendToList()">添加到列表元素的尾部</button>
        <button onclick="removeButton()">删除列表元素的尾部</button>
        <div>
            你的性别是：
            <input class="radio" type="radio" name="gender" checked="true" value="女">女</input>
            <input class="radio" type="radio" name="gender" value="男">男</input>
        </div>
        <div>
            你喜欢那些水果：
            <input type="checkbox" name="fruit" checked="true" value="苹果">苹果</input>
            <input type="checkbox" name="fruit" value="梨">梨</input>
        </div>    
        <div id="DynamicDiv1"></div>
        <div id="DynamicDiv2"></div>
    </body>
</html>

 /* 获取HTML的属性值（通过属性名obj.attr="值"）
HTML属性操作（Attribute）对象方法 */

/* ul{
    background:gold;
}; */
.list {
background-color: lightblue;
};