常用DOM对象手记

文档对象模型小汇总

• getElementsByTagName() 方法可返回带有指定标签名的对象的集合

<p>动物</p>
<ul>
    <li>够</li>
    <li>猫</li>
    <li>狮子</li>
</ul>
<p>单击按钮显示动物</p>
<button onclick="show_list()" type="button">显示列表</button>
<div id="list"></div>
<script type="text/javascript">
    function show_list(){
        let list = document.getElementsByTagName('ul')
        for(let i=0;i<list.length;i++){
            document.getElementById('list').innerHTML+=list[i].innerHTML+"<br>"
        }
    }
</script>

• forms 集合返回当前页面所有表单的数组集合

<form action="#" method="post" name='manifest'>
    <select name="rank" required>
        <option value ="微辣">微辣</option>
        <option value ="中辣">中辣</option>
        <option value ="特辣">特辣</option>
    </select>
    <button onclick="noun()" type="button">下单</button>
</form>
<script type="text/javascript">
    function noun(){
        let option = document.forms.manifest['rank'].value
        if(option == '特辣'){
            alert('特辣食品，祝你海运')
        }
    }
</script>

• setCustomValidity() 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法

<p id="demo"></p>
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>

• createElement() 方法通过指定名称创建一个元素
• setAttribute() 方法创建或改变某个新属性
• appendChild() 方法可向节点的子节点列表的末尾添加新的子节点

<div id="row">
    <input type="number" placeholder="输入分数" name="" id="" value="" />
    <input type="number" placeholder="输入分数" name="" id="" value="" />
    <input type="number" placeholder="输入分数" name="" id="" value="" />
</div>
<button type="button" onclick="addtext()">添加</button>
<script type="text/javascript">
    function addtext(){
        let text = document.createElement('input')
        text.setAttribute('type','number')
        text.setAttribute('placeholder','输入分数')
        row.appendChild(text)
    }
</script>

• nodeValue 属性根据节点的类型设置或返回节点的值
• document.addEventListener() 方法用于向文档添加事件句柄
  

  <p id="demo"></p>
  <script>
  document.addEventListener("click", function(){
      document.getElementById("demo").innerHTML = "Hello World!";
  });
  </script>

• radio 对象代表 HTML 表单中的单选按钮
  

  <form action='#'>
      <p>What flavor do you prefer?</p> 
      <input type='radio' name='flavor' id='vanilla' />
      Vanilla 
       <input type='radio' name='flavor' id='butterscotch' /> 
       Butterscotch
          <input type='radio' name='flavor' id='chocolate' onclick="show()"/>
      Chocolate <br />
  </form>
  <script type="text/javascript">
      function show(){
          console.log(document.getElementById('chocolate').checked == true)
      }
  </script>

  

• selectedIndex 属性可设置或返回下拉列表中被选选项的索引号
  var x=document.getElementById("mySelect").selectedIndex;
• onchange 属性可以使用于： <input>, <select>, 和 <textarea>
  onchange 事件常结合对输入字段的验证来使用
  

  <!-- JS原生代码实现简单的二级联动 -->
          <select id="province">
              <option value="">请选择省份</option>
          </select>
  
          <select name="" id="citys">
              <option value>请选择城市</option>
          </select>
  
          <script type="text/javascript">
              data = {
                  "四川": ["资阳", "城都", "南充"],
                  "山西": ["大同", "太原"],
                  "山东": ["潍坊", "菏泽", "济南"]
              }
              console.log(typeof(data))
              var pro = document.getElementById('province')
              var city_ele = document.getElementById("citys")
              //循环遍历对象
              for (var i in data) {
                  var ele = document.createElement("option") //创建option节点
                  ele.innerHTML = i;
                  pro.appendChild(ele); //循环遍历将省份添加到select省份下面
                  // console.log(i)
              }
              //onchange 域的内容被改变
              //onselect 文本被选中
              pro.onchange = function() {
                  // body...
                  //console.log(this.selectedIndex);//选择索引值
                  console.log(this.options[this.selectedIndex])
                  //this这里的this代指pro标签，this.options指的是option标签集合，this.selectedIndex获取被选中的元素下标
                  var citys = data[this.options[this.selectedIndex].innerHTML] //通过选中的省份获取城市数组
                  city_ele.options.length = 1; //初始化城市长度
                  for (var i = 0; i < citys.length; i++) {
                      //遍历城市长度
                      var ele = document.createElement("option")
                      ele.innerHTML = citys[i]
                      city_ele.appendChild(ele) //添加option标签
                  }
              }
          </script>

  

• getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象
  

  <div class="shade hide"></div>
  var ele_shade = document.getElementsByClassName('shade')[0]
  console.log('1',ele_shade)

  

• classList 属性返回元素的类名，作为 DOMTokenList 对象

var ele_shade = document.getElementsByClassName('shade')[0]
ele_model.classList.remove("hide")//添加类
ele_model.classList.add("hide")//删除类

• querySelectorAll() 方法返回文档中匹配指定的类名
• querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
• getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
• insertBefore() 方法在您指定的已有子节点之前插入新的子节点
• lastChild 属性可返回文档的最后一个子节点
• childNodes 属性返回包含被选节点的子节点集合
• parentNode 属性可返回某节点的父节点
• replaceChild() 方法用新节点替换某个子节点
• createTextNode() 可创建文本节点
• removeChild() 方法可从子节点列表中删除某个节点