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和“当前目标对象”是一对。

事件委托：

• 概念：利用事件冒泡的原理将事件绑定到父元素或者祖先元素上，触发执行效果；
• 优点：减少内存，减少事件绑定；新增子元素也不用再绑定事件；​​​​​​​