DOM获取页面的元素

通过DOM获取页面的元素的三种方式

1. getElementById( )方法访问DOM元素 —》 id获取一个元素

2. getElementsByName( )方法访问DOM元素—》元素的name属性名获取(数组)

3. getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)

4. getElementsByClassName()方法访问DOM元素 –》类样式名称获取(数组)

代码演示：

<script>
        //onload事件 会等body的内容加载完后再执行 load()函数
      function  load(){
          //根据id获取
          var bookname=document.getElementById("book").innerHTML;
          alert(bookname);
          //根据name属性获取--》(数组)
          var seasons=  document.getElementsByName("season");
          //创建变量
          var ss="";
          for(var i=0;i<seasons.length;i++){
              ss+=seasons[i].value;
          }
          document.getElementById("content").innerHTML=ss;
          //根据标签名获取
          var contentes="";
       var inputs=   document.getElementsByTagName("input");
          for(var i=0;i<inputs.length;i++){
              contentes+=inputs[i].value;
          }
      //  document.getElementById("cc").innerHTML="<h1>"+contentes+"</h1>";
          document.getElementById("cc").innerText="<h1>"+contentes+"</h1>"
      }


    </script>
</head>
<body onload="load();">
<div class="content">
    <img src="images/book.jpg" alt="岛上书店"/>
    <div class="r">
        <div id="book">书名：岛上书店</div>
        <input name="changeBook" value="换换名称" type="button" onclick="alterBook();" /><br>
        四季名称：
        <input name="season" type="text" value="春" />
        <input name="season" type="text" value="夏" />
        <input name="season" type="text" value="秋" />
        <input name="season" type="text" value="冬" /><br><br>
        <input name="b2" type="button" value="input内容" onclick= "all_input()" />
        <input name="b3" type="button" value="四季名称" onclick="s_input()" />
        <input name="b4" type="button" value="清空页面内容" onclick="clearAll()" />
        <p id="replace"></p>
    </div>
</div>
<div id="content"></div>
<div id="cc"></div>
</body>

DOM获取页面的元素

猜你喜欢