javaScript的DOM與BOM操做

javaScript的DOM與BOM操做

JavaScript的組成

• ECMAScript - JavaScript的核心

定義了JavaScript 的語法規範

JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

• BOM - 瀏覽器對象模型

一套操做瀏覽器功能的API

經過BOM能夠操做瀏覽器窗口，好比：彈出框、控制瀏覽器跳轉、獲取分辨率等

• DOM - 文檔對象模型

一套操做頁面元素的API

DOM能夠把HTML看作是文檔樹，經過DOM提供的API能夠對樹上的節點進行操做

DOM

DOM常常進行的操做

• 獲取元素
• 對元素進行操做(設置其屬性或調用其方法)
• 動態建立元素
• 事件(什麼時機作相應的操做)

---

獲取頁面元素

掌握
	getElementById()
	getElementsByTagName()
瞭解
	getElementsByName()
	getElementsByClassName()
	querySelector()
	querySelectorAll()
複製代碼

• 根據id獲取元素

var div = document.getElementById('main');
console.log(div);

// 獲取到的數據類型 HTMLDivElement，對象都是有類型的
複製代碼

注意：因爲id名具備惟一性，部分瀏覽器支持直接使用id名訪問元素，但不是標準方式，不推薦使用。

• 根據標籤名獲取元素

var divs = document.getElementsByTagName('div');
複製代碼

• 根據name獲取元素 *

var inputs = document.getElementsByName('hobby');
複製代碼

• 根據類名獲取元素 *

var mains = document.getElementsByClassName('main');
複製代碼

• 根據選擇器獲取元素 *

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}
複製代碼

屬性操做

非表單元素的屬性

• innerHTML和innerText

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成爲標籤</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成爲標籤</p>';
console.log(box.innerText);
複製代碼

• HTML轉義符

" &quot; ' &apos; & &amp; < &lt; // less than 小於 > &gt; // greater than 大於 空格 &nbsp; © &copy; 複製代碼

• 表單元素屬性

  • value 用於大部分表單元素的內容獲取(option除外)
  • type 能夠獲取input標籤的類型(輸入框或複選框等)
  • disabled 禁用屬性
  • checked 複選框選中屬性
  • selected 下拉菜單選中屬性

• 自定義屬性操做

  • getAttribute() 獲取標籤行內屬性
  • setAttribute() 設置標籤行內屬性
  • removeAttribute() 移除標籤行內屬性
  • 與element.屬性的區別: 上述三個方法用於獲取任意的行內屬性。

• 樣式操做

  • 使用style方式設置的樣式顯示在標籤行內

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
複製代碼

• 注意

  經過樣式屬性設置寬高、位置的屬性類型是字符串，須要加上px

• 類名操做

  • 修改標籤的className屬性至關於直接修改標籤的類名

var box = document.getElementById('box');
box.className = 'show';
複製代碼

---

建立元素的三種方式

• document.write()

document.write('新設置的內容<p>標籤也能夠生成</p>');
複製代碼

• innerHTML

var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標籤</p>';
複製代碼

• document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);
複製代碼

性能問題

• innerHTML方法因爲會對字符串進行解析，須要避免在循環內屢次使用。
• 能夠藉助字符串或數組的方式進行替換，再設置給innerHTML
• 優化後與document.createElement性能相近

節點操做

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div, firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);
複製代碼

節點屬性

模擬文檔樹結構

function Element(option) {
  this.id = option.id || '';
  this.nodeName = option.nodeName || '';
  this.nodeValue = option.nodeValue || '';
  this.nodeType = 1;
  this.children = option.children || [];
}

var doc = new Element({
  nodeName: 'html'
});
var head = new Element({
  nodeName: 'head'
});
var body = new Element({
  nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);

var div = new Element({
  nodeName: 'div',
  nodeValue: 'haha',
});

var p = new Element({
  nodeName: 'p',
  nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);

function getChildren(ele) {
  for(var i = 0; i < ele.children.length; i++) {
    var child = ele.children[i];
    console.log(child.nodeName);
    getChildren(child);
  }
}
getChildren(doc);
複製代碼

節點層級

• 注意

  childNodes和children的區別，childNodes獲取的是子節點，children獲取的是子元素

  nextSibling和previousSibling獲取的是節點，獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素

  ​ nextElementSibling和previousElementSibling有兼容性問題，IE9之後才支持

• 總結

節點操做，方法
	appendChild()
	insertBefore()
	removeChild()
	replaceChild()
節點層次，屬性
	parentNode
	childNodes
	children
	nextSibling/previousSibling
	firstChild/lastChild
複製代碼

事件詳解

註冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('點擊後執行');
};
box.onclick = null;

//註冊與刪除事件
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

//IE特有的刪除與註冊事件
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('點擊後執行');
}
複製代碼

解決註冊刪除事件的兼容代碼

function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on'+type] = fn;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}
複製代碼

事件對象的屬性和方法

• event.type 獲取事件類型
• clientX/clientY 全部瀏覽器都支持，窗口位置
• pageX/pageY IE8之前不支持，頁面位置
• event.target || event.srcElement 用於獲取觸發事件的元素
• event.preventDefault() 取消默認行爲

阻止事件傳播的方式

• 標準方式 event.stopPropagation();
• IE低版本 event.cancelBubble = true; 標準中已廢棄

經常使用的鼠標和鍵盤事件

• onmouseup 鼠標按鍵放開時觸發
• onmousedown 鼠標按鍵按下觸發
• onmousemove 鼠標移動觸發
• onkeyup 鍵盤按鍵按下觸發
• onkeydown 鍵盤按鍵擡起觸發

BOM

對話框

• alert()
• prompt()
• confirm()

頁面加載事件

• onload

window.onload = function () {
  // 當頁面加載完成執行
  // 當頁面徹底加載全部內容（包括圖像、腳本文件、CSS 文件等）執行
}
複製代碼

• onunload

window.onunload = function () {
  // 當用戶退出頁面時執行
}
複製代碼

定時器

setTimeout()和clearTimeout()

在指定的毫秒數到達以後執行指定的函數，只執行一次

// 建立一個定時器，1000毫秒後執行，返回定時器的標示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定時器的執行
clearTimeout(timerId);
複製代碼

setInterval()和clearInterval()

定時調用的函數，能夠按照給定的時間(單位毫秒)週期調用函數

// 建立一個定時器，每隔1秒調用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定時器的執行
clearInterval(timerId);
複製代碼

location對象

location對象是window對象下的一個屬性，時候的時候能夠省略window對象

location能夠獲取或者設置瀏覽器地址欄的URL

URL

統一資源定位符 (Uniform Resource Locator, URL)

• URL的組成

scheme://host:port/path?query#fragment
scheme:通訊協議
	經常使用的http,ftp,maito等
host:主機
	服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port:端口號
	整數，可選，省略時使用方案的默認端口，如http的默認端口爲80。
path:路徑
	由零或多個'/'符號隔開的字符串，通常用來表示主機上的一個目錄或文件地址。
query:查詢
	可選，用於給動態網頁傳遞參數，可有多個參數，用'&'符號隔開，每一個參數的名和值用'='符號隔開。例如：name=zs
fragment:信息片段
	字符串，錨點.
複製代碼

history對象

• back()
• forward()
• go()

navigator對象

• userAgent

經過userAgent能夠判斷用戶瀏覽器的類型

• platform

經過platform能夠判斷瀏覽器所在的系統平臺類型.

特效

偏移量

• offsetParent用於獲取定位的父級元素
• offsetParent和parentNode的區別

var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
複製代碼

客戶區大小

var box = document.getElementById('box');
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);
複製代碼

滾動偏移

var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)
複製代碼