第14章 Web API

DOM

获取页面元素

• 通过 id 获取元素
• 通过 tag 获取元素
• 通过 name 获取元素
• 通过 class 获取元素

document.getElementById('idStr');
document.getElementsByTagName('tagStr');
document.getElementsByName('nameStr');
document.getElementsByClassName('classStr');

• 通过 querySelector 获取元素
• 通过 qurrySelectorAll 获取元素

document.querySelector('选择器');
document.querySelectorAll('选择器');

• 获取 body 元素
• 获取 html 元素

document.body;
document.documentElement;

属性

Property 属性（内置）

• 修改对象属性，不会体现到 HTML 结构中

• 用于修改 style、className、innerText、innerHtml

element.属性 = '值';

Attribute 属性（自定义）

• 修改 HTML 属性，会改变 HTML 结构

• 通过 getAttribute 方法获取属性

• 通过 setAttribute 方法修改属性

• 通过 removeAttribute 方法移除属性

element.getAttribute('属性');
element.setAttribute('属性','值');
element.removeAttribute('属性');

节点

节点操作

• createElement 用于创建节点
• appendChild 用于添加节点（添加到最后）
• 若 appendChild 中的节点为现有节点，则是移动，而不是添加

// 1.创建节点 createElement()
const li = document.createElement('li');
// 2.添加节点 node.appendChild(child)
ul.appendChild(li);
// 3.添加节点（添加到指定元素的前面） node.insertBefore(child, 指定元素)
ul.insertBefore(li, ul.children[0]); // 插入到第一个
// 4. 删除节点 node.removeChild(child)
ul.removeChild(ul.children[0]);
// 5.复制节点 node.cloneNode() 参数为false或空 为浅拷贝 只复制标签 参数为true 为深拷贝
ul.children[0].cloneNode();

父子节点

• 父节点 parentNode
• 子节点 childNodes（获取所有节点 包含元素节点 文本节点等等） 不常用
• 子节点 children（获取所有的子元素节点） 常用

// 父节
element.parentNode;

// 子节点
element.childNodes;
element.children;

// 第一个子节点
parentNode.firstChild; // 所有节点
parentNode.firstElementChild; // 元素节点
parentNode.children[0];  // 推荐

// 最后一个子节点
parentNode.lastChild; // 所有节点
parentNode.lastElementChild; // 元素节点
parentNode.children[parent.children.length - 1]; // 推荐

兄弟节点

// 下一个兄弟节点
node.nextSibling; // 所有节点
node.nextElementSibling; // 元素节点

// 上一个兄弟节点
node.previousSibling; // 所有节点
node.previousElementSibling; // 元素节点

性能优化

• DOM 查询做缓存

const p = document.querySelectorAll('p');
const length = p.length;
for (let i = 0; i < length; i++) { }

• 将频繁操作改为一次性操作

// 创建一个文档片段
const frag = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  const li = document.createElement('li');
  li.innerHTML = 'Item' + i;
  frag.appendChild(li);
}

document.body.appendChild(frag);

BOM

• navigator 用于获取浏览器相关信息

const ua = navigator.userAgent;
const isChrome = ua.indexOf('Chrome');

• screen 用于获取屏幕相关信息

screen.width;
screen.height;

• location 用于获取 URL 相关信息

// http://127.0.0.1:5500/index.html?username=zhichao#title
location.href; // URL 
location.protocol; // 协议 http:
location.host; // 主机名 127.0.0.1:5500
location.search; // query参数 ?username=zhichao
location.hash; // Hash地址 #title
location.pathname; // 路径 /index.html

• history 用于操作历史记录

history.back();
history.forword();

事件

注册事件

• 传统注册方式
• 方法监听注册方式

// 传统
btn.onclick = funtion() {}
// 方法监听
btn.addEventListener('click',function() {},[true/false]); // true 为捕获阶段，false 或空为冒泡阶段

删除事件

// 传统注册方式
btn.onclick = funtion() {
    div.onclick = null
}
// 方法监听注册方式
btn.addEventListener('click',fn)

function fn() {
    btn.removeEventListner('click',fn)
}

事件对象

btn.onclick = funtion(e) {
    e.target // 返回触发事件的对象
    e.type // 返回事件的类型 比如 click mouseover
    e.preventDefault() // 阻止默认事件
    e.stopPropagation() // 阻止冒泡
}

事件代理

• 将事件绑定到父元素上
• 减少浏览器内存占用

存储

cookie

• 本身用于浏览器和 server 通讯

• document.cookie 设置 cookie

• 设置 cookie 时会追加而不是覆盖

• 缺点

  • 存储大小，最大 4KB
  • HTTP 请求时需要发送至服务端，增加请求数据量

localStorage & sessionStorage

• 最大可存 5M
• 通过 getItem 与 setItem 进行操作
• localStorage 会永久存储
• sessionStorage 浏览器关闭则会清空