JavaScript-API | 易学教程

Web API

APT

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组程序的能力，而又无需访问源码，或理解内部工作机制的细节。

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

Web API 一般都有输入和输出(函数的传参和返回值)，Web API很多都是方法(函数)。

DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

DOM树

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示

获取元素

如何获取页面元素

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

根据 ID 获取 getElementById()方法可以获取带有 ID 的元素对象。

<div id="time">2019-9-9</div>
<script>
    // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
    // 2. get 获得 element 元素 by 通过 驼峰命名法 
    // 3. 参数 id是大小写敏感的字符串
    // 4. 返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
    console.dir(timer);
</script>

根据标签名获取 getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

<ul>
    <li>知否知否，应是等你好久11</li>
    <li>知否知否，应是等你好久11</li>
    <li>知否知否，应是等你好久11</li>
    <li>知否知否，应是等你好久11</li>
</ul>

<ol id="ol">
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
</ol>
<script>
    // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
     console.log(lis);
    console.log(lis[0]);
    // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
    // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
    // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
    // var ol = document.getElementsByTagName('ol'); // [ol]
    // console.log(ol[0].getElementsByTagName('li'));
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
</script>

通过 HTML5 新增的方法获取1 getElementsByClassName('类名')根据类命返回元素对象集合。

<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);
</script>

通过 HTML5 新增的方法获取2 querySelector('选择器')根据选择器返回第一个元素对象。

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    // querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);
    var li = document.querySelector('li');
    console.log(li);
    // 3. querySelectorAll()返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis = document.querySelectorAll('li');
    console.log(lis);
</script>

获取特殊元素

获取body元素

 var bodyEle = document.body; // 返回body元素对象
 console.log(bodyEle);
 console.dir(bodyEle);

获取html元素

 var htmlEle = document.documentElement; // 返回html元素对象
 console.log(htmlEle);

事件概念

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解就是触发---响应机制。

事件三要素

事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素

事件源事件被触发的对象谁
事件类型如何触发什么事件比如鼠标点击(onclick)还是鼠标经过还是鼠标按下
事件处理程序通过一个函数赋值的方式完成

常见的鼠标事件

鼠标事件	触发事件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获取鼠标焦点事件
onblur	失去鼠标焦点事件
onmosemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

改变元素内容

element.innerText(从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉)
element.innerHTML(起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行)

innerText和innerHTML的区别

// 1. innerText 不识别html标签 非标准  去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的  可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);

样式属性操作

element.style(行内样式操作(css样式权重高))

  // div.style里面的属性 采取驼峰命名法 
  // this.style.backgroundColor = 'purple';
  // this.style.width = '250px';
  this.style.border='1px solid #ccc'

element.className(类名样式操作)

 //让我们当前元素的类名改为了 change
 //因为class是个保留字，因此使用className来操作元素类名属性
 //我们可以通过 修改元素的className更改元素的样式，会覆盖原生的类名 适合于样式较多或者功能复杂的情况
 this.className = 'change';(修改类名)
 //如果想要保留原先的类名，我们可以这么做 多类名选择器
 this.className = 'first change';(修改类名，也保留原先的类名)

循环精灵图背景

可以利用 for 循环设置一组元素的精灵图背景。案例分析

首先精灵图图片排列有规律的
核心思路：利用 for 循环修改精灵图片的背景位置 background-position

让循环里面的 i 索引号*44就是每张图片的y坐标

 <script>
 // 1. 获取元素 所有的小li 
 var lis = document.querySelectorAll('li');
 for (var i = 0; i < lis.length; i++) {
     // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
     var index = i * 44;
     lis[i].style.backgroundPosition = '0 -' + index + 'px';
 }
 </script>

排他思想

// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组  里面的每一个元素 btns[i]
   for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            // (2) 然后才让当前的元素背景颜色为pink 留下我自己
            this.style.backgroundColor = 'pink';

        }
    }
   //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想

自定义属性操作

获取元素的属性值

 // (1) element.属性
 console.log(div.id);
 //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
 console.log(div.getAttribute('id'));
 console.log(div.getAttribute('index'));

设置元素属性值

 // (1) element.属性= '值'
 div.id = 'test';
 div.className = 'navs';
 // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
 div.setAttribute('index', 2);
 div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className4

移除属性 removeAttribute(属性)
```
 div.removeAttribute('index');
```

H5自定义属性

自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

H5规定自定义属性 data-开头做为属性名并赋值。

h5新增的获取自定义属性的方法 dataset 是一个集合里面存放了所有以data开头的自定义属性

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
    var div = document.querySelector('div');
    // console.log(div.getTime);
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    console.log(div.getAttribute('data-list-name'));
    // h5新增的获取自定义属性的方法 它只能获取data-开头的
    // dataset 是一个集合里面存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>

来源：CSDN

作者：weixin_45786584

链接：https://blog.csdn.net/weixin_45786584/article/details/104045485

标签

鼠标接口

自定义属性

queryselector

element