[JavaScript知识库] WebApi

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> WebApi -> 正文阅读

[JavaScript知识库]WebApi

一、Dom

1. 获取元素

1.1 根据元素ID获取

document.getElementById('元素id');

1.2 根据标签名获取

document.getElementsByTagName('元素标签名');

1.3 H5新增获取方式

返回指定的选择器的第一个元素

document.querySelector('标签名|类名|元素id|……')；

返回指定的选择器的所有元素

document.querySelectorAll('标签名|类名|元素id|……')；

获取body
```
document.body
```
获取HTML
```
document.documentElement
```

2. 事件

2.1 事件三要素

事件源、事件类型、事件处理程序

2.2 操作元素内容

innerText：去除Html标签，同时去除空格和换行
** innerHtml**：保留空格和换行

2.3 操作元素属性

// 图片
var img = document.getElementsByTagName('img');
img.src = 'xxx.jpg';
// 输入框
var input = document.getElementsByTagName('input');
input.type = 'text/password'

2.4 修改样式属性

var div = document.getElementsByTagName('div');
div.style.backgroundColor = 'pink;

注意：

JavaScript 样式采用驼峰命名法
avaScript 修改style 样式，产生的是行内样式，css权重比较高
className 会直接更改元素类名，会覆盖原先类名

3. 排他思想

例如：多个按钮添加点击事件

for(var i = 0; i < btns.length;i++){
	btn[i].onclick = function() {
		// 把所有按钮样式去掉
		// 给当前按钮设置样式
	}
}

4. 获取属性值

4.1 element.属性

var url = img.src;

4.2 getAttribute(‘属性’)

var url = img.getAttribute('src);

4.3 二者区别

element.属性：只能用于获取内置样式
element.getAttribute(‘属性’)：主要用于获取自定义属性（标准）

5. 移除、更改属性值

5.1 更改/设置属性值

element.属性 = ‘值’
element.setAttribute(‘属性’，’值‘）
区别：
- element.属性：只能用于设置内置样式
- element.setAttribute(‘属性’，’值‘)：主要用于设置自定义属性

5.2 移除属性

element.removeAttribute('属性名‘)

6. 自定义属性

6.1 设置自定义属性

H5规定自定义属性以**data-**开头作为属性名并赋值
```
<div data-index = "1"></div>
```

6.1 获取自定义属性

兼容性获取
```
element.getAttribute('data-index');
```

H5 新增

// 获取 data-index 属性
var index = element.dataset.index

7. 节点操作

7.1 节点概述

一般来说，节点至少拥有nodeType(节点类型)、**nodeName(节点名称)、nodeValue(节点值) 这三个基本属性。
元素节点 nodeType 值为 1
属性节点 nodeType 值为 2
文本节点 nodeType 值为 3（文本节点包括文字、空格、换行等）

7.2 节点层级

父级节点：node.parentNode
- parentNode 属性可返回某一节点的父节点，注意返回的是最近的一个父节点
- 如果指定元素没有父节点则返回 null
子级节点1：parentNode.childNodes (标准)
- 返回包含指定节点的子节点的集合
- 返回值里包含所有子节点，包含元素节点、文本节点等
子级节点2：parentNode.children (非标准，常用)
- 获取所有子元素节点
获取第一个子节点
- ParentElement.firstChild：第一个子节点，不管是元素还是文本节点
- ParentElement.firstElementChild：第一个子元素节点
获取最后一个子节点
- ParentElement.lastChild: 最后一个子节点，不管是元素还是文本节点
- ParentElement.lastElementChild：最后一个元素节点
兄弟节点
- node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null，同样也是包含所有节点
- node.previoussibling：上一个兄弟节点
- node.nextElementSibling：下一个元素节点
- node.previouselementSibling：上一个兄弟节点

7.3 创建节点

创建节点1：创建由tagName指定的Html元素
```
document.createElement('tagName');
```
创建节点2：将一个节点添加到指定的父节点下子节点列表的末尾
```
ParentElement.appendChild(child);
```
创建节点3：将一个节点添加到父节点指定的子节点前面
```
ParentElement.insertBefore(child,指定元素);
```

7.4 删除节点

ParentElement.removeChild(child)：该方法从Dom中删除一个子节点，返回删除的节点
```
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
```

7.5 复制节点

node.cloneNode()
- 该方法返回调用该方法的节点的一个副本，也成拷贝/克隆节点
- 注意：
  - 如果括号里参数为空或为false，则是浅拷贝，即只拷贝复制节点本身，不拷贝里面的子节点。
  - 如果括号里参数为，则是深拷贝，会拷贝复制节点本身及里面的子节点。

8. 三种动态创建元素的区别

document.write()
- 将内容直接写入页面内容流，但是文档流执行完毕，会导致页面重绘。
element.innerHtml
- 将内容直接写入某个DOM节点,不会导致内容重绘
element.createElement() 和 element.innerHtml的区别
- element.createElement()：创建多个元素效率稍微低一点点，但结构更清晰
- element.innerHtml：创建多个元素效率更高（不采用拼接字符串，采用数组形式拼接）

二、Bom

1. 窗口加载事件

load

window.addEventListener('load',function(){
	console.log('窗口加载成功！')
})

DomContentLoaded

window.addEventListener('DomContentLoaded',function(){
	console.log('窗口加载成功！')
})

使用场景：图片比较多的情况

调整窗口大小事件resize

window.addEventListener('resize',function(){
	console.log('窗口加载成功！')
})

2. this指向问题

一般情况下，this的最终指向是调用它的对象
全局作用域获取普通函数中this指向window
定时器中this指向window
方法调用中** this 指向方法的调用者
构造方法中this指向构造函数的实例

3. 同步、异步

同步任务
- 前一个任务结束后，在执行后一个任务
- 同步任务都在主线程上执行，形成一个执行栈
异步任务
- 多个任务同时执行
- JavaScript的异步任务都是通过回调函数来实现的
- 一般来说，异步任务有以下三种类型
  - 普通事件：click、resize等
  - 资源加载事件：load、error等
  - 定时器：setTimeOut、setInterVal等
- 异步任务相关回调函数添加到任务队列中（消息队列）