HTML基礎 DOM概覽(第一天)

時間 2019-11-09

標籤 html 基礎 dom 概覽第一天欄目 HTML 简体版

原文原文鏈接

前面的一句話:

DOM內容太多, 只能言簡意賅, 深究能夠到tcp協議,瀏覽器內核,計算機圖形學等等知識, 慢慢來,讓咱們螺旋式的方式提升本身吧

開胃菜:
你們知道 contentEditable 是幹嗎的嗎?

一點思考:

有些牛人在特定時間點鑽研DOM和特性, 若干年後, 兼容ie6,7,8成爲古文, 一些特別的用法逐漸規範, xxxx研究好多天的問題,對於h5是小菜一碟, 不是咱們不行,是DOM的侷限性決定的, 着眼於將來.

擡頭看看世界,h5來了javascript

語義化標籤css

繪製: canvas/svg/html

http://www.craftymind.com/blowing-up-html5-video-and-mapping-it-into-3d-space/ 看完後我大小便失禁了html5

音視頻: audio/videojava

地理信息:Geolocation APInode

跨文檔通訊: postMessage API , XMLHttpRequest2web

套字節: WebSocket APIexpress

優化的表單: Forms APIcanvas

工做流: Web Workers API 支持多線程,讓web應用程序具有後臺處理能力,不會阻塞DOM渲染api

http://www.w3ctech.com/topic/866 我最欣賞的月影前輩所翻譯

離線存儲: Web Storage API

3D: webGL

http://www.pper.com.cn/ 我又一次失禁了

http://threejs.org/ 止不住的失禁

一些屬性和變量

contentEditable ? //文本編輯器

contextmenu ? //添加右擊菜單

draggable dropzone ? //自然支持的拖拽

prefetch ? //預先加載 <link rel="prefetch" href="http://www.example.com" >

正文

BOM browser object model

DOM Document Object Model

瀏覽器監聽對象

XMLHttpRequest對象

提問: BOM和DOM的究竟是什麼?

DOM的API接口

提問: DOM節點類型有哪幾種? 是一個標籤一個節點嗎?
提問: 你若是是DOM設計師, 你會如何設計DOM的API ???

屬性 下面的例子打開當前頁面console控制檯跑, dom引用當前頁面

dom.childNodes; 返回該節點的全部子節點僞數組(NodeList), 注意: 會返回各類類型的節點 dom.childNodes.length; dom.childNodes[1];

dom.firstChild; 返回第一個子節點 === dom.childNodes[0], //document.childNodes[1].childNodes[2].childNodes[20].childNodes[0] === document.childNodes[1].childNodes[2].childNodes[20].firstChild //true

dom.lastChild; 返回最後一個子節點 === dom.childNodes[ dom.childNodes.length-1 ];

dom.nextSibling; 返回下一個兄弟節點, dom.nextSibling.nextSibling 這樣玩也能夠

dom.previousSibling; 返回上一個兄弟節點,

dom.attributes; 返回該節點的屬性數組

dom.nodeName; 返回該節點的節點名稱string

dom.nodeValue; 返回該節點的節點值string

dom.textContent; 返回該節點的文本內容, 注意: ie不支持能夠用 dom.innerText

dom.innerHTML; 返回該節點的全部HTML代碼

dom.id; 返回該節點的id(string) 沒有返回""

dom.className; 返回該節點的全部class串; 例:document.childNodes[1].childNodes[2].className //"theme-default aui-layout aui-theme-default contenteditor edit no-tools-pin-toolbar"

dom.style; 返回該節點的樣式, 打印 document.getElementById('editor-preload-container').style;

dom.value; 返回該節點的(form元素)的值, 例: document.getElementById('editor-preload-container').value //undefined

方法

dom.hasChildNodes(); 該節點是否存在子節點.

dom.hasAttributes(); 該節點是否存在屬性

dom.appendChild(dom); 添加一個子節點,在子節點隊尾.

dom.cloneNode(false/true); 克隆節點, false不復制子節點,true複製子節點

dom.insertBefore(新子節點,被插隊的節點); 插入子節點,能夠控制位置

dom.removeChild(被刪節點); 刪除子節點,返回被刪除節點

dom.replaceChild(被刪節點,替換節點); 替換子節點, 返回被刪節點

快捷方式和優化

document.childNodes[1].childNodes[2].childNodes[20]; //<div id="editor-preload-container" style></div>

document.childNodes[1].childNodes[2].childNodes[20] instanceof Element; //true

document.getElementById('editor-preload-container') instanceof Element //true

document.getElementsByTagName('div') instanceof HTMLCollection // true

document.createElement();

document.createTextNode();

document.getElementById();

document.getElementsByTagName();

document.getElementsByClassName();

document.images //跑一跑

document.links

document.forms

document.write('html");

document.cookie

document.title

document.referrer

document.domain

事件監聽, 跑起來啥都看清楚了

<!doctype html>
<html>
  <head>
<meta charset="utf-8">
  </head>
  <body id="body">
<div style="height:400px;width:400px;background:blue;"></div>
<script type="text/javascript">
      var body = document.getElementById('body');
      body.addEventListener('click',function(e){
          console.log(e instanceof window.MouseEvent );
      },false);
  </script>
  </body>
</html>

addEventListenter(事件類型,處理函數,是否捕獲); ---> attachEvent

removeEventListener(事件類型,處理函數); ---> detachEvent

事件冒泡

從下往上冒泡傳遞,依次觸發監聽.

e.stopPropagation(); //阻止冒泡 ---> cancelBubble = true;

e.preventDefault(); //阻止默認行爲 --> returnValue = false;

事件類型:

document. 跑一下

XMLHttpRequest 對象

var xhr = new XMLHttpRequest();

xhr.open(請求類型區分大小寫, 請求地址, 是否異步,false===同步);

xhr.onreadystatechange = function(無參){

if( xhr.readState === 4 ){ 請求狀態, 0未初始/1載入請求/2載入完成/3請求交互/4請求完成

if( xhr.status === 200 ){ http請求的狀態碼

xhr.responseText 返回內容

}

xhr.senRequestHeader(key:value); //設置請求頭信息,能夠設置多個 //setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send(發送的數據);

XMLHttpRequest2

* 上傳下載2進制數據,例如圖片

* 自動解碼數據類型: ArrayBuffer / Blob / Document / JSON / Text

* 監聽上傳,下載的進度

javascript性能優化-repaint和reflow

原文地址: http://www.cnblogs.com/jiajiaobj/archive/2012/06/11/2545291.html

repaint(重繪) ，repaint發生更改時，元素的外觀被改變，且在沒有改變佈局的狀況下發生，如改變outline,visibility,background color，不會影響到dom結構渲染。

reflow(渲染)，與repaint區別就是他會影響到dom的結構渲染，同時他會觸發repaint，他會改變他自己與全部父輩元素(祖先)，這種開銷是很是昂貴的，致使性能降低是必然的，頁面元素越多效果越明顯。

什麼時候發生：

1. DOM元素的添加、修改（內容）、刪除( Reflow + Repaint)
2. 僅修改DOM元素的字體顏色（只有Repaint，由於不須要調整佈局）
3. 應用新的樣式或者修改任何影響元素外觀的屬性
4. Resize瀏覽器窗口、滾動頁面
5. 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);

4. 集中修改樣式
　　4.1儘量少的修改元素style上的屬性
　　4.2儘可能經過修改className來修改樣式
　　4.3經過cssText屬性來設置樣式值
　　　　element.style.width=」80px」; //reflow
　　　　element.style.height=」90px」; //reflow
　　　　element.style.border=」solid 1px red」; //reflow
　　　　以上就產生屢次reflow，調用的越多產生就越多
　　　　element.style.cssText=」width:80px;height:80px;border:solid 1px red;」; //reflow　
　　4.4緩存Layout屬性值
　　　　var left=elem.offsetLeft; 屢次使用left也就產生一次reflow
　　4.5設置元素的position爲absolute或fixed
　　　　元素脫離標準流，也從DOM樹結構中脫離出來，在須要reflow時只須要reflow自身與下級元素
　　4.6儘可能不要用table佈局
　　　　table元素一旦觸發reflow就會致使table裏全部的其它元素 reflow。在適合用table的場合，能夠設置table-layout爲auto或fixed，這樣可讓table一行一行的渲染，這種作法也是爲了限制reflow的影響範圍
　　4.7避免使用expression,他會每次調用都會從新計算一遍(包括加載頁面)

最後的一句話:

不少內容不是三言兩句能說明白的, canvas就這一個標籤, 我整整學了一個月, 打開視野更重要, 天花板在哪裏, 去哪裏找資料, 技術分析有個大概參考, 讓咱們一塊兒螺旋成長吧.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。