Apis-Day1

Web Api 基本认识

作用和分类

• 作用: 就是用js去操作html元素和游览器
• 分类: DOM(文档对象模型)，BOM(游览器对象模型)

什么是DOM

• 又叫文档对象模型
• 主要用来操作html标签，实现网页特效和用户交互

DOM树

• 将html结构以树状的形式展示出来
• DOM树里面最大的对象时document对象，其次是html对象…

DOM对象

• 任何一个html标签都是一个对象
• 所有的标签属性和方法都可以在这个对象中找到
• DOM的核心思想是吧所有元素都当做对象来处理

---

获取DOM对象

通过css选择器获取

1. document.querySelector(“css选择器”)

• 默认获取第一个元素对象
• 返回一个HTMLElement对象

class
element
id

2. document.querySelectorAll(“css选择器”)

• 获取选中所有元素对象
• 返回一个NodeList(伪数组)元素对象数组

class
element
id

3. 传统方法获取元素

• 直接通过名字获取
• 根据类名获取和tag获取带s的返回的全是NodeList伪数组

---

修改DOM对象内容

对象.innerText

• 不会解析html标签只能识别纯文本

0

对象.innerHTML

• 可以解析html标签

0

修改DOM样式

1. 对象.style.样式属性名=属性值

• 如果属性值用-分割可以用小驼峰命名法，[“属性值”]赋值
• 属性值可以有多个值
• 用于修改少量的style属性

2. 对象.className=类名

• 适用于修改多个style
• 本质是替换class类名
• 可以通过多个值实现多个类

3. 对象.classList.操作(“类名”)

• 用于追加或者删除指定类

---

修改表单属性

对象.属性名=属性值

    Volvo
    Saab
    Opel
    Audi

对象.setAttribute()/removeAttribute()

const search=document.querySelector(".search");

// 新增或者修改属性
search.setAttribute("readonly","");
// 删除属性
search.removeAttribute("readonly");

---

自定义属性

• 以data开头，自己定义自己使用
• 返回DOMStringMap集合，存储元素所有自定义属性

---

定时器

间隙函数

• 不主动关闭会永久开启
• 第一个参数为函数名，不要加()否则用匿名函数
• 返回一个独一无二的id，用于操作定时器

1. 开启定时器

    function fn(){
        console.log(111);
    }
	
	// 写法一
    setInterval(fn,1000);
    // 写法二
	setInterval(function(){函数体...},1000);

2. 关闭定时器

function fn(){
    console.log(111);
}

let timer= setInterval(fn,1000);
clearInterval(timer);