04-23 DOM 操作

一、webapi 操作

1. webapi 介绍

（1） api的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数。

（2）webapoi的概念

web API特指浏览器提供的API(一组方法)

（3）JavaScript 的组成

2. DOM概念

事件基础文档对象模型（Document Object Model，简称DOM），处理可扩展标志语言的标准编程接口。
DOM又称为文档树模型。
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签(元素)的属性

3.模拟文档树结构

4.获取元素的方式

除了id，没有all的（querySelector），剩下的都要遍历，或者指定下标才能出来

（1）根据id获取元素

var div1 = document.getElementById("box1");

（2）通过类名获取元素

var p1Arr = document.getElementsByClassName("p1");
console.log(p1Arr instanceof Array);//false
console.log(Array.isArray(p1Arr));//false
console.log(p1Arr.length);
console.log(p1Arr[0]);
console.log(p1Arr[1]);

（3）通过标签名获取元素

var tag1 = document.getElementsByTagName("div");
console.log(tag1);
console.log(tag1[0]);

（4）通过name名获取元素

var userList = document.getElementsByName("user");
console.log(userList);
for (var i = 0; i < userList.length; i++) {
console.log(userList[i]);
}

（5）通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素，参数就是选择器的名称

var div1 = document.querySelector(".box1");
console.log(div1);
var li1 = document.querySelector("ul>li");
console.log(li1);
var user_1 = document.querySelector("#user_1");
console.log(user_1)

（6）通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称
var boxList = document.querySelectorAll(".box1");
console.log(boxList);
var listLi = document.querySelectorAll("ul li");
console.log(listLi);

二、事件初识

1.事件三要素

事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

2.事件的基本使用

<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
</script>

鼠标单击事件：onclick 浏览器加载完成事件：onload

3.事件触发的多种写法

HTML内部书写所有
HTML行内触发方法
HTML外部书写

点击更改图片

倒计时

点我获取验证码倒计时

随机点名

三、 非表单元素的属性操作

更改属性元素的两种写法

1、添加src属性值显示图片

imgBox.src = "images/jie.jpg";

2、改变图片大小

imgBox.width = 750;
imgBox.height = 500;

3、通过style改变宽高

imgBox.style.width = 750 + "px";
imgBox.style.height = 500 + "px";
//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

4、通过类名改变宽度

imgBox.className = "imgCl";
//className 会覆盖之前设置好的类名！

5、隐藏元素

1、src=“”
2、display=none; 不占位置的
3、visibility="hidden

6、this的指向问题

① 普通函数中，this指向window
② 构造函数中，this指向实例化对象
③ 对象函数中，this指向当前的对象
④ 事件函数中，this指向事件源

四、表单元素属性操作

1.value 用于大部分表单元素的内容获取(option除外)

2.type 可以获取input标签的类型(输入框或复选框等)

3.disabled 禁用属性checked 复选框选中属性

4.selected 下拉菜单选中属性

5.checked

五、文本内容属性

(1)、innerText和textContent
设置标签中的文本内容,应该使用textContent属性。
设置标签中的文本内容,应该使用innerText属性。
返回被选元素的文本内容
var p1 = document.getElementById(“p1”);
console.log(p1.innerText);
设置被选元素的文本内容
btn1.onclick = function () {
// 设置文本
p1.innerText = “文本改变了哈”;
console.log(p1.innerText);
}
innerText和innerHTML的区别
使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

富文本就是带有特殊标签的

innerText和textContent的区别

开关灯效果

隔行变色

重点：重复点击禁用

设置flag状态