js 浏览器中JS、’类’数组、获取DOM操作、表单元素获取、遍历dom树
浏览器中JS
js使用场景 : 1.传统:浏览器 2.扩展:服务器(Node.js 不涉及DOM)
// 1. 预定义属性,id,class,style<button id="a" class="b" style="color: red">Btn1</button>// 2. 自定义属性, data-xxxx<button data-text="第二个按钮">Btn2</button>// 3. 预定义的事件属性: on+事件名称, 事件属性的值是JS代码<button onclick="document.body.style.background='yellow'">Btn3</button>// 写到事件属性中的js代码,仅限于对当前目标有效,这叫: 内联脚本/行内脚本<button onclick="setBgc(this)">设置背景色</button>
‘类’数组
const Demo = {0 : '冰箱',1 : '彩电',2 : '洗衣机',length:3,};console.log(Demo);console.log(Demo[0],Demo[1],Demo[2]);
特征
- 类数组,就是一个对象,属性是从0开始递增的正整数,有一个length属性
- 类数组与真数组访问方式一样
获取DOM操作(Document Object Mode)
获取模型
- 拿到一个 : queerySelector(), 返回一个dom对象
- 拿到一组 : querySelectorAll(), 类数组
1.一组元素(NodeList) : querySelectorAll(css-selector)
参数 : css选择器
const items = document.querySelectorAll('.list > .item');console.log(items);// NodeList: 节点列表对象console.log(items.keys());// Array Iterator {} 只要有这个特征就可以用for-of来遍历for(let key of items.keys()) console.log(key);for(let value of items.values()) console.log(value);// 遍历键值对for(let ent of items.entries()) console.log(ent);// forEach 代替for-of// *************************************************// forEach(回调函数)// function (当前正在遍历的值, 当前值的索引/键名) {// 第二参数(当前值的索引/键名), 是可选的,通常不传// }items.forEach((value,key) => {console.log(key,value);});items.forEach(v =>v.style.background = 'red');
2.一个元素 : queerySelector(css-selector)
其实是返回’类数组’中的第一个元素,本质上仍然是在一个集合中查询
const items = document.querySelectorAll('.list > .item:first-of-type');console.log(items[0]); //返回依然是一个数组items[0].style.background = 'green';// 快速获取某个集合中的第一个元素,用于获取唯一元素const first = document.querySelector('.list > .item');console.log(first);
3.快捷方式
console.log(document.body);document.body.style.background='green';console.log(document.head);console.log(document.title);
表单元素获取
<!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>Document</title><link rel="stylesheet" href="css/demo4.css" /></head><body><form action="login.php" method="post" id="login"><fieldset class="login"><legend>用户登录</legend><label for="email">邮箱:</label><input type="email" name="email" id="email" value="admin@php.cn" autofocus /><label for="password">密码:</label><input type="password" name="password" id="password" value="123456" /><button>提交</button></fieldset></form><script>// 将页面所有的form表单作为数组返回console.log(document.forms[0]);console.log(document.forms.login);console.log(document.forms.login.email.value);</script></body></html>
json
// 前后端分离,前端发送json到服务器// JSON : js对象的序列化/字符串// 获取表单中的数据let email = document.forms.login.email.value;let password = document.forms.login.password.value;// 转为js对象let user = {email,password}let json = JSON.stringify(user);console.log(json);
遍历dom树
节点类型
- window 全局对象
- document 文档对象,就是当前的html文档
- element 元素对象,
<ul><li> - text 文本对象
<!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>Document</title><link rel="stylesheet" href="css/demo4.css" /></head><body><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li></ul><script>let ul = document.querySelector('.list');// 获取ul下元素的节点类型(包括文本,空格,换行)console.log(ul.childNodes);// 只获取元素节点console.log(ul.children); //类数组// 将类数组转为真数组// 1.Array包装console.log(Array.from(ul.children));// 2. [...rest]console.log([...ul.children]);</script></body></html>
子元素
// 获取第一个元素// [...ul.children][0] == ul.firstElementChildul.firstElementChild.style.color='red';// 最后一个// [...ul.children][ul.children.length-1].style.color = 'red';ul.lastElementChild.style.color = 'blue';
兄弟元素
// 后一个ul.firstElementChild.nextElementSibling.style.color='green';// 前一个ul.lastElementChild.previousElementSibling.style.color = 'pink';
父元素
// 父节点 : 一定是元素节点或文档节点ul.firstElementChild.parentElement.style.background = '#333';
