js（BOM，DOM，事件）

DOM

DOM節點：

父子：parentNode,childNodes,first-childNode,last-childNode；

兄弟：nextSibling,previousSibling；

DOM節點操作：（增删改查）

• 增：appendChild();
• 删：removeChild();
• 改：replaceChild(newNode,oldNode);
• 查：document.getElementById();document.getElementsByClassName();document.getElementsByTagName();querySelector();
• 插入：insertBefore(newNode,existingNode);
• 複制 ：Node.clone(boolean) =>true 深度克隆 false 隻克隆标簽
• 建立 ：document.createElement()；

getElement(s)By...與querySelector的差別

1. 性能：getElement(s)By...的性能要比querySelector快很多。
2. querySelector選擇出來的是靜态的，getElement選出來的是動态的=>比如動态生成的元素可以用querySelector給每一個該對象生成方法。(建立檔案夾);

批量DOM操作

• createDocumentFragment()

var docFragment = document.createDocumentFragment();

for (var i = counts; i > 0; i--) {
    var node = document.createElement('p');
    var node_text = document.createTextNode(i + ', hehe');

    node.appendChild(node_text);

    docFragment.appendChild(node);
}

document.body.appendChild(docFragment);
           

• innerHTML

var d= document.createElement('div');
	var html="";
	for (var i = counts; i > 0; i--) {
		html += '<p>i+' hehe'</p>';
	}
	d.innerHTMl = html;
	document.body.appendChild(d);
           

對比：

• innerHTML與createDocumentFragment 都比createElement和append占優勢，少量資料時innerHTml最優，多資料或者改資料createDocumentFragment最優
• 但是innerHTML還有兩個缺點：
  • 1.如果你在原來的子元素上綁定了事件的話，重寫後事件綁定仍然還在；
  • 2.js代碼和html代碼耦合程度高，不利于維護；

擷取DOM的各種屬性：

• style
  • （行間樣式）：elem.style[attr]
  • （目前樣式）：elem.currentStyle?elem.currentStyle[attr]:window.getComputedStyle(elem,null)[attr];
• offset
  • ​​​​​​​元素的可視高與寬，包括邊框border與padding,滾動條寬度，元素高度/寬度本身； 值為Number類型。
  • 很多inline-block時，不設定具體高度時，擷取offsetTop不準确；
• client
  • 元素的可視高與寬，不包括邊框border與padding,滾動條寬度，隻為元素高度/寬度本身；值為Number類型；
• getBoundingClientRect()[attr]
  • ​​​​​​​元素相對頁面的距離。相當于chrome下相對body的offsetLeft；值為Number類型；
• clientX
  • ​​​​​​​滑鼠事件距離頁面的距離；

事件：

事件級别：

• DOM0 elem.onclick = function(){};
• DOM2 elem.addEventListener('click',function(){},false); ie-> elem.attachEvent(on+event,fn);
• DOM3 elem.addEventListener('keyup',function(){},false);

事件的三個階段：

• 捕獲：事件由頁面元素接受，逐級向下，直到目标元素；
• 目标：具體元素本身；
• 冒泡：事件由具體元素接受，逐級向上，直到頁面元素；

event:

• e = e || window.event;
• target = e.target || e.srcElement;
• 阻止事件冒泡：e.stopPropagation();window.cancelBubble = true;
• 阻止預設行為：e.preventDefault();

target 與 currentTarget差別：

• currentTarge、this是和“注冊監聽器的對象”是一夥。target和“目前目标對象”是一對。

事件委托：

• 概念：利用事件冒泡的原理将事件綁定到父元素或者祖先元素上，觸發執行效果；
• 優點：減少記憶體，減少事件綁定；新增子元素也不用再綁定事件；​​​​​​​