Javascript基础

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

HTML DOM Document 对象

查找HTML元素

text类提取文本信息

 <div class="form-group">
        <label for="inputName" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-8">
          <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
        </div>
      </div>

1. 用id取值

<script>
function fun(){
     var objName =document.getElementById("inputName");
     var txtName = objName.value;
     alert(txtName);
     }
</script>

2. 用name取值

<script>
function fun(){
     var objArrName = document.getElementsByName("inputName");
     var txtName = objArrName[0].value;
     var txtPwd = objArrName[1].value;
     alert(txtName ++ txtPwd);
     }
</script>

radio取值操作

<div class="form-group">
        <label class="col-sm-2 control-label">性别</label>
        <div class="col-sm-8">
          <label class="radio-inline">
            <input type="radio" name="sex" id="Male" value="option1"> 男
          </label>
          <label class="radio-inline">
            <input type="radio" name="sex" id="Female" value="option2"> 女
          </label>
        </div>
      </div>

<script>
function fun(){
      var objArrRadio = document.getElementsByName("sex");
      var sexVal = objArrRadio[0].checked?"男":"女";
      alert(sexVal);
     }
</script>

CheckBox取值操作

<div class="form-group">
        <label class="col-sm-2 control-label">爱好</label>
        <div class="col-sm-8">
          <label class="checkbox-inline">
            <input type="checkbox" name="like" id="debate" value="辩论"> 辩论
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" name="like" id="read" value="读书"> 读书
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" name="like" id="mun" value="模联"> 模联
          </label>
        </div>
      </div>

<script>
function fun(){
      var objArrChk = document.getElementsByName("like");
      for(var i=0;i<objArrChk.length;i++){
       if(objArrChk[i].checked){
         alert(objArrChk[i].value);
       }
     }
     }
</script>

select取值操作

<div class="form-group">
        <label class="col-sm-2 control-label">学历</label>
        <div class="col-sm-8">
          <select class="form-control" id="sel">
            <option value="1001">小学</option>
            <option value="1002">高中</option>
            <option value="1003">本科</option>
            <option value="1004">硕士研究生</option>
            <option value="1005">博士研究生</option>
          </select>
        </div>
      </div>

<script>
function fun(){
      var objSel = document.getElementById("sel");
    var index = objSel.selectedIndex; 
    //selectedIndex 得到用户选择项目的下标
    // 通过下标在options对象数组中找到对应的option，再取txt值和value值
    alert(objSel.options[index].text+"---"+objSel.options[index].value)
     }
</script>

参考：https://www.w3school.com.cn/