前端基础 - DOM&JS

时间 2019-11-29

标签前端基础 dom&js dom 栏目 HTML 繁體版

原文原文链接

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

一个 web 页面的展现，是由 html 标签组合成的一个页面。dom 对象实际就是将 html 标签转换成一个文档对象。html

能够经过 dom 对象中 js 提供的方法，找到 html 的各个标签。经过找到标签就能够操做标签使页面动起来。python

获取标签

基本操做：

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（标签后），表示插入的四个位置。jquery
删除属性
- input.lastElementChild.removeAttribute('style'); //style为属性名称
划重点的知识点：

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

2. JSes6

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。没有预解析则表明，只定义无值。web

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”ajax
  - 长度：str.length
  - 元素的角标位置：str.indexOf('H');　　//要查找的元素存在则返回其下标，不存在则返回-1
  - 变动大小写
```
str.toLowerCase();    //小写
str.toUpperCase();    //大写
```
  - 转为数组
```
str.split(','2);    //表示以逗号分割，返回的结果保留前2个
```
    用法与 python 相同，不过 js 能够规定返回的个数。json
- 数字类型（JS 只有一种数字类型，数字能够带小数点）
  - 字符串转数字
```
var num="18.8";
parseInt(num);    //18
parseFloat(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']);　　//若是数组直接相加会变为字符串；
  - 重要方法：数组与字符串的相互转化（应该注意的是：JSON.stringify() 和 JSON.parse() 这两个方法不仅适用于数组与字符串的转换，适用于字符串和 JS 对象、数组等的转换）
    - 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 }

success:function(){} 是对请求结果的处理，能够根据实际状况具体判断。