当前位置： 首页 > news >正文

JavaScript——DOM编程、JS的对象和JSON

news 2024/11/23 16:40:06

一、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.动态添加元素

步骤：

  1. 生成出元素(虚拟dom结构 可以设置属性 页面上没有)
  2. 渲染(通过特定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

http://www.mrgr.cn/news/74977.html

相关文章：

  • Android仿前端分页组件pagination
  • 第十六届蓝桥杯模拟赛（第一期）-c++/c
  • 【Vue】 npm install amap-js-api-loader指南
  • 数据结构及算法--排序篇
  • DAY4 网络编程（广播和多线程并发）
  • HBase Java基础操作
  • VTK知识学习（8）-坐标系统
  • 18 为什么这些SQL语句逻辑相同，性能却差异巨大？
  • Spring Data Redis常见操作总结
  • Redis使用
  • 初识Redis
  • 护照阅读器在银行应用：提升客户身份认证效率，强化金融安全防护
  • javascript-Web APLs （五）
  • 区块链智能合约开发：全面解析与实践指南
  • C#基元类型表
  • 大数据治理：从概念到实践的旅程
  • SELINUX和防火墙
  • 【MMIN】缺失模态想象网络用于不确定缺失模态的情绪识别
  • 数据库参数备份
  • 父子孙嵌套组件的生命周期
  • IntelliJ IDEA设置打开文件tab窗口多行展示
  • HTTP基础
  • 网站架构知识之nginx负载均衡（day027）
  • Upload-Labs-Linux1学习笔迹 （图文介绍）
  • 知识图谱6：neo4j查询语句
  • vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结