1.JS 與 JS-Web-APInode
常說的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節點操做:app
(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.檢測瀏覽器類型:this
var ua = navigator.userAgent //獲取瀏覽器類型 var isChrome = ua.indexOf('Chrome') console.log(isChrome)
2.解析url的各部分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) // #哈希值
知識補充:prototype
screen 屏幕: console.log(screen.width) console.log(screen.height) history 歷史: history.back()//返回 history.forward()//前進