WebApI

WebApI
通过ID获取元素
操作页面元素的步骤
① 获取需要操作的元素
② 操作元素的属性
获取元素的套路
① 在某个元素对象中元素查找具体元素
② 调用方法的方式
语法:document.getElementById('id')
通过标签名获取元素
语法：element.getElementsByTagName('标签名')
注意：返回伪数组数据 一个页面可以有多个相同标签名的元素
可以使用 .length方法获取元素个数和[index]方法获取某个具体元素，不能使用其他数组内置方法
element.getElementsByTagName('标签名')[0];
element.getElementsByTagName('标签名').length;
可以通过 for循环 获取每一个元素
for(var i = 0;i<element.getElementsByTagName('标签名').length;i++){
element.getElementsByTagName('标签名')[i];
}
以在 任何元素下 通过标签名查找元素
通过类名获取元素 & 获取body元素
语法：element.getElementsByClassName(‘类名’)
注意：返回 伪数组 数据 一个页面可以有多个相同类名的元素
可以使用 .length方法获取元素个数和[index]方法获取某个具体元素，不能使用其他数组内置方法
可以通过for循环获取每一个元素
可以在任何元素下通过类名查找元素
语法：document.body
事件概念 & 事件三要素 & 注册事件的方法
事件概念：当用户某个页面元素进行某种操作（鼠标点击、划过）时，网页能够做出相应的回应
事件三要素：事件源、事件类型、事件处理程序
注册事件步骤：获取事件源、绑定事件类型、添加事件处理程序
注册事件语法：事件源.on+事件类型 = 事件处理程序
var div = document.getElementById('div');
div.onclick = function(){
console.log('我是div元素');
}
事件处理函数中的this：代表事件源（就是绑定事件的元素）
事件类型
// 点击事件
var div = document.getElementById('div');
div.onclick = function(){
console.log('我是点击事件');
}

var ipt = element.getElementByTagName('input')[0];
// 获得焦点事件
ipt.onfocus = function(){
console.log('我是获得焦点事件');
}

// 失去焦点事件
ipt.onblur = function(){
console.log('我是失去焦点事件');
}
修改元素内容
操作元素属性步骤：
① 获取需要操作的元素
② 操作元素的属性
标准属性：元素自带的属性 （可读可写）
获取语法：element.属性名
设置语法：element.属性名 = ‘属性值’
普通元素内容设置（div 、p、span、a.....）
element.innerHTML = '内容' 识别标签、空格 经常使用 element.innerText = '内容' element.innerHTML = '<a href = "https://www.baidu.com">百度</a>'; // 识别出链接 element.innerText = '<a href = "https://www.baidu.com">百度</a>'; // 显示出代码 表单元素** (input、textarea) element.value = '内容' element.value = '我是表单元素的内容' 设置元素样式 - style **设置元素行内样式**，**优先级高** element.style = 'css属性名1:属性值；css属性名2：属性值' element.style.css属性名 = '属性值' **设置单个样式 ** 如果样式用-连接 则需要用驼峰方式设置
设置元素样式 - class
element.className = '类名1 类名2 类名3 ' **设置多个样式** **会刷新元素的class属性** element.classList 设置多个样式
添加类 element.classList.add('类名1','类名2','类名3') 移除类 element.classList.remove('类名1','类名2','类名3')
切换类 element.classList.toggle('类名') :元素存在该属性删除该属性，不存在该属性添加该属性
设置元素常用属性
element.src = '属性值'
element.disabled = true/false
element.checked = true/false