JavaScript基础学习第七天_javascript基础第07天-优快云博客

DOM对象控制HTML元素进阶

方法
getElementsByName() -获取name
getElementsByTagName() -获取元素
getAttribute() -获取元素属性
setAttribute() -设置元素属性
childNodes() -访问子节点
parentNodes() -访问父节点
createElement() -创建元素节点
createTextNode -创建文本节点
insertBefore() -插入节点
removeChild() -删除节点
offsetHeight -网页尺寸不包含滚动条
scrollHeight -网页尺寸包含滚动条

<body onload ="mgs()">

  
    <p id ="pID">hello</p>
    <p id ="pID">hello</p>  
    <a id ="aID" title="得到了a标签的属性">helloo</a> 
    <a id ="aID2" >helloo2</a>  
    <ul>
      <li>1</li>
       <li>2</li>
       <li>3</li>   
    </ul> 
    <div id ="divID">
        <p id="divP" >div的子元素</p>
    </div>
     
    <script>
       function getName()
       {
          //var count = document.getElementsByName("pID");
          var count = document.getElementsByTagName("p");
         // alert(count.length);
          var p= count[1];
          p.innerHTML ="hello1"
          
       }
       //getName(); 
   
   
       function getAttr()
       {
          var anode = document.getElementById("aID");
          var attr = anode.getAttribute("title");
          alert(attr);
       }
       //getAttr();
       
       function setAttr()
       {
          var anode = document.getElementById("aID2");
          var attr = anode.setAttribute("title","动态设置属性");
          alert(attr);
       }
       //setAttr();
       
       
       function getChildNode()
       {
           var childnode = document.getElementsByTagName("ul")[0].childNodes;
           alert(childnode.length);
           //alert(childnode[0].nodeType);
       }
       //getChildNode();
     
     
      function getParentNode()
       {
           var div = document.getElementById("divP");
           alert(div.parentNode.nodeName);

       }
       //getParentNode();
     
      
      function createNode()
      {
         var body = document.body;
         var input = document.createElement("input");
         input.type ="button";
         input.value = "按钮";
         body.appendChild(input);
      
      }
      //createNode();
      
      function addNode()
      {
         var div = document.getElementById("divID");
         var node = document.getElementById("divP");
         var newnode = document.createElement("p");
         newnode.innerHTML = "动态添加第一个p元素";
         div.insertBefore(newnode,node);
      }
      //addNode();
      
      
      function removeNode()
      {
         var div = document.getElementById("divID");
         //var node = document.getElementById("divP");
         div.removeChild (div.childNode[1]);
         
      }
      //removeNode();
      
      
      function getSize()
      {
         var width = document.body.offsetWidth;
         var heigh = document.documentElement.offsetHeight;
         alert("width"+width+"heigh"+heigh);
      }
      //getSize();
      
    </script>
    </div>
    </form>
</body>