自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-11-15 21:36 javascript  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.动态添加元素

步骤：

  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

原文地址：https://blog.csdn.net/Helen_1997_1997/article/details/143755545

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024