First, what is Web APIs
(A), related concepts
1.API
It refers to the so-called API: API (Application Programming Interface, Application Programming Interface) is a function of a number of pre-defined in order to provide application developers with a set of routines based on the ability of a software or hardware to access, but do not need access to source code, without having to understand the details of its inner workings, you can simply use a direct call.
In many programming languages, there are API, such as a function fopen C language () is to open a file on the hard disk. Another example of alert js () function, a message box is displayed
2. WEB API
So-called web api refers to a set of browser functionality and operation of page elements api, it consists of two parts DOM and BOM
You can go to the official MDN to see more use to help address
3. How to learn it?
- In fact webapi a large number of functions, and some built-in objects. You only need to master and use it lines central point: that will be used on the line.
Two, DOM
(A), the concept of
1. related concepts
It refers to the so-called dom. Document Object Model (Document Object Model) is recommended by the w3c, for in extensible markup language, the standard programming interface. You can can change the structure, content and style of the page through it.
DOM tree diagram
- 文档：一个页面就是一个文档，DOM中使用document表示
- 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
- 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
- 每一个元素，都可以看做是一个对象，都有对应的属性和方法。2. Get element
To the operating elements on the page, you need to obtain elements
- According to id acquisition,
- Syntax: [document.getElementById (id)], literally meaning you can understand
- Parameter id, sensitive strings
- Return Value: element object is null or
The example code
<body>
<div id="time">2019-9-9</div>
<script>
// 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof(timer));
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>- To get the elements by name tags
- Syntax [documnet.getElementsByTagName ( 'tag name'), or the element.getElementsByTagName ( 'tag name')]
- Parameter name tag
- Return Value: set (pseudo-array) element objects
- Note that this way acquired elements need to traverse it. And is a dynamic acquisition,
Sample code:
<body>
<ul>
<li>BMlaoli,快来跟我学习编程吧！！！</li>
<li>BMlaoli,快来跟我学习编程吧！！！</li>
<li>BMlaoli,快来跟我学习编程吧！！！</li>
<li>BMlaoli,快来跟我学习编程吧！！！</li>
<li>BMlaoli,快来跟我学习编程吧！！！</li>
</ul>
<ul id="nav">
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
<li>bmlaoli。大法好！！！</li>
</ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式，for循环学得好不好，全看这里的运用了
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById('nav'); // 这个获得nav
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>- H5 new method to get the elements
- document.getElementsByClassName (class name), pay attention to Kazakhstan, the same, is a collection of acquired element here of elements, Elements, plus S! ! As long as the collection, even a complex S
- document.querySelector (selector). Returns the first element of the specified element, whatever it is can get, id, then add a Class # is to add a label to write directly. There are some compatibility issues for the lower version of IE browsers.
- document.querySelectorAll (selector)
- Note Kazakhstan, where the selectors need to add a # symbol
The example code
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. 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>- If you want to get specific elements such as body html?
- doucument.body acquired body
- doucument.doucumentElement get is html
Third, the events?
(A), relating to the concept of the event
Simply put, the page is what happened, triggering --- response mechanism .
Each element in the web page can generate some events can trigger JavaScript, for example, we can generate an event when a user clicks on a button, then go to perform certain operations.
- Three elements of the event
- Element that triggered the event: event source (who)
- Event type (what event): for example, click click event
- Event handler (Zuosha): Code (functional form) to be executed after the triggering event, the event handler
The example code
<body>
<button id="btn">点击我</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('别碰我');
}
</script>
</body>- What steps are:
- Get event source,
- Binding events
- Add a handler
The example code
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>(B) common events
1. mouse events
(C) how to operate the elements? In addition to console.log
1.inner change the content of the element
- Change the element content
there are two methods, please note the difference between them
Examples of code changes innerHTML element content
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>- InnerHTML and the difference innerText
- When the difference between the acquisition of content:
innerText removes spaces and line breaks, while innerHTML will retain spaces and line breaks
- When the difference between the set content:
innerText does not recognize html, and recognizes innerHTML
Example code:
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// 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);
</script>
</body>2. change the element object attributes, such as src, etc.
This is relatively simple, we look at the code examples
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>
</body>