JS基礎知識學習（四）

時間 2019-12-07

原文原文鏈接

JS基礎知識

DOM基礎精講

DOM：document.object model 文檔對象模型，提供一些屬性和方法可讓咱們去操做DOM元素。

獲取DOM元素的方法

document.getElementById 一個元素
[context].getElementsByTagName 元素集合
[context].getElementsByClassName 元素集合
document.getElementsByName 節點集合
document.documentElement 獲取整個HTML對象
document.body 獲取整個BODY對象
document.head 獲取整個HEAD對象
[context].querySelector 一個元素對象
[context].querySelectorAll 獲取元素集合
...javascript

getElementByIdcss

此方法的上下文只能是document
一個HTML頁面中的id理論上是不能重複的html

一、若是頁面中的id重複了，咱們獲取的結果是第一個id對應的元素對象java

二、在IE7及更低版本瀏覽器中，會把表單元素的name值當作id來識別（項目中儘可能不要讓表單的name和其餘元素的id相同）node

三、若是咱們把JS放在結構的下面，咱們能夠直接使用ID值來獲取這個元素（不須要經過getElementById獲取）,並且這種方式會把頁面中全部ID是他的元素都獲取到（元素對象/元素集合）=>不規範不推薦數組
```
//=>獲取頁面中ID值爲#box1的全部元素標籤
var allList=document.getElementsByTagName("*"),
    result=[];
for(var i=0;i<allList.length;i++){
   var item=allList[i];
   item.id==="box1"?result.push(item):null;
}
console.log(result);
```
getElementByTagName瀏覽器

上下文是能夠本身指定的
獲取到的結果是一個元素的集合（類數組集合）app

一、獲取的結果是集合，哪怕集合中只有一項，咱們想要操做這一項（元素對象），須要先從集合中獲取出來，而後再操做url

二、在指定的上下文中，獲取全部子子孫孫元素中標籤名叫作這個的（後代篩選）spa
```
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
var bodyBox=document.getElementsByTagName("body");
    //bodyBox.getElementsByTagName("div");
    /*=>UNcaught TypeError:
    bodyBox.getElementsByTagName is not a function 
    此時的bodyBox是一個類數組集合，咱們須要使用的是其中的第一項
    而不是整個集合
      */
    bodyBox[0].getElementsByTagName("div");
</script>
```
getElementsByClassName

上下文能夠隨意指定
獲取的結果也是一個元素集合（類數組集合）

一、真實項目中咱們常常會經過樣式類名來獲取元素，getElementsByClassName這個方法在IE6~8瀏覽器中是不兼容的

getElementsByName

經過元素的NAME屬性值獲取一組元素（類數組：節點集合 NOdeList）
它的上下文也只能是document

一、IE瀏覽器只能識別表單元素的那麼屬性值，因此咱們這個方法通常都是用來操做表單元素的

document.documentElement/document.body

獲取HTML或者BODY（一個元素對象）
```
//=>獲取當前瀏覽器窗口可視區域的寬度（當前頁面一屏的寬度）
document.documentElement.clientWidth||document.body.clientWidth
//=>clientHeight 獲取高度
```
querySelector/querySelectorAll

在IE6~8下不兼容，並且也沒什麼特別好辦法處理它的兼容，因此這兩個方法通常多用於移動端開發使用
querySlector：獲取一個元素對象

querySlectorAll：獲取的是一個元素的集合

只要是css支持的選擇器，這裏大部分都支持

DOM的節點

node：節點，瀏覽器認爲在一個HTML頁面中全部內容都是節點（包括標籤，註釋，文字文本等）

元素節點：HTML標籤

文本節點：文字內容（高版本瀏覽器會把空格和換行也看成文本節點）

註釋節點：註釋內容

document文檔節點

...

元素節點

nodeType：1；

nodeName：大寫標籤名（在部分瀏覽器的怪異模式下，咱們寫的標籤名是小寫，它獲取的就是小寫...）

nodeValue：null

[curEle].tagName:獲取當前元素的標籤名（獲取的標籤名通常都是大寫）

文本節點

nodeType：3

nodeName：#text

nodeValue：文本內容

註釋節點

nodeType：8

nodeName：#comment

nodeValue：註釋內容

文檔節點

nodeType：9

nodeName :#document

nodeValue：null

節點是用來描述頁面中每一部分之間關係的，只要能夠獲取頁面中的一個節點，那麼就能夠經過相關的屬性和方法獲取頁面中的全部節點

childNodes

獲取當前元素全部的子節點（節點集合：類數組）
注：不只僅是元素節點，文本、註釋等都會包含在內；子節點說明只是在兒子輩分中查找；

children

獲取全部的元素子節點（元素集合）
在IE6~8下獲取的結果和標準瀏覽器中有區別（IE6~8中會把註釋節點當作元素節點獲取到）

parentNode

獲取當前元素的父節點（元素對象）

previousSibling && nextSibling

previousSibling：獲取當前節點的上一個哥哥節點（不必定是元素節點也能夠能是文本和註釋）
nextSibling：獲取當前節點的下一個弟弟節點

previousElementSibling && nextElementSibling

previousElementSibling：獲取當前節點的上一個哥哥元素節點
nextElementSibling：獲取當前節點下一個弟弟元素節點

IE6~8下不兼容

firstChild && lastChild

fristChild：當前元素全部子節點中的第一個（也不必定時元素節點，多是文本和註釋）
lastChild：當前元素全部子節點中的最後一個

fristElementChild && lastElementChild （IE6~8 兼容）

DOM的增刪改

真實項目中，咱們偶爾會在JS中動態建立一些HTML標籤，而後把其增長到頁面中

document.createElement

在JS中動態建立一個HTML標籤

appendChild

容器.appendChild(新元素)
把當前建立的新元素添加到容器的末尾位置

insertBefore

容器.insertBefore(新元素，老元素)
在當前容器中，把新建立的元素增長到老元素以前

//=>真實項目中不少需求都是經過動態建立元素來完成的，其中有一個需求:解析一個URL地址每一部分的信息（包含問號傳遞的參數值）
//->1.純字符串拆分
//->2.編寫強大的正則，捕獲到須要的結果
//->3.經過動態建立一個A標籤，利用A標籤的一些內置屬性來分別獲取每個部分的內容
//->...
/***
    var link=document.createElement("a");
    link.href="http://www.andy.com/stu/?name=andy&age=30&sex=0#teacher";//->此處地址就是咱們須要解析的URL
    //->hash:存儲了哈希值 "#teacher"
    //->hostname: 存儲的是域名 "http//www.andy.com"
    //->pathname: 存儲的是請求資源的路徑 "/stu/"
    //->protocol: 協議 "http:"
    //->search: 存儲的是問號傳遞參數值，沒有傳遞是字符串 "?name=andy&age=30&sex=0"
***/

function queryURLParameter(url){
    var link=document.createElement("a");
    link.href="url";
    var search=link.search,
        obj={};
    if(search.length===0) return;
    search=search.substr(1).split(/&|=/g);
    for(var i=0;i<search.length;i+=2){
        var key=search[1],
            value=search[i+1];
        obj[key]=value;
    }
    link=null;
    return obj;
}

removeChild

容器.removeChild(元素)
在當前容器中把某一個元素移除掉

replaceChild

容器.replaceChild(新元素，老元素)
在當前容器中，拿新元素替換老元素

cloneNode

元素.cloneNode(false/true)
把原有的元素克隆一份如出一轍的，false：只克隆當前的元素自己，true：深度克隆，把當前元素自己以及元素的全部後代都進行克隆

[set/get/remove]Attribute

給當前元素設置/獲取/移除屬性的（通常操做的都是他的自定義屬性）
box.setAttribute("myIndex",0)

box.getAttribute("myIndex")

box.removeAttribute("myIndex")

使用xxx.index和xxx.setAttribute("index",0)這兩種設置自定義屬性的區別

xxx.index：是把當前操做的元素當作一個普通對象，爲其設置一個屬性名（和頁面中的HTML標籤不要緊）

xxx.setAttribute：把元素當作特殊的元素對象來處理，設置的自定義屬性是和頁面結構中的DOM元素映射在一塊兒的

JS中獲取的元素對象，咱們能夠把它理解爲兩種角色：

與頁面HTML結構無關的普通對象
與頁面HTML結構存在映射關係的元素對象

元素對象中的內置屬性，大部分都和頁面的標籤存再映射關係：

xxx.style.backgroundColor="xxx" 此時不只把JS中對象對應的屬性值改變了，並且也會映射到頁面的HTML標籤上（標籤中有一個style行內樣式，元素的樣式改變了）

xxx.className="xxx" 此時不只是把JS對象中的屬性值改了，並且頁面中的標籤增長了class樣式類（能夠看見的）

//獲取上一個哥哥元素節點
//=>獲取當前元素的上一個節點
//=>循環判斷：當上一個節點存在，而且上一個節點類型不爲1時，持續循環，知道節點類型爲1
function prevSibling(curELe){
    var p=curEle.previousSibling;
    while(p && typeof!==1){
        p=p.perviousSibling;
    }
    return p;
}

Date日期操做基礎講解

Date 是日期類，經過他能夠對時間進行處理

var time=new Date();//獲取當前客戶端本機時間（當前獲取的時間不能做爲重要的參考依據）

//=>獲取的結果是一個日期格式的對象：Mon Jul 02 2018 14:00:14 GMT+0800 (中國標準時間)

typeof new Date()->"object"

//=>time.getFullYear()獲取四位整數年
//=>time.getMonth() 獲取月0~11, 表明1~12月
//=>time.getDate() 獲取日
//=>time.getDay() 獲取星期（0~6）表明週日~週六
//=>time.getHours() 獲取小時
//=>time.getMinutes() 獲取分鐘
//=>time.getSeconds() 獲取秒
//=>time.getMilliseconds() 獲取毫秒
//=>time.getTime() 獲取當前日期距離"1970-01-01 00:00:00"毫秒差

var time=new Date("2017-10-22");//=>當new Date中傳遞一個時間格式的字符串，至關於把這個字符串轉換爲標準的時間對象格式（轉換完成後，就能夠調取上面咱們講的那些方法了）
//=>時間格式的字符串
//"2017-10-22"(IE下識別不了)
//"2017/10/22"
//"2017/10/22 16:15:34"
//1530511656252(若是傳遞的是距離1970年的那個毫秒差，可是隻能是數字)