元素element获取

getElementsByTagName()

参数：标签名字符串

返回：标签对象的伪数组

 <li>
    <ul></ul>
  </li>
  <li>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
  </li>
  <script>
    var list = document.getElementsByTagName('li'); // 返回的一个伪列表

    document.write(ul0);
    var ul = list[1].getElementsByTagName('ul'); // 通过父元素获取指定的标签名的元素
    console.log(list);
    console.log(ul);
  </script>

通过h5新增方法获取元素

getElementsByClassName通过类名返回元素对象集合

querySelector通过指定选择器返回第一个对象

querySelectorAll通过指定选择器返回所有对象

div.box{盒子$}*2

<script>
    var firstBox = document.querySelector('.box'); // 参数：类选择器
    console.log(box);

     var firstLi = document.querySelector('li'); // 参数：标签选择器
    console.log(firstLi);

    var firstLi = document.querySelectorAll('li');
    console.log(firstLi);
</script>
<!-- chrome：<div class="box">盒子1</div> -->
<!-- chrome:<li>…</li>-->
<!-- chrome: NodeList(5) -->

获取特殊页面元素

var bodyEle = document.body; // 获取body标签
var htmlElem = document.documentElement; // 获取html标签
console.log(bodyEle, htmlElem);
console.dir(htmlElem);

事件

事件三要素

• 事件源
• 事件类型
• 事件处理

<div id="btn">botton</div>
  <script>
    // 事件源
    var btn = document.getElementById('btn');
    // 事件类型
    // 事件处理 -> 通过匿名函数赋值完成
    btn.onclick = function () {
      alert('hello');
    }
  </script>

操作元素

常用属性的属性操作

1. innerText innerHtml
2. src href
3. tittle id alt

改变元素的innerText && innerHtml

<div class="box">盒子1</div>
  <div class="box">盒子2</div>

  </div>
  <button>点击显示时间</button>
  <div class="time">00:00:00</div>
  <script>
    var btn = document.querySelector('button');
    var timeText = document.querySelector('.time');

    btn.onclick = function () {
      while (true) timeText.innerText = getDate();
      console.log('click');
    }

    var getDate = function () {
      var date = new Date;
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      if (seconds < 10) seconds = '0' + seconds;
      return hours + ':' + minutes + ':' + seconds;
    }

    var box = document.querySelector('.box');
    box.innerText = getDate();

表单元素属性

type,value,checked,selected,disabled

案例

btn.onclick = function () {
  // chose radom wife
  var list = ["神尾观铃", '椎名真白', '宫内莲华', '平泽唯', '友利奈绪'];
  var len = list.length;
  text.value = list[Math.floor(Math.random(0, 1) * len)];
  // this 指向的是事件函数的调用者 btn
  this.disabled = true;
  }