• 循序渐进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>
  • 相关阅读:
    判断一个数是否为素数的方法
    什么是算法？
    table 表格
    状态模式
    设计模式
    观察者模式
    async函数
    JS单线程和异步
    ES6 --- Promise
    浅析flex 布局
  • 原文地址：https://www.cnblogs.com/wumingxiaoyao/p/6074280.html
Copyright © 2020-2023  润新知