javaScript-WebAPIs（一）

API	说明
document.getElementById(id);	根据ID获取元素对象
document.getElementByTagName(‘标签名’);	根据标签名获取元素对象（以伪数组的形式存储）
document.getElementByClassName(‘类名’);	根据类名获取元素对象，H5新增
document.querySelector(‘选择器’);	根据指定选择器，返回第一个元素对象，H5新增
document.querySelectorAll(‘选择器’);	根据指定选择器返回元素对象，H5新增

根据ID获取元素对象

<body>
  <div id="box">2022-1-4</div>

  <!-- script标签写在这里是因为：文档页面从上往下加载，得先有标签，所以写在下面 -->
  <script>
    // 根据id获取元素对象
    var box = document.getElementById('box');
    console.log(box);
    console.log(typeof box); // Object
    console.dir(box);// console.dir 打印返回的元素对象 更好查看里面的属性和方法
  </script>
</body>

根据标签名获取元素对象

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <ul id="ul2">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!-- script标签写在这里是因为：文档页面从上往下加载，得先有标签，所以写在下面 -->
  <script>
    // 1、返回获取的元素集合，以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
    console.log(lis); // 获取所有li标签
    console.log(lis[0]);

    // 2、想要依次打印可以使用遍历的方式
    for (var i = 0; i < lis.length; i++) {
      console.log(lis[i]);
    }

    // 3、element.getElementByTabName可以得到这个元素的某些元素
    var ul = document.getElementById('ul2');
    var lis2 = ul.getElementsByTagName('li'); // 获取第二个ul里面的li
    console.log(lis2);
  </script>
</body>

H5新增获取元素方式

<!-- script标签写在这里是因为：文档页面从上往下加载，得先有标签，所以写在下面 -->
  <script>
    // 1、getElementByClassName(); 根据类名返回元素对象集合
    var box = document.getElementsByClassName('box');
    // 2、querySelector();根据选择器返回第一个元素对象，注意：括号里加.说明是类，加#说明是id
    var box = document.querySelector('.box');
    // 3、querySelectorAll();根据选择器返回元素对象集合
    var box = document.querySelectorAll('.box');
    console.log(box);
  </script>

获取特殊元素（html，body）

API	说明
document.body	返回body元素对象
document.documentElement	返回html元素对象

事件基础

概述

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

简单理解： 触发--- 响应机制。

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

事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

  <script>
    // 要求点击按钮弹出警示框
    // 事件三要素：事件源 事件类型 事件处理程序
    var btn = document.getElementById('tbh'); // 事件源-按钮
    btn.onclick = function () { // 事件类型-点击事件
      alert('点秋香'); // 事件处理程序-弹出警示框
    }
  </script>

执行事件的步骤

  <script>
    // 要求点击按钮弹出警示框
    // 事件三要素：事件源 事件类型 事件处理程序
    var btn = document.getElementById('tbh'); // 1、事件源-按钮
    btn.onclick = function () { // 2、事件类型-点击事件
      alert('点秋香'); // 3、事件处理程序-弹出警示框
    }
  </script>

常见的鼠标事件

操作元素

改变元素内容（获取或设置）

API	说明
element.innerText	改变元素内容（不渲染html标签）
element.innerHtml	改变元素内容（渲染html标签）

innerText和innerHtml区别：

innerText：去除空格和换行，不渲染html标签

innerHtml：保留空格和换行，渲染html标签

案例代码

<body>
  <button id="btn">显示日期</button>
  <div id="box">2020</div>
  <script>
    // 要求点击按钮以后显示当前日期
    // 1、事件源
    var btn = document.querySelector('#btn');
    var box = document.getElementsByTagName('div')[0];
    // 2、事件类型
    btn.onclick = function () {
      // 3、事件处理程序
      // box.innerText = '2020-20-22';不识别html标签
      // box.innerHTML = '<i>2020</i>-20';可以识别html标签
      box.innerHTML = getTimer();
      // 这两个属性是可读可写的 
      console.log(box.innerHTML); // 打印box内文本
    }

    function getTimer() {
      var date = new Date();
      var fullYear = date.getFullYear();
      var month = date.getMonth();
      var dates = date.getDate();
      var day = date.getDay();
      var arrDate = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

      return fullYear + '年' + month + '月' + dates + '日 ' + arrDate[day];
    }

  </script>
</body>

常用元素的属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

常用方式

方式1：通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值;

案例代码

<body>

  <div id="box"></div>

  <script>
    var box = document.getElementById('box');
    box.onclick = function () {
      // div.style里面的属性，采用驼峰命名法
      box.style.backgroundColor = 'red';
    }
  </script>
</body>

方式2：通过操作className属性

元素对象.className = 值;

因为class是关键字，所以使用className。

案例代码

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

操作元素总结

清晨投递

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javaScript-WebAPIs（一）

下面学习JS的另外一个部分——DOM先来了解一下和API和WebAPIAPI的概念API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。Web API的概念Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。现阶段我们主要针对于浏览器讲解常
复制链接

扫一扫