JavaScript高级

Author Avatar
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操作

  1. 添加
//添加新节点
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
  1. 插入
//插入后成为最后一个子节点
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
  1. 替换
//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
//替换最后一个子节点
rereturnedNode = someNode.replaceChild(newNode,someNode.lastChild);
  1. 删除
//删除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//删除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);
  1. 克隆
var deepList = myList.cloneNode(true);
var shallowList = myList.cloneNode(false);
  1. 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级别(动态样式)

图片懒加载

  1. 通过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);
    }
}
  1. 获取元素距离页面顶部的距离
function getH(el) {
    var h = 0;
    while (el) {
        h += el.offsetTop;
        el = el.offsetParent;
    }
    return h; 
}
  1. 组装
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;

事件类型
事件代理

JSON和服务端通信

json

ajax

跨域通信