JavaScript - WebAPI - 元素属性操作及注册事件
01 - 获取页面元素
- 思考 ： css语言如何获取页面元素？
- 通过选择器
- id选择器 :
#id名 - 类选择器:
.类名 - 标签选择器:
标签名 - 子代选择器:
ul>li - 后代选择器:
ul li
- id选择器 :
- 通过选择器
- js语言如何获取元素页面元素？
- 也是通过选择器
| 语法 | 示例 | 描述 | 返回值 |
|---|---|---|---|
| querySelector() | document.querySelector(‘选择器’) | 根据选择器获取满足条件第一个元素 | DOM对象 null |
| querySelectorAll() | document.querySelectorAll(‘选择器’) | 根据选择器获取满足条件所有元素 | 伪数组 |
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>获取元素 - 单个title>head><body><div class="box1" id="first">东汉div><span>末年span><br /><a href="#" id="box3">闹鸡瘟a><ul><li>嘿嘿li><li>哈哈li><li class="current">呵呵li>ul>body><script>// 操作元素的前提:拿到元素//1. 最常见的选择器:类选择器 .类名let box1 = document.querySelector(".box1");console.log(box1);// 2.标签选择器: 标签名let box2 = document.querySelector("span");console.log(box2);// 3.id选择器: #id名let box3 = document.querySelector("#box3");console.log(box3);// 4.子代: 父 > 子let li1 = document.querySelector("ul>li");console.log(li1);// 5. 后代:父 子let lis = document.querySelector("ul .current");console.log(lis);// 如果一个要获取的选择器: 找不到元素会如何?let img = document.querySelector("img");console.log(img);// 元素拿不到: null// 总结// 获取元素: 根据选择器 获取// document.querySelector(): 特点是获取1个元素(第一个)script>
html>DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>元素操作 - 多个title>head><body><ul><li>🎃1li><li>🎃2li><li>🎃3li><li>🎃4li><li>🎃5li><li>🎃6li><li>🎃7li><li>🎃8li><li>🎃9li><li>🎃10li>ul>body><script>// 获取多个:document.querySelectAll('选择器') 获取多个let lis = document.querySelectorAll("ul li");console.log(lis);// document.querySelectAll('选择器') 拿到的一定是一个数组 :NodeList对象// 伪数组:拿到之后只有一个作用 : 遍历lis.forEach(function (li, index) {console.log(li, index);});// 如果获取不到,一定是伪数组:空数组const divs = document.querySelectorAll("div");console.log(divs);// 总结// 获取元素: 主要使用 document.querySelector('选择器') 获取一个// 批量获取: document.querySelectorAll('选择器')// 区别: querySelector() 永远是第一个, querySelectorAll()是所有// querySelector()拿不到是null, querySelectorAll()永远是数组// querySelector()拿到的是元素,可以直接用; querySelectorAll()拿到的是数组: 必须遍历script>
html>02 - 操作元素属性
| 语法（普通元素） | 示例 | 描述 |
|---|---|---|
| 元素.style.样式属性 | box.style.width | 获取元素css样式属性 |
| className | box.className | 获取元素类名 |
| innerText | box.innerText | 获取元素的文本 |
| src | img.src | 获取元素(图片img)的路径 |
| href | a.href | 获取元素（a标签）的超链接 |
| 语法（表单元素） | 示例 | 描述 |
|---|---|---|
| value | input.value | 获取表单元素(单标签)的文本 |
| disabled | input.disabled | 是否禁用（布尔类型） |
| checked | input.checked | 是否选中(布尔类型),radio单选框 checkbox多选框 |
| selected | select.selected | 是否选中(布尔类型),select下拉选择框 |
1.1- 元素属性操作
-
1.语法：
元素.属性名(其实就是对象的取值赋值语法)- 设置元素属性的值:
元素.属性名 = 属性值
- 设置元素属性的值:
-
2.特点：
-
1.class在js中是一个关键字，如果要拿到类名需要使用className
-
2.只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值
-
3.一定是一个字符串，例如：
div.style.height得到150px 得到的是一个带单位的字符串 -
4.如果css样式的属性有
-
-
-
例如
background-color,margin-top,使用js获取和设置这些属性的时候需要使用驼峰命名(因为-符号不符合js的命名规范) -
例如:
div.style.backgroundColor -
3.注意点：修改类名需要注意会覆盖掉原本的类样式，所以一般我们不会直接修改类名，而是在原先类名的基础上加 一个类，这里需要注意多个类名之间的空格
- 例如：
div.className += " two";//字符串拼接添加类型，注意多个类名之间的空格
- 例如：
1.2-普通元素常用属性
| 语法 | 作用 |
|---|---|
| 元素.id | 获取id |
| 元素.className | 获取类名 |
| 元素.innerText | 获取文本 |
| 元素.href | 获取链接（常用于a标签） |
| 元素.src | 获取路径(常用于img标签) |
| 元素.style | 获取css样式对象(获取的是一个对象类型，包含所有css熟悉) |
| 元素.style.backgroundColor | 获取css样式的颜色 （带-的css样式，需要使用驼峰命名来获取） |
翠花:" 上代码 ! "
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性操作 - 基本属性title>head><body><div class="box" id="box">我是你大爷div><a href="http://www.baidu.com">百度a><img class="a b c" src="./images/01.gif" alt="" />body><script>// 选择器使用规则: id > 类 > 标签// 操作元素:先拿到元素const div = document.querySelector("#box");// console.log(div);const a = document.querySelector("a");const img = document.querySelector("img");// ✅ 1.id操作(一般不用)console.log(box.id, box["id"]); // 获取// box.id = xiaomage; //修改:不影响前面的代码console.log(div);// ✅ 2.类:class,js中class是一个关键字(有特殊使用),所以js修改了属性名字:通过 className 操作console.log(box.class); // undefinedconsole.log(box.className); // box// div.className = 'current' //修改类名,样式会被重新渲染// 添加类:元素.className +='类名' , // 为了不结合其他类名,应该在前面添加一个空格,与前面的类隔开div.className += " current";// 实际开发不推荐使用className:涉及到多个类的时候,很麻烦// img.className = "a c"; //肉眼编程// 💥 实际开发:使用classList(使用非常多)console.log(img.classList);// classList 是一个对象:提供了两个API// add(类名):添加类名// remove(类名):删除类名// 删除操作:元素.classList.remove(类名)img.classList.remove("b");// 添加操作:元素.classList.add(类名)img.classList.add("current");// ✅ 3.双标签之间的文本操作:innerTextconsole.log(div.innerText);div.innerText = "我不是你大爷";// 拼接:+=div.innerText += ",你大爷还是你大爷😏";// 单标签:无效console.log(img.innerText);img.innerText = "滚";// ✅ 4.href属性console.log(a.href);a.href = "http://www.qq.com";// ✅ 5.src属性console.log(img.src); // 拿到的是完整路径(会自动拼接)img.src = "images/02.png";img.id = "xiaoma"; 总结// 基本属性: 可以增\改\查, 实际开始主要是: 查和改// 基本属性的操作: 元素.属性名 获取 元素.属性名 = 值 (修改||新增)// 类操作: 属性名为className, 单一类名操作很好; 多个就很麻烦// 多个类: 建议使用 元素.classList.add() || remove()script>
html>DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性操作 - 样式属性title><style>.box {width: 200px;background-color: rgb(12, 232, 248);}style>head><body><div class="box">你不要过来啊~div>body><script>// 样式属性:实际开发中使用最多(具体样式 和 类名)// 1.获取元素const box = document.querySelector(".box");// 2.样式获取:style属性console.log(box.style); // 拿到的是所有的标准样式. 🔔但是:只有行内的值可以拿到// 3.获取具体样式:元素.style.具体样式. 具体样式是小驼峰console.log(box.style.height); // 空console.log(box.style.width); //空 : 只能获取行内样式,行外获取不到// 4.设置样式,修改样式: 元素.style.具体样式 = '值'box.style.height = "100px";script>
html>1.3-表单元素常用属性
| 语法 | 作用 |
|---|---|
| 元素.value | 获取文本 |
| 元素.disabled | 获取禁用状态 （布尔类型） |
| 元素.checked | 获取选中状态（用于radio/checkbox） |
| 元素.selected | 获取选中状态(用于option) |
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性操作 - 表单属性title>head><body>用户名:<input type="text" name="username" id="un" /><br />性别: <input type="radio" name="gender" id="male" />男 <input type="radio" name="gender" id="female" />女<br />爱好: <input type="checkbox" name="hobby" checked />篮球 <input type="checkbox" name="hobby" />足球 <input type="checkbox" name="hobby" />羽毛球 <input type="checkbox" name="hobby" />乒乓球body><script>//表单属性:value值 checked选中,disabled禁用const un = document.querySelector("#un");const male = document.querySelector("#male");const female = document.querySelector("#female");console.log(un, male, female);// 属性选择器 : [属性名 = 值]const hobby = document.querySelectorAll('[name="hobby"]');console.log(hobby);// ✅ 1.value:输入框的值(所有表单都有value值)console.log(un.value);un.value = "我被修改了";// ✅ 2. disabled: 控制是否可以被用户操作// true: 禁用// false: 可用console.log(male.disabled, female.disabled);male.disabled = true;// ✅ 3. checked: 选中console.log(male.checked);male.checked = true;female.checked = true;// ✅ 4. 让所有的爱好都被选中: hobby是一个数组, 所有的属性操作都是元素的, 数组是js的,里面包含的是元素: 必须要遍历取出元素, 然后给元素操作hobby.forEach(function (item) {console.log(item.checked);item.checked = true;});script>
html>03 - 事件介绍及注册事件
- 1.事件：js处理用户交互的一种机制
- 交互：什么元素在什么时刻做什么事
- 2.事件的三要素：组成事件的三要素
- 事件源：什么元素（div p）
- 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
- 事件处理函数：做什么事（一段代码：函数）
- 3.注册事件:本质是给元素属性赋值
事件源.事件类型 = 事件处理函数box.onclick = function(){}
- 4.事件工作原理
a.事件在注册的时候，不会执行（函数在声明的时候不会执行）b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
- 5.页面中
任何元素都可以注册 很多个事件(点击，移入等)
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件 - 基本操作title>head><body><div class="box">我是小区保安div>body><script>// 事件:交互的(用户参与)// 事件有三要素:事件源.事件类型 = 事件处理函数// 元素.属性 = 值// 做事件的单个步骤:// 1.获取事件源// 2.确定事件类型:用户该如何触发// 3.事件处理:function(){}匿名函数const box = document.querySelector(".box");console.log(box);// on注册事件,所有的事件前面都有一个on// 点击事件:click// 鼠标移入:mouseover// 鼠标移除:mouseoutbox.onclick = function () {console.log("我进来啦");// 所有效果:卸载事件处理的函数内部// 函数内部必有一个内部对象:this(谁调用指向谁)// 各种效果this.style.width = "200px";this.style.backgroundColor = "#6cf";};// 一个元素可以注册多个事件box.onmouseover = function () {this.style.height = "200px";};box.onmouseout = function () {this.style.borderRadius = "50%";};script>
html>04-获取元素语法补充
重点掌握选择器获取,其他仅做了解
| 语法 | 示例 | 描述 |
|---|---|---|
| getElementById() | document.getElementById(‘box’) | 根据id获取元素 |
| getElementsByTagName() | document.getElementsByTagName(‘li’) | 根据标签名获取元素 |
| getElementsByClassName() | document.getElementsByClassName(‘one’) | 根据类名获取元素 |
| getElementsByName() | document.getElementsByName(‘sex’) | 根据name属性值获取表单元素 |
| querySelector() | document.querySelector(‘选择器’) | 根据选择器获取满足条件第一个元素 |
| querySelectorAll() | document.querySelectorAll(‘选择器’) | 根据选择器获取满足条件所有元素 |
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle>head><body><div id="box">我是物业张三div><input class="item" type="text" name="username" /><input class="item" type="radio" name="gender" />男 <input class="item" type="radio" name="gender" />女body><script>// 1. id属性的值: 可以直接代表这个元素// 2. getElementById() : 通过Id值获取元素let box = document.getElementById("box");console.log(box);// 3. getElementsByTagName() : 通过标签名获取所有元素let input = document.getElementsByTagName("div");let input1 = document.getElementsByTagName("div")[0];console.log(input, input1);// 4. getElementsByClassName() : 通过类名获取元素(多个)let in1 = document.getElementsByClassName("item");let in2 = document.getElementsByClassName("item")[0];let in3 = document.getElementsByClassName("item")[1];let in4 = document.getElementsByClassName("item")[2];console.log(in1);console.log(in2, in3, in4);// 5. getElementsByName() : 通过name属性的值获取表单元素(多个)let name = document.getElementsByName("gender");let name1 = document.getElementsByName("gender")[0];let name2 = document.getElementsByName("gender")[1];console.log(name);console.log(name1, name2);script>
html>
1.1-innerText与innerHTML
- 作用完全不同（只是有些类似）
- 类似点：获取到的都是string类型字符串
- innerText:获取元素文本
- innerHTML:获取元素内容（文本+标签）
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>获取元素补充 - innerText 和 innerHTML 的区别title>head><body><div class="box"><a href="#">小区保安a>业主小丹div>body><script>// innerText:双标签文本(文字)// innerHTML:双标签内容(所有)const box = document.querySelector(".box");// 获取console.log(box.innerText); // 拿到所有文字:不论子代还是后代console.log(box.innerHTML); // 拿到所有内容// 赋值:innerText全是文本,innerHTML会解析html结构let str = `张三`;box.innerText = str; // 当成文本输出box.innerHTML = str; // span当成标签解析了console.log(box.innerText);console.log(box.innerHTML);// 总结// 如何选择? 纯文本,两个都可以; 带标签,一定是innerHTML(innerText效率高)// 从今以后: document.write()再也不要使用: innerHTML可以完全代替,而且更好script>
html>05-attribute语法学习
1.1-attribute操作自定义属性语法
- 标签元素属性:
- （1）行内标准属性：input.id（针对行内）
- （2）行内自定义属性：开发追加的，html自己不能使用
- （3）js动态添加属性：可以是行内属性（系统自带的），或者自定义属性
- （4）行外属性
- 1.attribute方式
- 1.获取属性：元素.getAttribute ( “id” ) ==== 行内属性（元素.id）
- 如果是类型直接使用class，无需使用className，因为这种方式用的是字符串语法获取属性
- 2.设置属性：元素.setAttribute(‘属性名’,属性值); ==== 元素.id = 值
- 3.删除属性：元素.removeAttribute(‘属性名’); ==== delete 元素.id
- 用attribute方式设置的属性只能使用attribute方式来获取
- 1.获取属性：元素.getAttribute ( “id” ) ==== 行内属性（元素.id）
- 2.注意点
- js点语法能获取到的属性：
- （1）行内标准属性
- （2）js点语法动态添加的自定义属性
- 不能获取到的属性：
- （1）行内自定义属性
- (2)行外属性
- getAttribute能获取到的属性：
- （1）行内标准属性
- （2）行内自定义属性
- （3）setAttribute动态添加的属性
- 不能获取到的属性：
- （1）js点语法动态添加的自定义属性
- （2）行外属性
- js点语法能获取到的属性：
3.总结：js点语法操作属性与attribute语法操作属性场景(语义不同)- 标准属性操作：使用js点语法（代码简洁）
- 自定义属性操作：用attribute（易读性更高）
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性补充 attribute系列 - 自定义属性.htmltitle><style>.box {width: 200px;height: 200px;background-color: #6cf;}style>head><body><div class="box" data-index="1">我是一名保安div>body><script>// 非标准属性特点:标准语法无法操作 元素.属性名 无效const box = document.querySelector(".box");// 标准属性:点语法 类名classNameconsole.log(box.className);// 非标准属性 : 不行// console.log(box.data-index); // 语法错误: - 当成建好,index当成变量console.log(box["data-index"]); // undefined : 找不到这个属性// 解决方案: attributes系列// 1. 获取属性值: getAttribute('名字')// 2. 设置属性值: setAttribute('名字','值')// 3. 删除属性: removeAttribute('名字')// 获取console.log(box.getAttribute("data-index")); // 1// 设置box.setAttribute("data-index-color", "green"); // 成功:页面可见// 删除box.removeAttribute("data-index"); // 成功,页面可见// 拓展一下:attributes系列是用来操作非标准自定义属性的,但是这个可以操作任意属性console.log(box.getAttribute("class")); // 走路去北京(性能很低)// 标准的操作(点语法) 比 非标准操作(attributes系列) 性能高而且稳定// 非标准属性 : 用来存储数据的script>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！