码迷，mamicode.com
首页 > 编程语言 > 详细

循序渐进Python3（十一） --3-- ?web之dom

时间：2016-11-17 20:16:06      阅读：286      评论：0      收藏：0      [点我收藏+]

标签：距离   user   标签   方式   blog   title   margin   border   absolute   

DOM         
        文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

查找元素

1、直接查找
document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合
2、间接查找
parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素


二、操作

1、内容
innerText   文本
outerText
innerHTML   HTML内容
outnerHTML  
value       值
2、属性
attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
例子如下：
技术分享
 
3、class操作
className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类
4.样式
var obj = document.getElementById(‘i1‘)
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

效果如下：
技术分享
 
----------------------------------------------------------------------------------
5、标签操作

a.创建标签

// 方式一
var tag = document.createElement(‘a‘)
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/wupeiqi‘>wupeiqi"
b.操作标签
// 方式一
var obj = "<input type=‘text‘ />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘))
 
//注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
 
// 方式二
var tag = document.createElement(‘a‘)
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])


6、定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

7、位置操作
总文档高度
document.documentElement.offsetHeight
  
当前文档占屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距离上级定位高度
tag.offsetTop
  
父定位标签
tag.offsetParent
  
滚动高度
tag.scrollTop

clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
看效果：
技术分享
8、提交表单
  document.geElementById(‘form‘).submit()
9、其他
console.log                 输出框
alert                       弹出框
confirm                     确认框   确定-->true 取消-->false
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载

来看一个搜索框默认值点击消失的例子：（内容操作）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6. </head>
  7. <body>
  8.     <input id="l1" type="text" value="请输入" onfocus="Clear();" onblur="Writeback();" />
  10.     <script type="text/javascript">
  11. //        函数名开头必须大写
  12.         function Clear() {
  13.             var  tag=document.getElementById(‘l1‘);
  14.             if(tag.value == "请输入"){
  15.                 tag.value = "";
  16.             }
  17.         }
  19.         function Writeback() {
  20.             var con=document.getElementById("l1");
  21.             if(con.value === ""){
  22.                 con.value = "请输入"
  23.             }
  24.         }
  25.     </script>
  27. </body>
  28. </html>

静态对话框 实现（dom 样式操作）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .shadow{
  11.             position: fixed;
  12.             left:0;
  13.             right: 0;
  14.             top:0;
  15.             bottom: 0;
  16.             background-color: rgba(0,0,0,.5);
  17.             z-index: 100;
  18.         }
  19.         .middle{
  20.             position: fixed;
  21.             height: 200px;
  22.             width: 400px;
  23.             top:50%;
  24.             left:50%;
  25.             margin-left:-200px;
  26.             margin-top:-100px;
  27.             background-color: #cccccc;
  28.             z-index: 101;
  29.         }
  30.         .mid1{
  31.             margin-left: 100px;
  32.             margin-top: 120px;
  33.         }
  34.         .mid2{
  35.             float: right;
  36.             margin-right: 100px;
  37.             margin-top: 120px;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <input type="button" value="测试" onclick="Showup();"/>
  43.     <div id="l1" class="shadow hide"></div>
  44.     <div id="l2" class="middle hide">
  45.         <input id="l3" type="button" value="确定" class="hide mid1" onclick="Goaway();" />
  46.         <input id="l4" type="button" value="取消" class="hide mid2" onclick="Goaway();" />
  47.     </div>
  49.     <script type="text/javascript">
  50.         function Showup() {
  51.             var tag1 = document.getElementById("l1");
  52.             var tag2 = document.getElementById("l2");
  53.             var tag3 = document.getElementById("l3");
  54.             var tag4 = document.getElementById("l4");
  55.             tag1.classList.remove("hide");
  56.             tag2.classList.remove("hide");
  57.             tag3.classList.remove("hide");
  58.             tag4.classList.remove("hide");
  59.         }
  60.         function Goaway() {
  61.             var tag1 = document.getElementById("l1");
  62.             var tag2 = document.getElementById("l2");
  63.             var tag3 = document.getElementById("l3");
  64.             var tag4 = document.getElementById("l4");
  65.             tag1.classList.add("hide");
  66.             tag2.classList.add("hide");
  67.             tag3.classList.add("hide");
  68.             tag4.classList.add("hide");
  69.         }
  70.     </script>
  71. </body>
  72. </html>

全选 取消 反选 的实现
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选"  onclick="CheckAll();"/>
  9.     <input type="button" value="取消" onclick="CancelAll();"/>
  10.     <input type="button" value="反选" onclick="ReverseCheck();"/>
  12.     <table border="1" >
  13.         <thead>
  15.         </thead>
  16.         <tbody id="tb">
  17.             <tr>
  18.                 <td><input type="checkbox" /></td>
  19.                 <td>111</td>
  20.                 <td>222</td>
  21.             </tr>
  22.             <tr>
  23.                 <td><input type="checkbox" /></td>
  24.                 <td>111</td>
  25.                 <td>222</td>
  26.             </tr>
  27.             <tr>
  28.                 <td><input type="checkbox" /></td>
  29.                 <td>111</td>
  30.                 <td>222</td>
  31.             </tr>
  32.             <tr>
  33.                 <td><input type="checkbox" /></td>
  34.                 <td>111</td>
  35.                 <td>222</td>
  36.             </tr>
  37.         </tbody>
  38.     </table>
  39.     <script>
  40.         function CheckAll(ths){
  41.             var tb = document.getElementById(‘tb‘);
  42.             var trs = tb.childNodes;
  43.             for(var i =0; i<trs.length; i++){
  45.                 var current_tr = trs[i];
  46.                 if(current_tr.nodeType==1){
  47.                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
  48.                     inp.checked = true;
  49.                 }
  50.             }
  51.         }
  53.         function CancelAll(ths){
  54.             var tb = document.getElementById(‘tb‘);
  55.             var trs = tb.childNodes;
  56.             for(var i =0; i<trs.length; i++){
  58.                 var current_tr = trs[i];
  59.                 if(current_tr.nodeType==1){
  60.                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
  61.                     inp.checked = false;
  62.                 }
  63.             }
  64.         }
  66.         function ReverseCheck(ths){
  67.             var tb = document.getElementById(‘tb‘);
  68.             var trs = tb.childNodes;
  69.             for(var i =0; i<trs.length; i++){
  70.                 var current_tr = trs[i];
  71.                 if(current_tr.nodeType==1){
  72.                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
  73.                     if(inp.checked){
  74.                         inp.checked = false;
  75.                     }else{
  76.                         inp.checked = true;
  77.                     }
  78.                 }
  79.             }
  80.         }
  82.     </script>
  83. </body>
  84. </html>
点赞小列子的实现：（创建，操作标签--document.createElement）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test16</title>
  6. </head>
  7. <body>
  8.     <a style="top: 100px;position: relative;" onclick="Favor(this);">点赞</a>
  9.     <script >
  10.         function Favor(ths){
  11.             // ths => this => 当前触发的标签
  12.             var top = 49;
  13.             var left = 71;
  14.             var op = 1;
  15.             var fontSize = 18;
  17.             var tag = document.createElement(‘span‘);
  18.             tag.innerText = ‘+1‘;
  19.             tag.style.position = ‘absolute‘;
  20.             tag.style.top = top + "px";
  21.             tag.style.left = left + "px";
  22.             tag.style.opacity = op;
  23.             tag.style.fontSize = fontSize + ‘px‘;
  24.             ths.parentElement.appendChild(tag);
  26.             var interval = setInterval(function(){
  27.                 top -= 10;
  28.                 left += 10;
  29.                 fontSize += 5;
  30.                 op -= 0.1;
  32.                 tag.style.top = top + "px";
  33.                 tag.style.left = left + "px";
  34.                 tag.style.opacity = op;
  35.                 tag.style.fontSize = fontSize + ‘px‘;
  36.                 if(op <= 0.2){
  37.                     clearInterval(interval);
  38.                     ths.parentElement.removeChild(tag);
  39.                 }
  40.             }, 50);
  41.         }
  42.     </script>
  43. </body>
  44. </html>

定时器列子：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div id="status" style="color: red;">
  10.     </div>
  11.     <input type="submit" onclick="DeleteStatus();" value="删除" />
  13.     <script>
  14.         function DeleteStatus(){
  15.             var s = document.getElementById(‘status‘);
  16.             s.innerText = ‘删除成功‘;
  17.             setTimeout(function(){
  18.                 s.innerText = "";
  19.             },5000);
  20.         }
  21.     </script>
  22. </body>
  23. </html>
返回顶部：（document.body.scrollTop）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .back{
  8.             position: fixed;
  9.             right: 20px;
  10.             bottom: 20px;
  11.             color: red;
  12.         }
  13.         .hide{
  14.             display: none;
  15.         }
  16.     </style>
  17. </head>
  18. <body onscroll="BodyScroll();">
  19.     <div style="height: 2000px;background-color: #dddddd;"></div>
  20.     <div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
  21.     <script>
  22.         function BackTop(){
  23.             document.body.scrollTop = 0;
  24.         }
  25.         function BodyScroll(){
  26.             var s = document.body.scrollTop;
  27.             var t = document.getElementById(‘back‘);
  28.             if(s >= 100){
  29.                 t.classList.remove(‘hide‘);
  30.             }else{
  31.                 t.classList.add(‘hide‘);
  32.             }
  33.         }
  34.     </script>
  35. </body>
  36. </html>

dom提交表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <form id="f1">
  9.         <input type="text" />
  10.         <input type="submit" value="提交"/>
  11.         <a onclick="Submit()">提交</a>
  12.     </form>
  13.     <script>
  14.         function Submit(){
  15.             var form = document.getElementById(‘f1‘);
  16.             form.submit();
  17.         }
  18.     </script>
  19. </body>
  20. </html>
跑马灯
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset=‘utf-8‘ >
  5.         <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
  6.         <script type=‘text/javascript‘>
  7.             function Go(){
  8.                 var content = document.title;
  9.                 var firstChar = content.charAt(0)
  10.                 var sub = content.substring(1,content.length)
  11.                 document.title = sub + firstChar;
  12.             }
  13.             setInterval(‘Go()‘,1000);
  14.         </script>
  15.     </head>
  16.     <body>    
  17.     </body>
  18. </html>

三、事件

技术分享

注意：
this  当前触发事件的标签；
全局绑定事件  windows.onkeydown = function()
event  包含事件相关内容
默认事件：
  自定义优先：a标签 form标签
  默认优先： checkbox
  基于此，可以实现用户输入验证。

event示例：
  1. window.onkeydown = function(event){
  2.             //console.log(event);
  3.             if(event.keyCode == 27){
  4.                 HideModal();
  5.             }
  6.         }
用户验证示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <form action="http://www.baidu.com">
  9.         <input type="text" id="username" />
  10.         <input type="submit" value="提交" onclick="return SubmitForm();" />
  11.     </form>
  12.     <script>
  13.         function SubmitForm(){
  14.             var user = document.getElementById(‘username‘);
  15.             if(user.value.length > 0 ){
  16.                 // 可以提交
  17.                 return true;
  18.             }else{
  19.                 // 不可提交，提示错误
  20.                 alert(‘用户名输入不能为空‘);
  21.                 return false;
  22.             }
  23.         }
  24.     </script>
  25. </body>
  26. </html>
事件优先级示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <a href="http://www.baidu.com" onclick="ClickB();">百度</a>
  9.     <form>
  10.         <input type="text" />
  11.         <input type="submit" onclick="ClickB();" />
  12.     </form>
  14.     <input type="checkbox" onclick="ClickB();" />
  15.     <script>
  16.         function ClickB(){
  17.             alert(123);
  18.         }
  19.     </script>
  20. </body>
  21. </html>






循序渐进Python3（十一） --3-- ?web之dom

标签：距离   user   标签   方式   blog   title   margin   border   absolute   

原文地址：http://www.cnblogs.com/wumingxiaoyao/p/6074280.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！