循序渐进Python3 --3-- ?web之dom

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了循序渐进Python3 --3-- ?web之dom相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章

循序渐进Python3 --2-- web之javascript

web框架之Vue渐进式框架-安装入门简介(python3入门)

循序渐进Python3（十三） --7--  django之models

循序渐进Python3（十三） --0-- django之form表单

循序渐进Python3 --5-- 同源策略

Python之循序渐进