【Js学习笔记】Js操作DOM

Js操作DOM

获取页面元素

id名获取元素

<body>
  <div id="time">2022-06-01</div>
  <script>
    // 因为页面是从上往下加载，所有要先有标签，所以script写到标签下面
    // 返回的是一个元素对象
    var timer = document.getElementById('time')
    // console.dir 打印我们返回的元素对象  更好的查看里面的属性和方法
    console.dir(timer)      
  </script>
</body>

标签名获取元素

<body>
  <ul>
    <li>测测，测试1</li>
    <li>测测，测试2</li>
    <li>测测，测试3</li>
    <li>测测，测试4</li>
  </ul>

  <ol id="olId">
    <li>生僻字1</li>
    <li>生僻字2</li>
    <li>生僻字3</li>
  </ol>

  <script>
    // 返回的是一个伪数组元素对象集合，获取的是所有页面的li标签元素
    var lis = document.getElementsByTagName('li')
    console.log(lis);  
    console.log(lis[0]);
    // 通过for遍历依次打印元素对象
    for (var i=0;i<lis.length;i++){
      console.log(lis[i]);
    }

    console.log('间隔');
    // 通过父元素的id获取指定标签的子元素
    var oll = document.getElementById('olId')
    console.log(oll.getElementsByTagName('li'));
  </script>
</body>

新方法获取元素

<body>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>

  <script>
    // getElementsByClassName 根据类名获得某些元素的集合（获取所有指定类的集合）
    var boxs = document.getElementsByClassName('box')
    console.log(boxs);

    // querySelector 返回指定选择器中的第一个元素对象，切记：里面的选择器要加对应的符号，比如类：.box   ID：#nav
    var firstBox = document.querySelector('.box')
    console.log(firstBox);
    var nav = document.querySelector('#nav')
    console.log(nav);
    var lli = document.querySelector('li')
    console.log(lli);

    // querySelectorAll 返回指定选择器的所有元素对象
    var allBox = document.querySelectorAll('.box')
    console.log(allBox);
  </script>
</body>

获取特殊的标签

<script>
  // 获取body元素内容
  var bodys = document.body
  console.log(bodys);

  // 获取html元素
  var htmlEle = document.documentElement
  console.log(htmlEle);
</script>

事件

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解：触发—响应机制

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某个按钮时产生一个事件，然后去执行某些操作。

<body>
  <button id="btn">唐伯虎</button>
  <script>
    // 点击一个按钮，弹出对话框
    // 1、事件是由三部分组成，事件源、事件类型、事件处理程序，我们称为事件三要素
    // 1.1 事件源 事件被触发的对象  谁 按钮
    // 1.2 事件类型 如何触发，什么事件，比如鼠标点击(onclick) 还是鼠标经过，还是键盘按下
    // 1.3 事件处理程序，通过一个函数赋值的方式完成
    var btn = document.getElementById('btn')
    btn.onclick=function(){
      alert('点秋香');
    }
  </script>
</body>

执行事件的步骤示例

<body>
  <div>123</div>
  <script>
    // 执行步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var btn = document.querySelector('div')
    // 2、绑定事件
    // 3、事件处理程序
    btn.onclick = function () {
      console.log('我被点击了');
    }
  </script>
</body>

修改元素内容

innerText修改

innerText非标准，从起始到终止位置的内容，不能识别html的标签，同时空格和换行也会去掉

<body>
  <button>点我显示时间</button>
  <div id="time1">点击显示时间</div>
  <div id="time2">自动显示时间</div>
  <script>
    // 实现绑定点击按钮，点击事件后改变div1中的内容
    var btn = document.querySelector('button')
    var t1 = document.getElementById('time1')
    btn.onclick = function () {
      t1.innerText = '2022-06-01 11:03:45'
    }


    // 定义一个获取当前时间函数
    function getTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth();
      var dates = date.getDate();
      var zhou = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      var day = date.getDay();

      return '今天是' + year + '年' + month + '月' + dates + '日 '  + zhou[day];
    }
    var t2 = document.getElementById('time2')
    // 不绑定时间，页面打开直接显示内容。
    t2.innerText = getTime();
  </script>
</body>

innerHTML修改

innerHTML是w3c标准，从起始到终止位置所有内容，可以识别html的标签，同时保留空格和换行。

<body>
  <div id="time2">自动显示时间</div>
  <script>
    // 定义一个获取当前时间函数
    function getTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth();
      var dates = date.getDate();
      var zhou = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      var day = date.getDay();

      // 这里返回一个加粗 今天是：的html标签
      return '<strong>今天是：</strong>' + year + '年' + month + '月' + dates + '日 '  + zhou[day];
      
    }
    var t2 = document.getElementById('time2')
    // 使用innerHTML修改页面内容，通过会解析返回的html标签
    t2.innerHTML = getTime();
  </script>
</body>

修改元素属性

设定俩个按钮，通过js实现点击不同按钮时，修改图片的src和title属性。

<body>
  <!-- 设定俩个按钮，通过js实现点击不同按钮时，修改图片的src和title -->
  <button id="img1">图片1</button>
  <button id="img2">图片2</button><br>
  <img src="https://oss.putianhui.cn/admin/bg10.jpeg" alt="" title="">
  <script>
    // 获取按钮1和按钮2的元素
    var im1 = document.getElementById('img1')
    var im2 = document.getElementById('img2')
    // 获取图片的元素
    var imgs = document.querySelector('img')
    // 为按钮1和按钮2的元素绑定鼠标点击事件
    im1.onclick = function () {
      // 事件触发后修改图片元素的src和title属性
      imgs.src = 'https://oss.putianhui.cn/admin/bg01.jpeg'
      imgs.title = '图片1'
    }
    im2.onclick = function () {
      imgs.src = 'https://oss.putianhui.cn/admin/bg02.jpeg'
      imgs.title = '图片2'
    }
  </script>
</body>