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的区别
- 性能:getElement(s)By...的性能要比querySelector快很多。
- 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和“当前目标对象”是一对。
事件委托:
- 概念:利用事件冒泡的原理将事件绑定到父元素或者祖先元素上,触发执行效果;
- 优点:减少内存,减少事件绑定;新增子元素也不用再绑定事件;