节点树
概述:节点即为标签。节点之间这种关系，我们称之为‘节点树’。因为很想一颗大树扎根。
DOM【document object model】:文档对象模型，你可以理解为是整个节点树最外层‘根元素’。
DOM其实就是JS语言中内置引用类型document对象，DOM对象经常用来操作节点（标签）
比如：操作节点样式、属性、文本等等。
DOM属性
1. <script type="text/javascript"> 2. //DOM:常用属性 3. //documentElement:获取到节点树的html标签 4. console.log(document.documentElement); 5. //head:获取到节点树的head标签 6. console.log(document.head); 7. //title:获取到节点title标签的文本 8. console.log(document.title); 9. //body:获取到节点body 10. console.log(document.body); 11. </script>
DOM方法
- getElementById方法：可以通过标签ID选择器获取对应节点。
- 一般我们将script标签放在程序最底部。
- 不管节点（标签）在网页中嵌套关系如何复杂。都可以通过这个方法获取到。
- 注意：标签（节点）在JS当中属于引用类型数据。
1. <script type="text/javascript"> 2. //getElementById方法:可以获取到节点树上任意节点 3. //【需要给标签添加id属性，通过id选择器获取】 4. var element = document.getElementById("box"); 5. var eleCur = document.getElementById("cur"); 6. var eleLi = document.getElementById("me"); 7. console.log(element); 8. console.log(eleCur); 9. console.log(eleLi); 10. console.log(typeof element); 11. </script>
操作节点属性
1. <script type="text/javascript"> 2. var div=document.getElementById("box"); 3. div.id='box2'; 4. console.log(div.id); 5. console.log(div.className); 6. </script>
box2
cur
操作节点文本
表单元素：value
其他元素：innerHTML
1. <script type="text/javascript"> 2. var div=document.getElementById("box"); 3. var inp=document.getElementById("inp"); 4. console.log(inp.value); 5. console.log(div.innerHTML); 6. inp.value="默认value"; 7. </script>
操作节点样式
- 行内样式
<div id="box" style="width: 60px;color: red;background-color: aquamarine;">coleak1</div>
- 内部样式
- 外部样式（link引入）
1. <script type="text/javascript"> 2. var div=document.getElementById("box"); 3. console.log(div.style['width']); 4. div.style['width']="900px"; 5. </script>
事件绑定
- onclick||ondblclick
1. <script type="text/javascript"> 2. var div=document.getElementById("box"); 3. // div.onclick=function() 4. // { 5. // alert("我单击了"); 6. // } 7. div.ondblclick=function() 8. { 9. alert('我双击了'); 10. } 11. </script>
- onmouseenter||onmouseleave
- onmouseover||onmouseout
1. <script type="text/javascript"> 2. var div=document.getElementById("box"); 3. // div.onmouseenter=function() 4. // { 5. // alert("我进入了"); 6. // } 7. div.onmouseleaves=function() 8. { 9. alert('我离开了'); 10. } 11. </script>
- onfocus||onblur
1. <script type="text/javascript"> 2. var input=document.getElementById("inp"); 3. input.onfocus=function() 4. { 5. input.style.color='green'; 6. } 7. input.onblur=function() 8. { 9. input.style.color='black'; 10. } 11. </script>
- onmousedown / onmouseup
1. <script type="text/javascript"> 2. var box=document.getElementById("box"); 3. box.onmousedown =function() 4. { 5. box.style.color='green'; 6. } 7. box.onmouseup=function() 8. { 9. box.style.color='black'; 10. } 11. </script>
- onmousemove
1. <script type="text/javascript"> 2. document.onmousedown=function() 3. { 4. document.body.style.background="red"; 5. 6. } 7. document.onmousemove = function() 8. { 9. var R=parseInt(Math.random()*255); 10. var G=parseInt(Math.random()*255); 11. var B=parseInt(Math.random()*255); 12. document.body.style.background="rgb("+R+","+G+","+B+")"; 13. } 14. document.onmouseup=function() 15. { 16. document.body.style.background="black"; 17. 18. } 19. </script>
节点获取方法
- document.getElementById
- document.getElementsByTagName
- document.getElementsByClassName
- document.getElementsByName
1. <script type="text/javascript"> 2. var arr=document.getElementsByTagName('li'); 3. for (var i=0;i<arr.length;i++) 4. { 5. arr[i].style.color="red"; 6. } 7. </script>
批量添加事件
1. <script type="text/javascript"> 2. var arr=document.getElementsByTagName('li'); 3. for(var i=0;i<arr.length;i++) 4. { 5. arr[i].onclick=function() 6. { 7. this.style.color="red"; 8. } 9. } 10. </script>
事件对象
- 当事件处理函数执行的时候，系统会自动注入实参，我们用形参接受【事件对象】
- 在不同浏览器中事件对象是有兼容问题。使用短路语句进行兼容。
1. <script type="text/javascript"> 2. //获取节点 3. var div = document.querySelector("div"); 4. div.onclick = function(event){ 5. //对于高级浏览器：谷歌、IE8以上的浏览器---->event 6. //对于低级浏览器：IE8以下的，事件对象作为BOM对象属性 7. var e = event||window.event; 8. console.log(e); 9. } 10. </script>
获取鼠标位置
- screenX||screenY
1. <script type="text/javascript"> 2. //获取节点 3. var inn = document.querySelector('.inner'); 4. //鼠标在整个网页当中移动 5. document.onmousemove = function(event){ 6. //短路语法进行兼容 7. var e = event||window.event; 8. inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY; 9. } 10. </script>
- pageX||pageY
1. <script type="text/javascript"> 2. //获取节点 3. var inn = document.querySelector('.inner'); 4. //鼠标在整个网页当中移动 5. document.onmousemove = function(event){ 6. //短路语法进行兼容 7. var e = event||window.event; 8. inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>"; 9. inn.innerHTML += "pageX:"+e.pageX +"pageY:"+e.pageY; 10. } 11. </script>
- clientX||clinetY
- offsetX||offsetY
1. <script type="text/javascript"> 2. //获取节点 3. var inn = document.querySelector('.inner'); 4. //鼠标在整个网页当中移动 5. document.onmousemove = function(event){ 6. //短路语法进行兼容 7. var e = event||window.event; 8. inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>"; 9. inn.innerHTML += "pageX:"+e.pageX +"pageY:"+e.pageY+"<br/>"; 10. inn.innerHTML +="clientX"+e.clientX +"clinetY"+e.clientY+"<br/ >"; 11. inn.innerHTML +="offsetX"+e.offsetX +"offsetY"+e.offsetY; 12. } 13. </script>
