1.获取页面元素
- css语言如何获取页面元素？
- 通过选择器
- id选择器 : #id名
- 类选择器: .类名
- 标签选择器:标签名
- 子代选择器:ul>li
- 后代选择器:ul li
- js语言如何获取元素页面元素？
- 也是通过选择器
代码部分
首先写出一组ul li 然后通过document.querySelector获取
输出结果
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 样式匹配元素 */ /* ID选择器 */ #box { width: 500px; } /* 类选择器 */ .box { background-color: green; } /* 标签选择器 */ div { border-radius: 20%; } /* 子代选择器 */ #box>img { width: 200px; } #box img { height: 250px; } </style> </head> <body> <div class="box" id="box"> <ul> <li>海海1</li> <li>海海2</li> <li>海海3</li> </ul> </div> <script> // 获取页面元素：JS也是通过选择器来获取页面元素 // 获取元素必须先找到DOM树：DOM的顶级对象 document /* 根据选择器获取元素 获取1个：document.querySelector('选择器') 获取多个：document.querySelectorAll('选择器')，是一个伪数组 */ // 获取1个：document.querySelector('选择器') let one = document.querySelector('#box') console.log(one);//输出成功 // 获取多个：document.querySelectorAll('选择器')，是一个伪数组 // let exclusive= document.querySelector('li') // console.log(exclusive);//单选获取一个 获取第一个 // let multiple= document.querySelectorAll('li');//多选 // console.log(multiple); // // 遍历伪数组li // duoxuan.forEach(function (item) { // // console.log(item); // }); </script> </body> </html>
2.操作元素属性
2-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";//字符串拼接添加类型，注意多个类名之间的空格
2-2.普通元素常用属性
2-3.表单元素常用属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="" method="get"> 用户名：<input type="text" name="username" id="un" value="你好呀"> 密码：<input type="password" name="password" id="pwd"> 男：<input type="radio" name="gender"> 女：<input type="radio" name="gender"> 篮球：<input type="checkbox" name="hobby"> 足球：<input type="checkbox" name="hobby"> 羽毛球：<input type="checkbox" name="hobby"> 乒乓球：<input type="checkbox" name="hobby"> </form> <script> //获取元素 let username = document.querySelector('#un'); console.log(username); let password = document.querySelector('#pwd'); console.log(password); // 获取类型：type console.log(username.type); password.value = '1234' console.log(password.value); // 输入框和密码框都有值：value console.log(username.value); console.log(password.value); // 1. 控制输入框的可操作：disabled 不让操作（禁用）:true（不可用）和false（可用） // 布尔类型只有js能用：HTML和css都不可用 username.disabled = true //禁用 password.disabled = true //禁用 let hobby = document.querySelectorAll('[name="hobby"]') hobby.forEach(function (item) { // console.log(item); // 2. 控制单选框或者多选框的选中状态：checked 属性 true表示选中，false表示不选中 item.checkd = true }) </script> </body> </html>
2-4.元素属性操作注意点
注意点总结
1. 只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值
2.获取的数据都是string字符串，带单位
3.既可以获取，也可以修改 （修改没有行内行外限制，可以修改任何属性）
小案例：开关灯
需求：点击按钮：如果按钮是 关灯 将页面的背景色变黑，将开关变成 开灯；相反反着做即可
效果图
初始效果
点击效果 （颜色 #000）
思路分析：
/* 思路分析 1. 事件源：按钮 querySelector('button') 2. 事件类型：点击事件 onclick 3. 事件处理 3.1 获取按钮的值：innerText 3.2 获取body元素：querySelector('body') || document.body 3.3 判定按钮的值 * 关灯：背景色变黑，按钮的值变 开灯 * 开灯：背景色变亮，按钮的值变 关灯 */
好了，以上就是WebApi入门第二章（获取操作页面元素）的全部内容了 明天见 祝各位七夕快乐哈 开关灯案例的完整代码将在下一章的最后公布
