一、DOM
JavaScript语言核心。变量的定义、变量的类型、运算符、表达式、函数、if语句、for循环、算法等等。这些东西都属于语言核心,下次继续学习语言核心就是面向对象了。JavaScript能做非常多的事情:DOM开发、Ajax开发、Canvas开发、NodeJS开发、前端框架(React、Vue、Angular等等)、HTML5开发。这些都需要语言核心的知识。
DOM开发说白了就是浏览器中的页面效果开发,在2011年之前,DOM开发占据了前端开发工程师的90%的工作;但是现在,DOM开发的工作比重已经降到了10%以下。换句话说,2011年之前,前端 = 做特效的;2011年之后,前端要负责得到后台的数据接口,用前端MVC逻辑分层开发前端组建、界面、功能,还要写HTML5,还要做canvas动画!
上层的框架屏蔽了下层的语言的一些麻烦、不方便的东西,并且提供更方便的API。
jQuery就是干这个事情的,把JS中的不方便封装起来,暴露的API都是非常简便的。
jQuery的哲学就是DOM编程领域的霸主,操作DOM节点、绑定监听、运动、css样式、Ajax等等都有封装。
工作上都是用jQuery,如果不用jQuery也是用类似的东西。没有人会不用轮子去开发页面效果。
JavaScript中Library表示“库”,如果这个库的功能很强大,甚至颠覆了传统编程的语法、行文习惯,我们就可以叫做“框架”。
1.1 DOM是什么
文档对象模型 (DOM,Document Object Model) 是 HTML 和 XML 文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问,以改变文档的结构,样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说,它将 web 页面和脚本或编程语言连接起来了。
到底什么是DOM?就是你可以像操作对象一样操作HTML页面,而不是操作字符串。
DOM将 web 页面和脚本或编程语言连接起来了。
回看一下我们之前学习的DOM操作,都在干嘛?我们在开发特效,但是微观的看,实际上在进行:
1) 得到HTML节点
2) 改变节点的属性
3) 改变节点的样式
4) 修改节点、删除节点、增加节点
5) 节点之间的关系
1.2原生JavaScript得到节点
document.getElementById('box'); document.getElementsByTagName('p'); |
以上两是全线浏览器都兼容的得到元素方法。
以下这些得到元素的方法都不兼容IE678。
document.getElementsByName('aaa')[0] //通过name属性得到元素们 document.getElementsByClassName('pp') //通过类名得到元素们 document.querySelector('#box'); document.querySelectorAll('#box p'); //通过选择器得到元素们
jQuery是DOM开发的王者!帮我们解决了元素选择的兼容问题。
jQuery底层很强大,比如$('.par1')机制不是getElementsByClassName(),而是在遍历所有节点,选择类名有par1的项。
二、原生JavaScript节点关系
在jQuery中学习parent()、children() 、siblings()、next()、prev()等等节点关系,JS中也有对应的属性。
原生JS提供的节点关系很少:
childNodes、firstChild、lastChild、parentNode、nextSibling、previousSibling
常见的nodeType值:
1-普通元素节点、比如div、p等等 2-属性节点 3-文本节点 8-注释节点 9-document节点 10-文档DTD |
想要查看某一个元素的节点类型,直接读取它的nodeType属性即可。
改变nodeType为3的文本节点的内容,要改变他的nodeValue属性
2.1 childNodes儿子节点
childNodes在IE6、7、8和高级浏览器不一致,高级浏览器认为所有的换行为空文本节点,而IE678无视这个空文本节点。
div中没有文本节点,此时应该是4个节点,但是IE9、Chrome、火狐会认为有9个节点、IE8认为有4个节点。
高级浏览器会把空文本当做一个节点,标签前后的空文本也被算作一个。
注释的前后算不算空文本节点,各个浏览器有不同的解释。所以用节点的时候,一定要去过滤、判断节点的nodeType是不是1。
<div id="box"> <p></p> <p></p> <p></p> <p></p> </div>
oBox.childNodes.length; //Chrome数值9、IE678是4 |
为解决兼容性问题(到底空文本算不算儿子,所以要封装函数来解决):
可以利用nodeType是不是1来过滤文本节点、注释节点等,编写一个函数,得到一个标签真正的子节点。
jQuery也有这层过滤:
//封装一个children函数,这个函数能返回obj对象的所有真正儿子节点 function chidlren(obj,num){ var arr = []; //存储所有儿子 //遍历所有的节点 for(var i = 0; i < obj.childNodes.length;i++){ //遍历的过程,寻找真正的HTML儿子节点、过滤文本、注释等节点 //判断节点类型是不是1 if(obj.childNodes[i].nodeType == 1){ arr.push(obj.childNodes[i]); //如果是儿子节点就插入数组中 } } //return arr; //返回的是:如果用户传入了num,返回某一个儿子,如果没有num,返回所有儿子 return num ? arr[num] : arr; } chidlren(oBox)[2].style.backgroundColor = 'red'; chidlren(oBox,3).style.backgroundColor = 'red';
2.2 parentNode父亲节点
parentNode属性表示父亲节点。任何节点的parentNode的nodeType一定是1,也就是说父亲节点一定是标签节点。文本节点、注释节点没有儿子。
var input = document.getElementsByTagName('input'); for(var i = 0;i < input.length;i++){ //当点击某个input时,如果自己被选中,此时改变父亲的颜色为绿色,否则为白色 input[i].onclick = function(){ if(this.checked){ this.parentNode.style.backgroundColor = 'green'; }else{ this.parentNode.style.backgroundColor = 'white'; } } }
2.3 previousSibling和nextSibling兄弟节点
上一个兄弟previousSibling、下一个兄弟nextSibling。同样的,文本节点也属于节点,注释也是节点,所以一个节点的上一个兄弟可能是文本、注释节点。原生JS中没有提供类似nextAll()、prevAll()、siblings()方法,如果节点没有上一个兄弟或下一个兄弟、返回null。
console.log(pp.previousSibling.nodeType) console.log(pp.nextSibling.nodeType) |
var pp = document.getElementById("pp"); //返回obj的前面一个兄弟 function prevSibling(obj){ //开始遍历obj节点的前面,直到遇见一个nodeType为1的节点 var prev = obj; //循环遍历。注意while的条件是一个赋值语句!赋值语句也有表达式的 while(prev = prev.previousSibling){ if(prev.nodeType == 1){ return prev; } } return null; } //得到真正的后面兄弟 function nextSibling(obj){ //开始遍历obj节点的前面,直到遇见一个nodeType为1的节点 var next = obj; while(next = next.nextSibling){ if(next.nodeType == 1){ return next; } } return null; } //返回obj的前面所有兄弟 function prevAll(obj){ //开始遍历obj节点的前面,直到遇见一个nodeType为1的节点 var prev = obj; var arr = []; while(prev = prev.previousSibling){ if(prev.nodeType == 1){ arr.push(prev); } } return arr; } prevSibling(pp).style.background = "red"; nextSibling(pp).style.background = "green"; prevAll(pp)[1].style.background = "green";
三、原生JavaScript DOM节点操作
HTML节点我们原来最多就是改改HTML属性,比如改改src属性;或者改改css样式,比如.style或者.css()。
现在的问题是,我们要增加节点、删除节点、移动节点、替换节点。
3.1 createElement()创建和appendChild()添加
创建节点的方法: create创建,Element元素。接收一个参数,就是创建的标签是什么。
document.createElement() |
追加节点的方法:创建出来的节点不在DOM树上,所以就应该用appendChild()来添加到DOM树上:
父亲.appendChild(新儿子); |
var btn = document.getElementById('btn'); var txt = document.getElementById('txt'); var ul = document.getElementsByTagName('ul')[0]; btn.onclick = function(){ //创建一个li标签,用变量oLi 来表示,创建除了的节点不是任何节点的儿子(没有在DOM树上) var oLi = document.createElement('li'); oLi.innerHTML = txt.value; //改变这个节点的内容 //把新创建的节点,追加到DOM树上 ul.appendChild(oLi); }
appendChild()一般来说就是用来追加新创建的节点,如果试图把页面上已经有的节点,appendChild()到别的地方,那么这个节点将移动,也就是说,同一个节点不可能在页面上两个地方出现。
比如:
<div id="box1"> <p id="xiaoming">我是小明</p> </div> <div id="box2"> </div> <script type="text/javascript"> var box2 = document.getElementById('box2'); var xiaoming = document.getElementById('xiaoming'); box2.appendChild(xiaoming); </script>
以上将把xioaming移动到box2里面。
用innerHTML创建节点:
事实上,工作的时候很少用createElement。因为innerHTML足够好用,innerHTML也可以用来创建节点,甚至效率createElement还高。
var year = document.getElementById('year'); for(var i = 1950; i <= 2018;i++){ //创建节点 var op = document.createElement('option'); //改变创建出来的节点内容 op.innerHTML = i; //上DOM树 year.appendChild(op); // 父亲.appendChild(新儿子); }
innerHTML创建:
for(var i = 1950; i <= 2018; i++) { year.innerHTML += '<option>'+i+'</option>'; }
JavaScript是动态变量:
var oBox = document.getElementById('box'); //得到box里面所有的p,现在box没有p,所以ops是一个空数组 var ops = oBox.getElementsByTagName('p'); var np = document.createElement('p'); //创建节点 oBox.appendChild(np); //追加节点 var np = document.createElement('p'); //创建节点 oBox.appendChild(np); //追加节点 var np = document.createElement('p'); //创建节点 oBox.appendChild(np); //追加节点 var np = document.createElement('p'); //创建节点 oBox.appendChild(np); //追加节点 var np = document.createElement('p'); //创建节点 oBox.appendChild(np); //追加节点 //这里弹出多少?初学者认为弹出0,因为先得到数组p,然后创建节点,节点又没有往数组里面push,所以应该ops数不变才对。 //但是JS中存储DOM节点的变量是动态,不是一个瞬时照片,而是一个有生命的动态对象,当oBox里面的p标签变化时,ps也变化 console.log(ops.length)
3.2 insertBefore()添加
appendChild是把新节点插入在父亲的所有子节点的后面,也就是说添加的节点就是父亲的最后一个儿子。
我们可以在任意一个位置添加子节点:会在原有标杆儿子之前插入
父亲.insertBefore(新儿子,原有标杆儿子) |
var btn = document.getElementById('btn'); var txt = document.getElementById('txt'); var ul = document.getElementsByTagName('ul')[0]; var lis = document.getElementsByTagName('li'); btn.onclick = function(){ //创建一个li标签,用变量oLi 来表示,创建除了的节点不是任何节点的儿子(没有在DOM树上) var oLi = document.createElement('li'); oLi.innerHTML = txt.value; //改变这个节点的内容 //把新创建的节点,追加到DOM树上 //在lis[0]的前面插入 ul.insertBefore(oLi,lis[0]); }
如果想每次都在开头添加,那么就是:
ul.insertBefore(oLi,lis[0]); |
lis这个变量是动态的,这次添加的li,下回就是lis[0]。
3.3 removeChild()删除
父亲.removeChild(儿子); <ul> <li>吃饭 <a href="###">删除</a></li> <li>睡觉 <a href="###">删除</a></li> <li>打豆豆 <a href="###">删除</a></li> </ul> <script type="text/javascript"> var ul = document.getElementsByTagName('ul')[0]; var lis = document.getElementsByTagName('li'); var as = document.getElementsByTagName('a'); for(var i = 0;i< as.length;i++){ as[i].onclick = function(){ ul.removeChild(this.parentNode); //如果要自杀,也要找到爸爸 //this.parentNode.removeChild(this); } } </script>
如果要自杀,也要找到爸爸:
this.parentNode.removeChild(this); |
3.4 replaceChild()替换
替换节点:
父亲.replaceChild(新儿子,旧儿子) |
<div> <p>赵丽颖</p> <p id="xh">小黑</p> <p>迪丽热巴</p> </div> <script type="text/javascript"> var oBox = document.getElementsByTagName('div')[0] var xh = document.getElementById('xh'); //创建节点,孤儿节点 var op = document.createElement('p'); op.innerHTML = '朱老师'; //更改op的内容 oBox.replaceChild(op,xh); </script>
3.5 clone()克隆
克隆节点,参数true表示深度克隆,节点里面的所有内容和事件一同复制。
复制之后的节点是个孤儿节点,所以也要使用appendChild()等方法来添加上DOM树。
克隆对象.cloneNode(true) |
<div id="box1"> <ul> <li><span>赵丽颖</span></li> <li><span>迪丽热巴</span></li> <li><span>柳岩</span></li> <li><span>志玲姐姐</span></li> </ul> </div> <div id="box2"> </div> <script type="text/javascript"> var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var ul = document.getElementsByTagName('ul')[0]; var lis = document.getElementsByTagName('li'); //克隆li和li的所有后代(要加true),然后追加到ul中 //ul.appendChild(lis[0].cloneNode()); //克隆第0个li box2.appendChild(ul.cloneNode(true)); //克隆ul追加到box2中 </script>
四、事件监听
一堆理论知识正要来袭。
4.1事件流
我们考虑一个结构,三个div嵌套,点击最内层的div,我们点击了谁?仅仅点击了最内层div吗?不是就像手指放在到一个同心圆中,实际上手指触碰到了任何一个圆。
点击最内层的div,实际上浏览器会认为我们点击了所有的盒子,甚至于body、document、window。
为了描述事件的传播,人为规定了一个事件的传播方向,称为“事件流”。两个阶段:事件捕获阶段,事件冒泡阶段。
“事件流”描述的是页面上各个元素接收事件的顺序。
4.2 DOM0级事件监听
DOM分级别,DOM0级、1级、2级、3级,是不同的标准,标准一直在升级。
之前学习的on开头的语法添加事件,称为“DOM0级事件”。
事件的触发一定是按照事件流的顺序,由于DOM0级只能监听冒泡阶段,所以顺序是:box3→box2→box1→body→document→window 如果改变监听顺序,弹出顺序不变。
box1.onclick = function(){ alert('我是box1');} box2.onclick = function(){ alert('我是box2');} box3.onclick = function(){ alert('我是box3');} document.body.onclick = function(){alert('我是body')} document.onclick = function(){alert('我是document')} window.onclick = function(){alert('我是window')}
这种监听写法,就是DOM0级,就是把onclick当做属性添加给了div元素。
这种事件添加方法,只能监听冒泡过程,不能监听事件捕获阶段。
DOM0级事件处理函数中,this指的是触发事件的DOM元素,就是事件传播到的这个元素。
DOM0级事件处理函数中,如果同一个对象,同一个事件名,绑定多个监听,后面写的覆盖前面写的。
box1.onclick = function(){ alert('我是box1');} box1.onclick = function(){ alert('我是box1,后面写的');} |
DOM0级事件,IE6、7事件只能冒泡到document,IE8只能冒泡body,不能继续冒泡到window。也就是说不能给window对象添加事件。
4.3 DOM2级事件监听
DOM1级规范中,没有对事件进行改动,所以没有DOM1级的事情
DOM2级做了新的规范,不用on**来绑定监听了,而是用一个方法
W3C推出了addEventListener()函数,add添加、event事件,listener监听
它接收三个参数:事件,函数,是否监听捕获阶段
元素.addEventListener(事件,事件处理函数,是否添加到捕获阶段) |
第一个参数:事件名不用谢on。(click、mouseover)
第二个参数:函数可以是匿名函数,也可以是有名函数
第三个参数:布尔值,true表示监听捕获,false表示监听冒泡阶段
box1.addEventListener('click',function(){ alert('我是box1的捕获阶段') },true);
第三个参数是true,表示监听box1