DOM example
一:DOM简介:
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。
二:节点树:
节点之间关系:
三:常用方法:
dom通过js对html进行动态的变化。主要就是查找元素和操作元素。
1:查找元素:
1 document.getElementById 根据ID获取一个标签 2 document.getElementsByName 根据name属性获取标签集合 3 document.getElementsByClassName 根据class属性获取标签集合 4 document.getElementsByTagName 根据标签名获取标签集合
间接查找元素:
1 parentNode // 父节点 2 childNodes // 所有子节点 3 firstChild // 第一个子节点 4 lastChild // 最后一个子节点 5 nextSibling // 下一个兄弟节点 6 previousSibling // 上一个兄弟节点 7 8 parentElement // 父节点标签元素 9 children // 所有子标签 10 firstElementChild // 第一个子标签元素 11 lastElementChild // 最后一个子标签元素 12 nextElementtSibling // 下一个兄弟标签元素 13 previousElementSibling // 上一个兄弟标签元素
2:操作:
内容:
1 innerText 获取元素的文本内容。 2 outerText 3 innerHTML 获取元素的html内容。 4 innerHTML 5 value 获取元素的值。
三者区别:当一个元素内没有嵌套元素,此时text和html获取的内容是一致。当嵌套子元素的时候,html获取是子元素而text只是文本内容。
属性:
1 attributes // 获取所有标签属性 2 setAttribute(key,value) // 设置标签属性 3 getAttribute(key) // 获取指定标签属性
/* var atr = document.createAttribute("class"); atr.nodeValue="aclass"; document.getElementById('m').setAttributeNode(atr); */
标签操作:
创建标签:
方式一:
var tag = document.createElement('a') tag.innerText = "evil" tag.className = "2" tag.href = "http://www.cnblogs.com/evil_liu"
方式二:
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>evilliu</a>"
操作标签:
1 // 方式一 2 var obj = "<input type='text' />"; 3 xxx.insertAdjacentHTML("beforeEnd",obj); 4 xxx.insertAdjacentElement('afterBegin',document.createElement('p')) 5 6 //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' 7 8 // 方式二 9 var tag = document.createElement('a') 10 xxx.appendChild(tag) 11 xxx.insertBefore(tag,xxx[1])
样式操作:
1 var obj = document.getElementById('m') 2 3 obj.style.fontSize = "22px"; 4 obj.style.backgroundColor = "green";
位置操作:
1 总文档高度 2 document.documentElement.offsetHeight 3 4 当前文档占屏幕高度 5 document.documentElement.clientHeight 6 7 自身高度 8 tag.offsetHeight 9 10 距离上级定位高度 11 tag.offsetTop 12 13 父定位标签 14 tag.offsetParent 15 16 滚动高度 17 tag.scrollTop
四:事件绑定:
注意:
1 对于事件需要注意的要点: 2 3 this 4 event 5 事件链以及跳出 6 7 this标签当前正在操作的标签,event封装了当前事件的内容。
1:事件绑定代码:
需求我们在输入框的时候,有默认内容,点击输入的时候消失。
code:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="text" id="OK" value="请输入关键字" onfocus="FOC()" onblur="BLU()"/> 9 //onfocues onblur表示事件触发。前一个表示聚焦,点鼠标点击input框执行操作,后一个当鼠标移开之后触发。 10 <script> 11 function FOC() { 12 var t=document.getElementById('OK'); 13 if (t.value=='请输入关键字'){ 14 t.value='' 15 } 16 } 17 function BLU() { 18 var a=document.getElementById('OK'); 19 if (a.value.trim().length==0){//判断输入的内容是否为空。 20 a.value='请输入关键字' 21 } 22 } 23 </script> 24 </body> 25 </html>
2:模拟弹出框:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none !important; 9 } 10 .shade{ 11 position: fixed; 12 top:0; 13 bottom: 0; 14 left: 0; 15 right: 0; 16 /*background-color: black;*/ 17 /*opacity: 0.6;*/ 18 background-color: rgba(0,0,0,.6); 19 z-index: 1000; 20 } 21 .modal{ 22 height: 200px; 23 width: 400px; 24 background-color: white; 25 position: fixed; 26 top: 50%; 27 left: 50%; 28 margin-left: -200px; 29 margin-top: -100px; 30 z-index: 1001; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="o" style="width: 2000px"> </div> 36 <input id='cc'type="button" value="点击" onclick="ADD()"/> 37 <div id="p" class="shade hide"></div> 38 <div id="l" class="modal hide" > 39 <a href="javascript:void(0)" onclick="HIDE()">取消</a><!--javascript:void(0)表示标签不执行任何操作相当于python里的pass 40 onclick 绑定点击事件--> 41 </div> 42 <script> 43 function ADD() { 44 var t=document.getElementById('p'); 45 var t1=document.getElementById('l'); 46 t.classList.remove('hide');//显示遮罩层和对话框 47 t1.classList.remove('hide'); 48 } 49 function HIDE() { 50 var t=document.getElementById('p'); 51 var t1=document.getElementById('l'); 52 t.classList.add('hide');//显示遮罩层和对话框 53 t1.classList.add('hide'); 54 } 55 </script> 56 </body> 57 </html>
返回顶部实现:
code:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .back{ 8 position: fixed; 9 right: 20px; 10 bottom: 20px; 11 color: red; 12 font-family: "微软雅黑"; 13 } 14 .hide{ 15 display: none; 16 } 17 </style> 18 19 </head> 20 <body onscroll="APPER()">//对于一个html来body和title都是唯一的。 21 <div style="height: 5000px;background-color: gray;"></div> 22 <div class=" back hide" id="back" onclick="BackTop()" >返回顶部</div> 23 <script> 24 function BackTop() { 25 document.body.scrollTop=0 26 } 27 28 function APPER() { 29 var s=document.body.scrollTop;//必须在这里,触发的时候,才读取此时的高度。 30 var tag=document.getElementById('back'); 31 console.log(s,tag); 32 33 if (s >=100){ 34 35 tag.classList.remove('hide') 36 }else { 37 tag.classList.add('hide') 38 } 39 } 40 </script> 41 </body> 42 </html>
验证用户输入是否有效:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="http://www.baidu.com"> 9 <div> 10 <input type="text" id="username" /> 11 </div> 12 <input type="submit" value="提交" onclick=" return CL()"/><!--当执行函数return值为true的时候,执行下一个事件 13 反之不执行。--> 14 </form> 15 <script> 16 function CL() { 17 var t=document.getElementById('username'); 18 if ( t.value.length >0){ 19 return true 20 }else { 21 alert('输入用户名不能为空') 22 return false 23 } 24 } 25 </script> 26 </body> 27 </html>
学习是一种态度,坚持是质变的利器!