前端基礎 - 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 }