本文详细介绍了JavaScript中的Web API，DOM的概念及其操作，包括获取元素的各种方法如getElementById、getElementsByClassName等。此外，还讲解了事件处理，如事件源、事件类型和事件处理程序，以及事件触发的不同方式。最后，文章涵盖了元素属性操作，事件监听，以及文本内容和样式设置的方法，为理解JavaScript与页面交互提供了全面的知识。
1.webapi介绍
1.1webapi的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
我们可以通过API去操作DOM和BOM
1.2JavaScript的组成
2.DOM概念
事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
DOM又称为文档树模型
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签(元素)的属性
3.模拟文档树结构
4.获取元素的方式
4.1根据id获取元素
var div1 = document.getElementById("box1");
4.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]);
4.3通过标签名获取元素
var tag1 = document.getElementsByTagName("div");
console.log(tag1);
console.log(tag1[0]);
4.4通过name名获取元素
var userList = document.getElementsByName("user");
console.log(userList);
for (var i = 0; i < userList.length; i++) {
console.log(userList[i]);
}
4.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)
4.6通过选择器的querySelectorAll获取元素
querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称
var boxList = document.querySelectorAll(".box1");
console.log(boxList);
var listLi = document.querySelectorAll("ul li");
console.log(listLi);
5.事件初始
事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。
5.1事件三要素
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
5.2事件的基本使用
<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
</script>
5.3事件触发的多种写法
HTML内部书写所有
HTML行内触发方法
HTML外部书写
注意：
绑定事件的是事件对象
触发事件的是事件源对象
6.非表单元素的属性操作
6.1添加src属性值显示图片
imgBox.src = "images/jie.jpg";
6.2 改变图片大小
imgBox.width = 750;
imgBox.height = 500;
6.3 通过style改变宽高
imgBox.style.width = 750 + "px";
imgBox.style.height = 500 + "px";
//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
6.4 通过类名改变宽度
imgBox.className = "imgCl";
//className 会覆盖之前设置好的类名！
6.5 隐藏元素
1、src=""
2、display=none; 不占位置的
3、visibility="hidden
6.6 this的指向问题
普通函数中，this指向window
构造函数中，this指向实例化对象
对象函数中，this指向当前的对象
事件函数中，this指向事件源
7.表单元素属性操作
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
checked
8.InnerText
返回被选元素的文本内容
var p1 = document.getElementById("p1");
console.log(p1.innerText);
设置被选元素的文本内容
btn1.onclick = function () {
// 设置文本
p1.innerText = "文本改变了哈";
console.log(p1.innerText);
}
9.新事件
9.1鼠标事件
onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件：在鼠标指针移出元素后触发
//鼠标移入事件
box1.onmouseover = function () {
this.style.fontSize = "26px";
this.style.height = "60px";
console.log(111)
}
// 鼠标移出事件
box1.onmouseout = function () {
this.innerText = "鼠标移出了哈！";
this.style.height = "30px";
this.style.fontSize = "16px";
}
onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发
// 鼠标进入事件
box2.onmouseenter = function () {
this.style.borderRadius = "12px";
this.style.backgroundColor = "blue";
}
//鼠标的离开事件
box2.onmouseleave = function () {
this.style.borderRadius = "0";
this.style.backgroundColor = "purple";
}
onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发
onblur失去焦点事件：在鼠标光标失去焦点时触发。
//获取焦点事件
user.onfocus = function () {
this.style.border = "3px solid red";
this.style.outline = "0";
}
// 失去焦点事件
user.onblur = function () {
console.log(this.value);
}
onclick单击事件：在鼠标指针单击时触发
ondblclick双击事件：在鼠标光标双击时触发。
box1.ondblclick = function () {
this.style.backgroundColor = "yellow";
9.2键盘事件
onkeydown：键盘按下
onkeyup:键盘抬起
document.getElementById("user").onkeydown = function () {
console.log("按下了！！1");
}
document.getElementById("user").onkeyup = function () {
console.log("抬起来了！！1");
console.log(this.value);
}
9.3浏览器事件
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
window.onscroll = function () {
console.log("滚动了！");
}
10. 文本属性内容
10.1innerText 和textContent
设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
10.2innerText 和innerHTML的区别
使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
11.元素的属性操作
11.1自定义属性
元素除了本身的属性之外可以设置自定义属性
<div id="box1" class="box_1" name1="divObj">我是盒子</div>
11.2获取元素
getAttribute("属性的名字")
getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值
console.log(in1.getAttribute("type"));//text
console.log(in1.getAttribute("name"));//user
console.log(in1.getAttribute("id"));//text1
console.log(in1.getAttribute("style"));//color: red;
11.3设置属性
setAttribute("属性的名字","属性的值");
元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性
setObj1.onclick = function () {
in1.setAttribute("name", "password");
// in1.setAttribute("class", "");
in1.className = "";
// in1.setAttribute("style", "border:5px dotted pink");
in1.style.border = "5px dotted pink";
console.log(in1.getAttribute("name"));//password
}
11.4移除属性
removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性
var removeObj = document.getElementById("remove");
removeObj.onclick = function () {
in1.removeAttribute("class");
div1.removeAttribute("name1");
}
12.元素样式设置的几种方式
- 对象.style
- 对象.className
- 对象.setAttribute("style")
- 对象.setAttribute("class")
- 对象.style.setProperty("CSS属性","CSS属性值")
- 对象.style.cssText
<body>
<div class="box1" id="box1"></div>
<input type="button" value="改变样式" id="change">
</body>
<script>
var box = document.getElementById("box1");
var changeBtn = document.getElementById("change");
changeBtn.onclick = function () {
// 1、对象.style
// box.style.backgroundColor = "red";
// 2、对象.className
// box.className = "box2";
// 3、对象.setAttribute("style")
// box.setAttribute("style", "background-color:red");
// 4、对象.setAttribute("class")
// box.setAttribute("class", "box2");
// 5、对象.style.setProperty("CSS属性","CSS属性值")
// box.style.setProperty("background-color", "red");
// 6、对象.style.cssText
box.style.cssText = "background-color: red;height:80px";
}
</script>
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
