JavaScript高级
Silas Shen
11月 07, 2017
DOM编程
Docuement节点
特征
- nodeType的值为9
- nodeName的值为#document
- nodeValue的值为null
- parentNode的值为null
- ownerDocument的值为null
- 其子节点最多是一个DocumentType,Element,processingInstruction或Comment
属性
document.title -> 邮箱通知,动态改变document.title属性来推送给用户
document.referrer -> 进行安全性的判断，上游页面是否在站点内部
document.domain -> 解决子域互访问题
Dom元素节点
默认属性
element.id
element.title
element.classname
element.lang
element.dir
Dom操作
- 添加
//添加新节点
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); // true
alert(someNode.lastChild = newNode); //true
//添加已有节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true
- 插入
//插入后成为最后一个子节点
var returnedNode = someNode.insertBefore(newNode,null);
alert(returnedNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode,someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == some.lastChild); //true
//插入到最后一个字节点前面
var returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true
- 替换
//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
//替换最后一个子节点
rereturnedNode = someNode.replaceChild(newNode,someNode.lastChild);
- 删除
//删除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//删除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);
- 克隆
var deepList = myList.cloneNode(true);
var shallowList = myList.cloneNode(false);
- innerHtml vs DocumentFragment
<ul>
<li>List item -1</li
<li>List item 0</li>
<li>List item 1</li>
...
<li>List item 9</li>
</ul>
listNode.innerHtml += html;
listNode.appendChild(frag);
Dom查找
- document.getElementById
- document.getElementsByTagName
- document.anchors
- document.links
- document.images
- document.forms
- document.querySelector
var myDiv = document.querySelector("#myDiv"); //取得id为myDiv的元素
var img = document.body.querySelector("img.button"); //取得class为button的图像元素
var ems = document.getElementById("myDiv").querySelectorAll("em"); //取得某<div>中所有的<em>元素
var strongs = document.querySelectorAll("p strong"); //取得<p>元素里所有的<strong>元素
Dom级别（动态样式）
图片懒加载
- 通过data-src加载图片
function setImg(index) {
var aLi = document.getElementsByName("li");
if (aLi[index].childNodes.length == 0) {
if (aLi[index].dataset) {
var src = aLi[index].dataset.src;
} else {
var src = aLi[index].getAttribute('data-src');
}
var oImg = document.createElement('img');
oImg.src = src;
aLi[index].appendChild(oImg);
}
}
- 获取元素距离页面顶部的距离
function getH(el) {
var h = 0;
while (el) {
h += el.offsetTop;
el = el.offsetParent;
}
return h;
}
- 组装
window.onscroll = function () {
var aLi = document.getElementsByName("li");
for (var i = 0, l = aLi.length; i<l; i++) {
var oLi = aLi[i];
var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
var h = getH(oLi);
if (h < t ) {
setTimeout("setImg(" + i + ")",500);
}
}
};
window.onload = function () {
window.onscroll();
};
Dom节点
对于一个已有的HTML结构,按字符串顺序重新排序DOM节点
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>
方法一
var arr=[];
var list=document.getElementById('test-list');
for(let i=0;i< list.children.length;i++){
arr.push(list.children[i].innerText);
}
arr.sort();
for(let i=0;i< list.children.length;i++){
list.children[i].innerHTML=arr[i];
}
方法二
var list = document.getElementById('test-list');
var slist = list.children;
slist = Array.prototype.slice.call(slist).sort(function(a, b){
return a.innerHTML > b.innerHTML ? 1 : -1 ;
})
slist.forEach(function(el){
list.appendChild(el);
});
删除节点
var ul = document.getElementById('test-list');
var list = ul.children;
var arr = [];
for(var i = 0;i<list.length;i++) {
if (list[i].innerText !='JavaScript' && list[i].innerText !='HTML'&&list[i].innerText !='CSS')
arr.push(list[i]);
}
for(var i = 0;i<arr.length;i++) {
ul.removeChild(arr[i]);
}
事件
###事件流
冒泡
Element div -> Element body -> Element html -> Document
捕获
Document -> Element html -> Element body -> Element div
事件处理
HTML
<script type="text/javascript">
function showMessage() {
alert("hello");
}
</script>
<input type="button" value="click me" onclick="showMessage()">
DOM0
var btn = document.getElementById("myBtn");
btn.onclick = function() {
alert("clicked");
};
DOM2
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert("clicked");
},false);
btn.addEventListener("click",function(){ //事件处理顺序自上而下
alert("hello");
},false);
IE
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function(){ //事件处理顺序自下向上
alert("hello");
});
删除事件处理
var btn = document.getElementById("myBtn");
var handler() = function() {
alert("hello");
};
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);
事件对象
target
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
alert(event.currentTarget === this); //true
alert(event.target === this); //true
};
document.body.onclick = function(event) {
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById("myBtn")); //true
}
type
var btn = document.getElementById("myBtn");
var handler = function(event) {
switch(event.type) {
case "click":
alert("clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout"
evnet.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
事件类型
事件代理