zoukankan      html  css  js  c++  java
  • DOMdocument的一些方法

    body\document都是window中的一个对象,我们常用的操作都在document 中进行,document表示当前的页面文档。它有以下几个经典常用的方法:

    getElementById():根据标签ID获取要操作的标签。

    getElementByName():根据标签名称获取要操作的一组标签数组,如有相同名称的radio等标签

    getElementByTagName():根据标签的类型获取要操作的一组标签数组,如input类型等

    另动态增加标签用到的有如下函数:

    createElement("标签类型"),然后用appendChild()加进去即可,用removeChild()是去除此标签控件。

    另:标签的innerText只是显示标签的内容,而innerHtml显示的是带有格式的html源码的内容。

    如下功能:

    分别显示性别的id,以及动态增加一个select 和button,且button关联一个事件,显示label的value:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function ShowCheckBoxValue() {
                var chks = document.getElementsByName("gender");
                if (chks) {
                  var svalue="";
                  for(var i=0;i<chks.length;i++) {
                     svalue+=chks[i].id;                 
                  }
                  document.getElementById("ara1").value = svalue;
                }
    
          }
          function clickme() {  //新增的事件
            alert(document.getElementById('mylabel').innerText);
          }
          function dynamicAddSelect() {
              var selobj = document.createElement("select");
              selobj.innerHTML = "<option>aa</option><option>bb</option><option>cc</option>";  //非常好用的属性
              document.body.appendChild(selobj);
    
              var btn = document.createElement("input");
              btn.type = "button";
              btn.value = "我是新增的";
              btn.onclick = clickme;
              document.body.appendChild(btn);
              
          }
        </script>
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <input type="checkbox" id="Male" name="gender"/><label id="mylabel" for="Male">男</label>
            <br />
        <input type="checkbox" id="Female" name="gender"/><label for="Female">女</label>
            <br />
        <input type="checkbox" id="unKnown" name="gender"/><label for="unKnown">保密</label>
        <br />
        <input type="button" value="得到三个checkbox的名称" onclick ="ShowCheckBoxValue()"/>&nbsp;
        <textarea id="ara1" rows=5></textarea>
        <input type="button" value="动态增加select" onclick="dynamicAddSelect()">
       
        </div>
    
        </form>
    </body>
    </html>
  • 相关阅读:
    设计模式 策略模式
    Java 集合 LinkedList的ListIterator
    Java 集合 JDK1.7的LinkedList
    Java 集合 集合与数组之间的转换
    Java Object 对象拷贝答疑
    Java Object 对象拷贝
    Java 集合 fail-fast机制 [ 转载 ]
    .net知识点汇总
    Javascript知识点汇总-初级篇
    Javascript实用技巧
  • 原文地址:https://www.cnblogs.com/yagzh2000/p/3088720.html
Copyright © 2011-2022 走看看