JS進階 - JS 、JS-Web-API與DOM、BOM

Developer 發布于2019-08-22 17:23 / 1017人閱讀

摘要：與常說的瀏覽器執行的有兩部分基礎語法標準規定基礎語法，包括類型變量原型作用域異步標準定義用于瀏覽器中操作頁面的和全局變量，規定瀏覽器讓開發者做的事情，沒有規定相關基礎語法瀏覽器運行既要遵循標準又要遵循標準知識補充內置全局函數和對象全

1.JS 與 JS-Web-API

常說的JS（瀏覽器執行的JS）有兩部分：

(1) JS基礎語法：ECMA 262 標準（規定基礎語法，包括類型變量、原型、作用域、異步）
(2) JS-Web-API：W3C 標準 （定義用于瀏覽器中JS操作頁面的API和全局變量，規定瀏覽器讓開發者做的事情， W3C 沒有規定JS相關基礎語法）

瀏覽器運行JS既要遵循 ECMA 262 標準 又要遵循 W3C 標準

知識補充：

JS內置全局函數和對象：
全局對象：window，document等 
全局變量：所有未定義可以直接用的全局變量，例：navigator（var ua = navigator.userAgent 獲取瀏覽器特性）

2.DOM（文檔對象模型 Document Object Model）

XML：可擴展的描述語言，描述結構化數據（標簽名自定義，數據結構是樹）
HTML：XML的特殊類型（HTML代碼就是一個字符串）

DOM的基本數據結構：樹
DOM的本質：瀏覽器把拿到的HTML代碼結構化成瀏覽器可識別，JS可識別可操作的模型

DOM節點操作：

(1) 獲取DOM節點:

    var div1 = document.getElementById("div1") //獲得元素
    var divList = document.getElementsByTagName("div") //獲得集合（JS對象）
    console.log(divList[0])
    var containerList = document.getElementByClassName(".container") //獲取集合
    var pList = document.querySelectorAll("p") // 獲取集合

(2) prototype JS對象屬性獲取與修改:

    var pList = document.querrySelectorAll("p")
    var p = PList[0]
    cosnole.log(p.style.width) // 獲取樣式
    p.style.width = "100px" //修改樣式
    console.log(p.className) //獲取className
    p.className = "p1" //修改className

(3）Attribute HTML文檔標簽屬性獲取與修改:

    var pList = document.querySelectorAll("p")
    var p = pList[0]
    p.getAttribute("data-name")
    p.setAttribute("dataname","immoc")
    p.getAttribute("style")
    p.setAttribute("style","font-size:30px")

DOM結構操作：

(1) 新增節點:

    var div1 = document.getElementById("div1")
    
    方法1 - 添加新節點：
    var p1 = document.creatElement("p")
    p1.innerHTML = "this is p1"
    div1.appendChild(p1) //添加新創建的元素
    
    方法2 - 移動已有節點（原先位置不再存在該節點）：
    var p2 = document.getElementById("p2")
    div1.appendChild(p2)
    
(2) 獲取父元素：
 
    var div1 = document.getElementById("div1")
    var parent = div1.parentElement //元素
    
(3) 獲取子元素節點：
 
    var div1 = document.getElementById("div1")
    var child = div1.childNodes //獲取集合（childNodes包括空文本 text）
    console.log(div1.childNodes[1].nodeName) // #P
    console.log(div1.childNodes[1].nodeType) // 1 (一般類型為1，text為3)
    
(4) 刪除節點
    var div1 = document.getElementById("div1")
    var child = div1.childNodes
    div1.removeChild(child[0])

3.BOM（瀏覽器對象模型 Browser Object Model）

1.檢測瀏覽器類型：

var ua = navigator.userAgent //獲取瀏覽器類型
var isChrome = ua.indexOf("Chrome")
console.log(isChrome)

2.解析url的各部分

location:

console.log(location.href) //整個路徑(location.href = ""  //改變路徑地址,在控制臺直接改寫可以直接訪問該網址)
console.log(location.host) //:主機名
console.log(location.protocol) //協議http: , https:
console.log(location.pathname) //路徑"/learn/199"
console.log(location.search) // ？之后的參數（多個參數&相連）
console.log(location.hash) // #哈希值

知識補充：

screen 屏幕：
console.log(screen.width)
console.log(screen.height)

history 歷史：
history.back()//返回
history.forward()//前進

云服務器 GPU云服務器 js進階視頻教程 js dom監聽 js dom交換 js dom樣式修改

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95128.html

【JS基礎】DOM，BOM，事件綁定，ajax，跨域，存儲

摘要：常說的瀏覽器執行的包含兩部分基礎知識標準標準的內容包括事件綁定請求包括協議存儲標準沒有規定任何基礎相關的東西。如果未經允許即可獲取，那是瀏覽器同源策略出現了漏洞。常說的JS（瀏覽器執行的JS）包含兩部分 JS基礎知識（ECMA 262 標準） JS-Web-API（W3C 標準） JS-Web-API的內容包括 DOMBOM事件綁定ajax請求（包括http協議）存儲 W3C 標...

zero 2019-08-23 14:10 評論0 收藏0
前端面試之路二(javaScript基礎整理)

摘要：在標簽中添加屬性，本質上是跟在標簽里面寫屬性時一樣的，所以屬性值最終都會編譯為字符串類型。這個節點包括很多，比如，以及一些方法等方法。一個對象有很多，該集合名字為，里面有其他以及，里面有很多。一、變量類型和計算 JS中使用typeof能得到哪些類型變量類型值類型：變量本身就是含有賦予給它的數值的，它的變量本身及保存的數據都存儲在棧的內存塊當中引用類型：引用類型當然是分配到...

AbnerMing 2019-08-23 10:43 評論0 收藏0
慕課網js面試題學習筆記(ES6 標準) ——實時更新

摘要：而第一種方法只能判斷引用類型，不能判斷值類型，因為值類型沒有對應的構造函數描述一個對象的過程生成一個新的空對象指向這個新對象執行構造函數中的代碼，即對賦值將新對象的屬性指向構造函數的屬性返回，即得到新對象。最近在在看前端面試教程，這篇文章里大部分是看視頻的過程中自己遇到的不清楚的知識點，內容很簡單，只是起到一個梳理作用。有些地方也根據自己的理解在作者的基礎上加了點東西，如有錯誤，歡迎...

netmou 2019-08-20 18:10 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0