JavaScript——DOM编程、JS的对象和JSON
一、DOM编程
DOM(Document Object Model)编程:就是使用document对象的API,完成对网页HTML文档进行动态修改,以实现网页数据,和样式动态变化效果的编程。
(一)DOM获取元素的多种方法
1.查找元素的函数
getElementById("id值") 查找到唯一一个元素
getElementsByClassName("class值") 查找指定class的元素数组
getElementsByTagName("标签名") 查找指定标签名的元素document.getElementById("myDiv").getElementsByTagName("input") 在元素内部查找指定元素
document.getElementById("myDiv").getElementsByClassName("mycls") 在元素内部查找指定元素
2.查找元素的属性
dom树中根据节点关系查找元素,注意这里的方法后面没有()
子节点:children 所有子节点(集合)firstElementChild 元素lastElementChild 元素
兄弟(同级)节点:nextElementSibling 下一个兄弟(同级)节点previousElementSibling 上一个兄弟(同级)节点
父节点:parentElement 父元素节点
代码示例:
<ul id="myUl"><li>列表1</li><li>列表1</li><li id="myli">列表1</li><li>列表1</li><li>列表1</li>
</ul>
<div>abc</div>// Prototype 原型
console.log(document.getElementById("myUl").children); //元素集合 HTMLCollection
console.log(document.getElementById("myUl").childNodes); //节点集合 NodeList 不要用
console.log(document.getElementById("myUl").getElementsByTagName("li"));console.log(document.getElementById("myUl").firstChild); //节点 如果有空白文本 会获得文本
console.log(document.getElementById("myUl").firstElementChild); //元素节点console.log(document.getElementById("myUl").lastElementChild); //元素节点console.log(document.getElementById("myli")
.nextElementSibling.nextElementSibling
.previousElementSibling.previousElementSibling
.previousElementSibling);console.log(document.getElementById("myli").parentElement.parentElement)
(二)DOM操作属性
所有的效果都是找元素 改属性
读属性:元素.属性
写属性:元素.属性 = "xxx"函数形式操作属性:
Attribute 属性
Properties 属性
读属性:getAttribute("属性名")
写属性:setAttribute("属性名","属性值")两套不完全体通用 (js语法特点)
<body><input type="text" id="myText" />
</body>
<script>document.getElementById("myText").value = "你好";document.getElementById("myText").setAttribute("val"+"ue","你不好");console.log(document.getElementById("myText").getAttribute("value")); // 你不好console.log(document.getElementById("myText").getAttribute("val"+"ue")); // 你不好
</script>
element.value:这是直接操作 DOM 对象的 value 属性。对于 <input> 元素,value 会直接影响输入框的显示内容。因此 document.getElementById("myText").value = "你好"; 会直接把输入框中显示的内容改为 "你好"。
setAttribute("value", ...):这是操作 DOM 属性,而不是直接操作 value 属性。这会更新元素的 value 属性,但并不会立即影响 <input> 的显示值。setAttribute("value", "你不好") 修改的是 HTML 属性,而 JavaScript 的 element.value 会优先显示设置过的值(即 你好)。这就是为何 console.log 会显示 "你不好",但页面上显示的是 "你好"。
(三)动态dom操作
创建元素(不会出现在dom树上,虚拟dom元素支持属性设置) | document.createElement("li") |
追加子元素(可以把元素渲染出来 挂在dom树上) | 元素.appendChild(newEle) |
在指定元素前添加 | 元素.insertBefore(newEle,指定的元素) |
复制节点 | 元素.cloneNode(true) bol值决定子节点是否赋值 默认值false |
删除元素 | 元素.removeChild(删除的节点); 通常搭配查找元素使用 |
1.动态添加元素
步骤:
- 生成出元素(虚拟dom结构 可以设置属性 页面上没有)
- 渲染(通过特定api 把元素显示到页面中的某个为止 挂载到dom树上)
添加li:
<body><input type="button" value="添加元素" onclick="addEle()" /><ul id="myUl"><li>测试li</li></ul>
</body>
<script>function addEle() {// 创建虚拟的dom结构let newEle = document.createElement("li");// 可以对生成的虚拟dom结构的属性进行操作newEle.innerHTML = "newLi";// 向dom数添加元素的动作叫做渲染// 注意:渲染必须要做,否则页面不显示新的元素document.getElementById("myUl").appendChild(newEle);// 也可以在添加新元素后设置属性// 双标签使用innerHTML进行赋值// document.getElementById("myUl").lastElementChild.innerHTML = "newLi";}
</script>
添加button:
<input type="button" value="添加元素" onclick="addEle()" />
<ul id="myUl"><li><input type="button" value="测试按钮" /></li>
</ul>function addEle() {// 创建虚拟的dom结构let newEle = document.createElement("li");/* 常规操作let newBtn = document.createElement("input");newBtn.type = "button";newBtn.value = "测试按钮";newEle.appendChild(newBtn); */// 简化dom操作// innerHTML可以解析html标签newEle.innerHTML = "<input type='button' value='测试按钮' style='font-weight: bold;'>";// 渲染document.getElementById("myUl").appendChild(newEle);
}
2.其他动态操作
<input type="button" value="添加元素" onclick="addEle()" />
<input type="button" value="指定元素位置添加" onclick="addEle2()" />
<input type="button" value="复制元素" onclick="copyEle()" />
<input type="button" value="删除元素" onclick="delEle()" />
<ul id="myUl"><li id="myLi"><input type="button" value="测试按钮" /></li>
</ul>function addEle2() {let newEle = document.createElement("li");newEle.innerHTML = "newLi...";document.getElementById("myUl").insertBefore(newEle, document.getElementById("myLi"));
}
function copyEle() {let newEle = document.getElementById("myLi").cloneNode(true);document.getElementById("myUl").appendChild(newEle);
}
function delEle() {/*// 删除头部的第一个节点document.getElementById("myUl").removeChild(document.getElementById("myLi").firstElementChild); */// 删除指定的子元素document.getElementById("myUl").removeChild(document.getElementById("myLi"));
}
3.简化dom操作
innerHTML可以解析html标签
1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成
2.删除 用原生api实现
<input type="button" value="添加元素" onclick="addEle()" />
<input type="button" value="删除元素" onclick="delEle()" />
<ul id="myUl"><li id="myLi"><input type="button" value="测试按钮" /></li>
</ul>function addEle() {let content = `<li id="myLi"><input type="button" value="新按钮" /></li>`;document.getElementById("myUl").innerHTML += content;
}
function delEle() {document.getElementById("myUl").removeChild(document.getElementById("myUl").lastElementChild);
}
4.动态table操作
JS中对table描述成⼆维数组 (行数组 和 单元格数组):
table对象.rows ⾏数组
row对象.cells 单元格数组
找到指定的单元格 可以通过⾏索引+单元格索引查找:
table对象.rows[idx].cells[idx]
动态操作table⽅法:
insertRow(idx) 添加⾏
insertCell(idx) 新增单元格(列)
deleteRow(idx) 删除列
<input type="button" value="添加一行数据" onclick="addRow()" />
<input type="button" value="添加多行数据" onclick="addRow2()" />
<input type="button" value="删除一行数据" onclick="deleteOneRow()" />
<input type="button" value="清空表格数据" onclick="clearRow()" />
<table id="myTable" border="1"><tr><th>编号</th><th>名称</th><th>住址</th></tr><tr><td>1</td><td>尼古拉斯赵四</td><td>象牙山</td></tr>
</table>
function addRow() {// insertRow 新建行 传入索引let newRow = document.getElementById("myTable").insertRow(2);// insertCell 相当于每一个td 传入索引let td1 = newRow.insertCell(0);let td2 = newRow.insertCell(1);let td3 = newRow.insertCell(2);// 编辑每一个td标签中的内容td1.innerHTML = "2";td2.innerHTML = "张三";td3.innerHTML = "北京";
}// 简化dom操作
// 批量添加的数据
let numArr = [[2, "张三", "北京"],[3, "李四", "上海"],[4, "王五", "深圳"],
];
function addRow2() {// table中都是双标签,所以可以使用innerHTML// 遍历数组添加for (let obj of numArr) {let content = ` <tr><td>${obj[0]}</td><td>${obj[1]}</td><td>${obj[2]}</td></tr>`;document.getElementById("myTable").innerHTML += content;}// 找到指定的单元格console.log(document.getElementById("myTable").rows[2].cells[2].innerHTML);
}function deleteOneRow() {document.getElementById("myTable").deleteRow(1);
}function clearRow() {let table = document.getElementById("myTable");// 获取表格的所有行let rows = document.getElementsByTagName("tr");for (let i = 1; i < rows.length; i++) {rows[i].innerHTML = "";}
}
二、JS的对象
(一)String对象
js中字符串: '' "" ``修饰的内容
js中处理字符串更多
let myStr = "abc123fnsabc";
console.log(myStr.indexOf("bc"));
console.log(myStr.indexOf("bc9")); // 对于不存在的字符串会返回-1// 判断指定字符串存在的方法
// if(myStr.lastIndexOf("bc") >= 0)
console.log(myStr.lastIndexOf("bc"));
console.log(myStr.substring(2, 4)); // c1
console.log(myStr.substr(2, 4)); // c123
// 分割字符串 根据指定的字符分割为数组
// 常用在有格式的字符串解析上
let myStr2 = "age=15;name=jack;addr=streetABC";
// ['age=15', 'name=jack', 'addr=streetABC']
console.log(myStr2.split(";")[1].split("=")[1]);
//转大写 toUpperCase
console.log(myStr.toUpperCase()); // ABC123FNSABC
//转小写 toLowerCase
console.log(myStr.toLowerCase()); // abc123fnsabc
//字符串替换
console.log(myStr.replace("123", "你好")); // abc你好fnsabc
(二)Math对象
let myNum = 10.5;
//向上取整 ceil
console.log(Math.ceil(myNum)); // 11
//向下取整(直接舍去小数点后面的数字) floor
console.log(Math.floor(myNum)); // 10
//四舍五入 round
console.log(Math.round(myNum)); // 11
//绝对值 当不知道两个数(事件)之间的大小时,使用绝对值计算两个数之间的差值
let a = 1;
let b = 3;
console.log(Math.abs(a - b)); // 2
// 随机数 random 默认[0,1)
// [0-2] +1 变成 [1-3)
console.log(parseInt(Math.random() * 3));
// Math.random() * 10
// 取整数部分的方法:parseInt 向上 1-10 向下 0-9 四舍五入 0-10(不要用,偏差大)
// 一般用向下取整,比最终要的值大1即可 例如,取[0,2] 乘以3即可
// 扩倍 移动区间
(三)Date对象
1.日期获取
// 获取当前运行的时间
console.log(new Date()); // Thu Nov 14 2024 15:15:57 GMT+0800 (中国标准时间)
// 获取指定日期的时间
// 2001-11-11 11:11:11
// 2021/12/12 12:12:12
console.log(new Date("2001-11-12 11:11:11"));
// Mon Nov 12 2001 11:11:11 GMT+0800 (中国标准时间)
console.log(new Date("2021/12/12 12:12:12"));
// Sun Dec 12 2021 12:12:12 GMT+0800 (中国标准时间)
2.日期计算
// 2.日期的毫秒数 当前日期的毫秒数
// 做日期计算
let nowDate = new Date();
console.log(new Date().getTime()); // 1731568685074
// 获取5天前的时间
console.log(nowDate.getTime() - 1000 * 60 * 60 * 24 * 5); // 1731136763045
console.log(new Date(nowDate.getTime() - 1000 * 60 * 60 * 24 * 5));
// Sat Nov 09 2024 15:18:10 GMT+0800 (中国标准时间)
3.日期显示
// 3. 根据需要 显示日期格式
// 获取年
let myYear = nowDate.getFullYear();
console.log(myYear);
//获取月 0-11
let myMonth = nowDate.getMonth() + 1;
console.log(myMonth);
//获取星期
let myDay = nowDate.getDay();
console.log(myDay);
//获取日期
let myDate = nowDate.getDate();
console.log(myDate);
//获取时
let myHours = nowDate.getHours();
console.log(myHours);
//获取分
let myMinutes = nowDate.getMinutes();
console.log(myMinutes);
//获取秒
let mySeconds = nowDate.getSeconds();
console.log(mySeconds);
let dateStr = `${myYear}年${myMonth}月${myDate}日 ${myHours}:${myMinutes}:${mySeconds} 星期${myDay}`;
console.log(dateStr);
// 2024年11月14日 15:19:45 星期4
(四)Array对象
数组表示数据的集合,在Java中:
1.指定数据类型
2.指定数组长度(不可变)
3.数组是一种底层数据结构(需要在内存中直接占用空间)
js是弱类型语言:
js数组:1.没有加泛型的list
2.不需要指明数据类型
3.长度可变
1.数组创建
let newArr = new Array();
console.log(newArr);
let newArr2 = [];
console.log(newArr2);
2.数组中的内容
let newArr3 = [1, "abc", true, new Date(), [1, 2, 3]];
console.log(newArr3);
// 实际使用时,一般把相同数据类型的数据放入一个数组
let newArr4 = [4, 1, 3, 8, 6, 2];
console.log(newArr4);
3.数组常用方法
// join():通过指定的字符串,将数组中的元素拼接为一个字符串
// join 把数组串转成字符串
// 经常与字符串的split方法对应起来 字符串 与 数组 互换
console.log(newArr4.join(";")); // 4;1;3;8;6;2
console.log(newArr4.join(";").split(";")); // ['4', '1', '3', '8', '6', '// 排序 排序规则 function(a,b){return a-b} a-b 升序 b-a降序
// 开发中一般是后端排序好传给前端
// 升序 a-b
console.log(newArr4.sort(function (a, b) {return a - b;})
); // [1, 2, 3, 4, 6, 8]
// 降序 b-a
console.log(newArr4.sort(function (a, b) {return b - a;})
); // [8, 6, 4, 3, 2, 1]// 当链表使用
/*newArr4.push("a") 队尾添加 返回值是数组的长度newArr4.pop() 队尾删除newArr4.unshift("a") 队头添加newArr4.shift() 队头删除
*/
newArr4.push("a"); // [8, 6, 4, 3, 2, 1, 'a']
console.log(newArr4);
newArr4.pop();
console.log(newArr4); // [8, 6, 4, 3, 2, 1]
newArr4.unshift("b");
console.log(newArr4); // ['b', 8, 6, 4, 3, 2, 1]
newArr4.shift();
console.log(newArr4); // [8, 6, 4, 3, 2, 1]// 删除指定索引位置的元素
// splice()动态操作数组元素方法
// splice(起始,个数,可以选参数)
// 如果没有可选参数 可以做删除
newArr4.splice(1, 2);
console.log(newArr4); // [8, 3, 2, 1]// 如果有可选参数 做替换 根据个数 与可选参数的个数 决定增加还是减少
newArr4 = [4, 1, 3, 8, 6, 2];
newArr4.splice(1, 2, "a");
console.log(newArr4); // [4, 'a', 8, 6, 2]newArr4 = [4, 1, 3, 8, 6, 2];
newArr4.splice(1, 2, "a", "b");
console.log(newArr4); // [4, 'a', 'b', 8, 6, 2]
4.数组的遍历
newArr4.forEach(function (data) {console.log(data);
});console.log(document.getElementById("btns").children);
// HTMLCollection(4) [input, input, input, input]// 获取元素集合 Prototype HTMLCollection
let eles = document.getElementById("btns").children;// Prototype不一样 Array 包含的函数和属性不同
// Array.from(eles); 方法把非Array的数组类型转成Array 就可以调用array的函数了let newEles = Array.from(eles);
console.log(newEles); // [input, input, input, input]
// 转换后 才可以用forEach遍历
newEles.forEach(function (data) {data.style.color = "red";
});/*
eles.forEach(function (data) {console.log(data);
});
// Uncaught TypeError: eles.forEach is not a function
*/
三、JSON
通过JSON可以自定义对象。
1.创建JSON对象
let myStu = { "id": 1, "name": "zhangsan", "age": 18 };
console.log(myStu);
// 获取某个属性值
console.log(myStu.name);
// 修改属性值
myStu.name = "rose";
console.log(myStu);
// 新增属性
myStu.addr = "北京";
console.log(myStu);
2.JSON数据类型
key 字符串
value 任意类型
let myObj = {name: "jack",age: 15,birthDay: new Date(),study: function () {// this 指向当前json对象console.log(this);console.log(this.name + "在学习");},
};
console.log(myObj);
// 调用JSON中的函数对象
myObj.study(); // jack在学习
3.JSON书写格式
分为标准格式(前后端传递数据)和简化格式(纯前端使用)
// 3.1 标准格式 key带引号 指明是字符串
// let myStu = { "id": 1, "name": "zhangsan", "age": 18 };
// 3.2 简化格式 key的引号 可以省略不写
// let myStu = { id: 1, name: "zhangsan", age: 18 };// 前后端数据传递 使用标准json格式
let myStu2 = '{ "id": 1, "name": "zhangsan", "age": 18 }';
// 传递给后端时,要转成JSON对象,才能获取属性
console.log(JSON.parse(myStu2).name); // zhangsan// 纯前端使用 使用简化格式
// 简化格式转为JSON对象时会失败
/* let myStuStr = '{ id: 1, name: "zhangsan", age: 18 }';
console.log(JSON.parse(myStuStr).name); */
// Uncaught SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3) at JSON.parse (<anonymous>)
4.JSON与字符串互相转换
JSON.stringify(newStu) JSON对象转标准格式字符串
JSON.parse('{"ID":1,"name":"jack2","age":18}') 标准格式字符串 转json对象
// JSON===>字符串
let myStu4 = { id: 1, name: "zhangsan", age: 18 };
console.log(JSON.stringify(myStu4));// 字符串===>JSON
// 注意:字符串转JSON时要使用标准格式
console.log(JSON.parse('{"ID":1,"name":"jack2","age":18}'));
5.JSON实际使用时,经常搭配数组使用
// 数组中套JSON
let students = [{ ID: 2, name: "jack1", age: 15 },{ ID: 2, name: "jack2", age: 15 },{ ID: 3, name: "jack3", age: 15 },
];
console.log(students[1].name); // jack2// JSON中套数组
let myClass = {className: 606,classAddr: "6楼606",students: [{ ID: 1, name: "jack1", age: 15 },{ ID: 2, name: "jack2", age: 15 },{ ID: 3, name: "jack3", age: 15 },],
};
console.log(myClass);// 遍历出每一个学生名字
myClass.students.forEach(function (data) {console.log(data.name);
});
// jack1 jack2 jack3