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. 添加
1//添加新节点
2var returnedNode = someNode.appendChild(newNode);
3alert(returnedNode == newNode); // true
4alert(someNode.lastChild = newNode); //true
5//添加已有节点

6var returnedNode = someNode.appendChild(someNode.firstChild);
7alert(returnedNode == someNode.firstChild); //false
8alert(returnedNode == someNode.lastChild); //true
  1. 插入
1//插入后成为最后一个子节点
2var returnedNode = someNode.insertBefore(newNode,null);
3alert(returnedNode == someNode.lastChild); //true
4//插入后成为第一个子节点

5var returnedNode = someNode.insertBefore(newNode,someNode.firstChild);
6alert(returnedNode == newNode); //true
7alert(newNode == some.lastChild); //true
8//插入到最后一个字节点前面

9var returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
10alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true
  1. 替换
1//替换第一个子节点
2var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
3//替换最后一个子节点

4rereturnedNode = someNode.replaceChild(newNode,someNode.lastChild);
  1. 删除
1//删除第一个子节点
2var formerFirstChild = someNode.removeChild(someNode.firstChild);
3//删除最后一个子节点

4var formerLastChild = someNode.removeChild(someNode.lastChild);
  1. 克隆
1var deepList = myList.cloneNode(true);
2var shallowList = myList.cloneNode(false);
  1. innerHtml vs DocumentFragment
1<ul>
2    <li>List item -1</li
3    <li>List item 0</li>
4    <li>List item 1</li>
5    ...
6    <li>List item 9</li>
7</ul>
8listNode.innerHtml += html;
9listNode.appendChild(frag);

Dom查找

  • document.getElementById
  • document.getElementsByTagName
  • document.anchors
  • document.links
  • document.images
  • document.forms
  • document.querySelector
1var myDiv = document.querySelector("#myDiv"); //取得id为myDiv的元素
2var img = document.body.querySelector("img.button"); //取得class为button的图像元素
3var ems = document.getElementById("myDiv").querySelectorAll("em"); //取得某
中所有的元素
4var strongs = document.querySelectorAll("p strong"); //取得

元素里所有的元素

Dom级别(动态样式)

图片懒加载

  1. 通过data-src加载图片
1function setImg(index) {
2    var aLi = document.getElementsByName("li");
3    if (aLi[index].childNodes.length == 0) {
4        if (aLi[index].dataset) {
5            var src = aLi[index].dataset.src;
6        } else {
7            var src = aLi[index].getAttribute('data-src');
8        }
9        var oImg = document.createElement('img');
10        oImg.src = src;
11        aLi[index].appendChild(oImg);
12    }
13}
  1. 获取元素距离页面顶部的距离
1function getH(el) {
2    var h = 0;
3    while (el) {
4        h += el.offsetTop;
5        el = el.offsetParent;
6    }
7    return h;
8}
  1. 组装
1window.onscroll = function () {
2    var aLi = document.getElementsByName("li");
3    for (var i = 0, l = aLi.length; i<l; i++) {
4        var oLi = aLi[i];
5        var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
6        var h = getH(oLi);
7        if (h < t ) {
8            setTimeout("setImg(" + i + ")",500);
9        }
10    }
11};
12window.onload = function () {
13    window.onscroll();
14};

Dom节点

对于一个已有的HTML结构,按字符串顺序重新排序DOM节点

1<ol id="test-list">
2    <li class="lang">Scheme</li>
3    <li class="lang">JavaScript</li>
4    <li class="lang">Python</li>
5    <li class="lang">Ruby</li>
6    <li class="lang">Haskell</li>
7</ol>

方法一

1var arr=[]; 
2var list=document.getElementById('test-list');
3for(let i=0;i< list.children.length;i++){
4     arr.push(list.children[i].innerText);
5     }
6arr.sort();
7for(let i=0;i< list.children.length;i++){
8     list.children[i].innerHTML=arr[i];
9     }

方法二

1var list = document.getElementById('test-list'); 
2var slist = list.children;
3slist = Array.prototype.slice.call(slist).sort(function(a, b){
4     return a.innerHTML > b.innerHTML ? 1 : -1 ;
5     })
6     slist.forEach(function(el){
7     list.appendChild(el);
8         });

删除节点

1 var ul = document.getElementById('test-list');
2 var list = ul.children;
3 var arr = [];
4 for(var i = 0;i<list.length;i++) {
5      if (list[i].innerText !='JavaScript' &amp;&amp; list[i].innerText !='HTML'&amp;&amp;list[i].innerText !='CSS')
6      arr.push(list[i]);
7}
8 for(var i = 0;i<arr.length;i++) {
9       ul.removeChild(arr[i]);
10}

事件

###事件流
冒泡
Element div -> Element body -> Element html -> Document
捕获
Document -> Element html -> Element body -> Element div

事件处理

HTML

1<script type="text/javascript">
2    function showMessage() {
3         alert("hello");
4        }
5</script>
6<input type="button" value="click me" onclick="showMessage()">

DOM0

1var btn = document.getElementById("myBtn");
2btn.onclick = function() {
3    alert("clicked");
4};

DOM2

1var btn = document.getElementById("myBtn");
2btn.addEventListener("click",function(){
3    alert("clicked");
4},false);
5btn.addEventListener("click",function(){ //事件处理顺序自上而下
6    alert("hello");
7},false);

IE

1var btn = document.getElementById("myBtn");  
2btn.attachEvent("onclick",function(){
3    alert("clicked");
4});
5btn.attachEvent("onclick",function(){ //事件处理顺序自下向上
6    alert("hello");
7});

删除事件处理

1var btn = document.getElementById("myBtn");
2var handler() = function() {
3    alert("hello");
4};
5btn.addEventListener("click",handler,false);
6btn.removeEventListener("click",handler,false);

事件对象
target

1var btn = document.getElementById("myBtn");
2btn.onclick = function(event) {
3        alert(event.currentTarget === this); //true
4        alert(event.target === this); //true
5};
6
7document.body.onclick = function(event) {
8        alert(event.currentTarget === document.body); //true
9        alert(this === document.body); //true
10        alert(event.target === document.getElementById("myBtn")); //true
11}

type

1var btn = document.getElementById("myBtn");
2var handler = function(event) {
3    switch(event.type) {
4        case "click":
5            alert("clicked");
6            break;
7        case "mouseover":
8            event.target.style.backgroundColor = "red";
9            break;
10        case "mouseout"
11            evnet.target.style.backgroundColor = "";
12            break;
13    }
14};
15btn.onclick = handler;
16btn.onmouseover = handler;
17btn.onmouseout = handler;

事件类型
事件代理

JSON和服务端通信

json

ajax

跨域通信