前端基础 – DOM&JS -数据天堂

前端基础 – DOM&JS

# 前端 2024-04-03 04:37 0 14 来源：数据天堂

1. DOM( Document Object Model 文档对象模型)

一个 web 页面的展示，是由 html 标签组合成的一个页面。dom 对象实际就是将 html 标签转换成一个文档对象。
可以通过 dom 对象中 js 提供的方法，找到 html 的各个标签。通过找到标签就可以操作标签使页面动起来。

获取标签

基本操作：

var demo = document.getElementById(‘id1‘); //定位到单个元素，因为id是唯一的var eleList = document.getElementsByClass(‘class1‘); //返回的是 list

获取子元素：

demo.children; //返回 list，取到所有的子元素demo.children[1]; //取特定位置的子元素demo.lastElementChild; //拿到最后一个子元素

获取下一个兄弟标签：

demo.nextElementSibling; //下一个demo.previousElementSibling; //上一个

获取上一级标签：demo.parentElement;

重新赋值

demo.innerText = ‘<input>‘; //将demo div 下的内容变为新内容（字符串）demo.innerHTML=‘<input>‘; //符合HTML的规则时会翻译后显示

获取输入框的值（能获取到就能重新赋值）
- demo.value;

下拉框

var select = document.getElementById(‘s1‘);select.value = ‘北京‘; //重新赋值select.selectedIndex = 2; //选中的选项为第几个（从0开始）

样式
- 定位到某个元素的类名，可以对其进行更改（定位到的都可以重新赋值来更改）
- 对元素有多个的，也可以进行增加、删除操作：
```
var clst = document.getElementById(‘clist‘);clst.classList.remove(‘demo‘);clst.classList.add(‘temp‘);
```
- 还可以通过 clst.style 获取到 css 的样式，并对其进行修改，例如：clst.style.backgroundColor=‘black‘;

创建标签1（用内置功能）

step 1:定义。

var input = document.getElementById(‘i1‘);input.setAttribute(‘type‘,‘text‘); //为创建的标签增加属性

step 2:渲染到页面。

create = document.getElementById(‘create‘);create.appendChild(input);

创建标签2（用字符串的方式）
```
var inputStr = ‘<input type="text" value="login">‘;create.insertAdjacentHTML(‘beforeEnd‘,inputStr);
```
这里的 beforeEnd（子标签后）还有另外的三种方法，分别是：beforeBegin( 标签前), afterBegin（子标签前）, afterEnd（标签后），表示插入的四个位置。
删除属性
- input.lastElementChild.removeAttribute(‘style‘); //style为属性名称
划重点的知识点：

<script> 可以在 <head> 中也可以在 <body> 中，区别是放在 body 中可以先加载页面内容再加载样式，提高用户体验。（因为 html 代码从上到下解析）

2. JS

JS 变量

es5：

1 name = ‘abc‘; //默认全局变量2 function func(){3  var name = ‘Lucy‘; //局部变量4 }

es6：
```
1 //let 定义的变量没有预解析2 let num1=1;3 const nums=2; //常量
```
预解析是指，在只定义无声明的情况下，变量的默认值为 undefined。没有预解析则代表，只定义无值。

JS 基本数据类型
- 字符串（str = ‘Today is a nice day‘）
  - 拼接
```
//有两种//1.直接拼接str+‘,开心‘;//2.使用方法str.concat(‘啦啦啦‘);
```
  - 根据角标取值：str.charAt(0); 结果：T
  - 切片
```
str.substring(0,3);str.slice(0,3);
```
    切片都是顾头不顾尾，以上结果为“Tod”
  - 长度：str.length
  - 元素的角标位置：str.indexOf(‘H‘);　　//要查找的元素存在则返回其下标，不存在则返回-1
  - 变更大小写
```
str.toLowerCase(); //小写str.toUpperCase(); //大写
```
  - 转为数组
```
str.split(‘,‘2); //表示以逗号分割，返回的结果保留前2个
```
    用法与 python 相同，不过 js 可以规定返回的个数。
- 数字类型（JS 只有一种数字类型，数字可以带小数点）
  - 字符串转数字
```
var num="18.8";parseInt(num); //18parseFloat(num); //18.8
```
  - 数字转字符串
```
1 num.toString();2 //也可以用拼接的方式3 num+‘‘; //字符串拼接的方法可以使数字变为字符串
```
- 布尔类型：true 和 false，都是小写
- 数组
  - 创建
```
alist = new Array(1,2,3,4);blist = [1,2,3,4,5];
```
    以上两种方式都可以。
  - 长度：list.length
  - 增：list.push(5); 在末尾增加
  - 删：list.pop();　获取尾部元素并删除
  - 特殊的增和删：
```
list.shift(); //拿到第一个元素并删除list.unshift(1); //头部插入
```
  - 增删改一体的方法
```
var str=[‘a‘,‘b‘,‘c‘];//第一个代表起始位置，第二个代表删除个数，第三个代表增加的元素str.splic(1,0,‘a1‘); //增str.splic(1,1); //‘b‘被删除str.splic(1,1,‘000‘); //改
```
  - 切片：str.slice(1,2)
  - 反转：str.reverse()
  - 转字符串：str.join(‘-‘);　　//将数组以该符号连接成字符串；
  - 数组拼接：str.concat([‘abc‘]);　　//如果数组直接相加会变为字符串；
  - 重要方法：数组与字符串的相互转化
    - ```
    list = [“April”,“May”,“June”];//数组转字符串var strList = JSON.stringify(list);//字符串转数组jsonList = JSON.parse(strList);
```
- 对象（字典）
```
var dict={"name":"april","sex":"female","age":18};
//查dict[‘name‘];dict.name;
//删delete dict[‘name‘];
```

JS 语法

事件

1 <input type="text" id="input-test" onclick="test()">2 3 <script>4 function test(){5  console.log(123);6  }7 </script>

点击触发 test() 函数

条件判断

“==”只判断值是否相等，“===”判断值和类型是否都相等
与：&&
或：||

//if条件判断var a="123";var b=123;if (a==b){ alert(‘=‘);}else{ alert(‘!‘);}

 1 //switch 2 switch(a){ 3  case ‘a‘:  4  console.log(‘a‘); 5  break; 6  case ‘123‘:  7  console.log(‘123‘); 8  break; 9  default:10  console.log(‘default‘);11 }

??记得加 break，default 不用加。

for 循环
- 数组、字符串循环的是角标，字典循环的是key，??这里只能通过 dict[key] 取值
- ```
1 list = ["April","May","June"]2 for(var i=0; i<list.length; i++){3  console.log(i);4  console.log(list[i]);5 }
```
  以上实现的是循环打印数组的角标和对应内容。
while 循环

匿名函数

1 <input type="button" id="test-button">2 3 <script>4 var element = document.getElementById(‘test-button‘);5  element.onclick = function(){6  console.log(‘匿名函数‘);7  }8 </script>

这种方式的好处是可以不那么明显的将方法直接写在标签内，减少代码的安全隐患。

函数（作用域：函数内）：不另举例，以上“事件”中的 test() 即为函数的例子。

ajax 异步请求（来自 jquery）

jquery 相当于对 dom 的简单封装，让 dom 变得更加简单
$ 为使用 jquery 的开始

1 $.ajax{ //向后端发送请求2  method:‘post‘,3  url:‘https://www.baidu.com‘,4  data:data, //此处省略，具体看接口的要求5  success: function(data){6  console.log(data); //data 为接口成功后的返回7  }8 }