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操作
- 添加
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//插入后成为最后一个子节点
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//替换第一个子节点
2var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
3//替换最后一个子节点
4rereturnedNode = someNode.replaceChild(newNode,someNode.lastChild);- 删除
1//删除第一个子节点
2var formerFirstChild = someNode.removeChild(someNode.firstChild);
3//删除最后一个子节点
4var formerLastChild = someNode.removeChild(someNode.lastChild);- 克隆
1var deepList = myList.cloneNode(true);
2var shallowList = myList.cloneNode(false);- 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级别（动态样式）
图片懒加载
- 通过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}- 获取元素距离页面顶部的距离
1function getH(el) {
2 var h = 0;
3 while (el) {
4 h += el.offsetTop;
5 el = el.offsetParent;
6 }
7 return h;
8}- 组装
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' && list[i].innerText !='HTML'&&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;事件类型
事件代理