DOM文档获取和简介 

<style type="text/css">
         .red{
            background-color: #f00;
            width: 100px;
            height: 100px;
         }
      </style>
   </head>
   <body>
      <div id="div01" class="div02"></div>
      <div class="div02"></div>
      <div class="div02" id="jia"></div>
      
      <input type="text" id="inp" />
      <script type="text/javascript">
         var div01 = document.getElementById("div01");
         console.log(div01)
         
         var div02 = document.getElementsByClassName("div02")   //对象，类数组（伪数组）
//       完全可以当成数组来使用
//       只有一个元素的时候也是类数组
         console.error(div02[0])
         
         
         var div03 = document.getElementsByTagName("div")    
         console.log(div03[0])
         
         var all = document.getElementsByTagName("*");   //IE4
         console.log(all)
         
//       IE8
//       w3c   制定一系列 开发规范

//
//       div03[0].style.backgroundColor
//       div03[0].style.width
//       ...
         
         
         
         
//       div03[0].className = "red div02 div03 div04"
         
         
         
//       下面这三个，都是可以获取和设置
//       div03[0].innerHTML     html片段
//       innerText       文本
         
//       div03[0].innerHTML = "hello world"
//       div03[0].innerText = "<h1>hello world</h1>"
         
//       value   适用于表单元素
         document.getElementById("inp").value = "hello"
         var inpvalue = document.getElementById("inp").value;
         console.log(inpvalue)
      </script>

posted on 2018-10-23 08:44  妄言  阅读(154)  评论(0)  编辑  收藏  举报

导航