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

2023年5月7日 137次阅读 来源: 艿厝

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()//行進
    原文作者：艿厝
    原文地址: https://segmentfault.com/a/1190000014947596
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞