JS

DOM介绍

DOM，英文是Document Object Model，中文名叫文档对象模型。
把一个html网页抽象为一个文档对象

01DOM元素查找

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         #div3{
  10.             /*  */
  11.             background-color: aqua;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="div3">渗透测试</div>
  17.     <div id="div2">web安全</div>
  18.     <div id="div1">web基础</div>
  19.     <ul id="ul1" class="cls1">
  20.         <li>html</li>
  21.         <li>css</li>
  22.         <li>javascript</li>
  23.     </ul>
  24.     <ul id="ul2" class="cls2">
  25.             <li>web漏洞</li>
  26.             <li>代码审计</li>
  27.             <li>提权维持</li>
  28.             <li>服务器加固</li>
  29.         </ul>
  31.     <script type="text/javascript">
  32.         // 通过id获取网页元素对象
  33.         var div = document.getElementById("div1");
  34.         console.log(div);
  35.         // 通过标签名，获取一组网页元素
  36.         var divs = document.getElementsByTagName("div");
  37.         console.log(divs);
  38.         // 获取一组元素，设置每一个元素的样式
  39.         // 1. 获取父标签对象
  40.         var ul = document.getElementById("ul1");
  41.         console.log(ul);
  42.         // 2. 获取子标签
  43.         var lis = ul.getElementsByTagName("li");
  44.         var len = lis.length;
  45.         console.log(len);
  46.         for(var i=0; i<len; i++){
  47.             if(i == 1){
  48.                 // 样式属性，名称一般采用的是驼峰命名法
  49.                 lis[i].style.backgroundColor = "blue";
  50.             }
  51.         }
  54.     </script>
  55. </body>
  56. </html>

02DOM的一些属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         #div3{
  10.             /*  */
  11.             background-color: aqua;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="div3">渗透测试</div>
  17.     <div id="div2">web安全</div>
  18.     <div id="div1">web基础</div>
  19.     <ul id="ul1" class="cls1">
  20.         <li>html</li>
  21.         <li>css</li>
  22.         <li>javascript</li>
  23.     </ul>
  24.     <ul id="ul2" class="cls2">
  25.             <li>web漏洞</li>
  26.             <li>代码审计</li>
  27.             <li>提权维持</li>
  28.             <li>服务器加固</li>
  29.         </ul>
  31.     <script type="text/javascript">
  32.         // 获取标签对象
  33.         var div = document.getElementById("div1");
  34.         // 获取innerHTML文本
  35.         console.log(div.innerHTML);
  36.         // 修改innerHTML文本
  37.         div.innerHTML = "web漏洞";
  38.         console.log(div.innerHTML);
  41.     </script>
  42. </body>
  43. </html>

03DOMClass属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         #div3{
  10.             /*  */
  11.             background-color: aqua;
  12.         }
  13.         .cls3{
  14.             background-color: cyan;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="div3">渗透测试</div>
  20.     <div id="div2">web安全</div>
  21.     <div id="div1">web基础</div>
  22.     <ul id="ul1" class="cls1">
  23.         <li>html</li>
  24.         <li>css</li>
  25.         <li>javascript</li>
  26.     </ul>
  27.     <ul id="ul2" class="cls2">
  28.             <li>web漏洞</li>
  29.             <li>代码审计</li>
  30.             <li>提权维持</li>
  31.             <li>服务器加固</li>
  32.         </ul>
  34.     <script type="text/javascript">
  35.         //  获取元素
  36.         var ul = document.getElementById("ul1");
  37.         // 获取类名
  38.         console.log(ul.className);
  39.         // 修改类属性
  40.         ul.className = "cls3";
  42.     </script>
  43. </body>
  44. </html>

04DOM自定义属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         /* #div3{
  10.             background-color: aqua;
  11.         } */
  12.         .cls3{
  13.             background-color: cyan;
  14.         }
  15.         .cls4{
  16.             background-color: red;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="div3" class="cls3" hello="15pb">渗透测试</div>
  22.     <div id="div2">web安全</div>
  23.     <div id="div1">web基础</div>
  24.     <ul id="ul1" class="cls1">
  25.         <li>html</li>
  26.         <li>css</li>
  27.         <li>javascript</li>
  28.     </ul>
  29.     <ul id="ul2" class="cls2">
  30.             <li>web漏洞</li>
  31.             <li>代码审计</li>
  32.             <li>提权维持</li>
  33.             <li>服务器加固</li>
  34.         </ul>
  36.     <script type="text/javascript">
  37.        var div = document.getElementById("div3");
  38.         // 获取自定义属性
  39.        var hello = div.getAttribute("hello");
  40.        console.log(hello);
  41.        // 获取本身有的一些属性
  42.        var cls3 = div.getAttribute("class");
  43.        console.log(cls3);
  44.        // 设置属性
  45.        div.setAttribute("hello", "world");
  46.        div.setAttribute("class","cls4");
  47.         // 重新获取输出
  48.     var hello = div.getAttribute("hello");
  49.        console.log(hello);
  50.        var cls3 = div.getAttribute("class");
  51.        console.log(cls3);
  52.         // 删除属性
  53.        div.removeAttribute("class");
  55.     </script>
  56. </body>
  57. </html>

05DOM事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         /* #div3{
  10.             background-color: aqua;
  11.         } */
  12.         .cls3{
  13.             background-color: cyan;
  14.         }
  15.         .cls4{
  16.             background-color: red;
  17.         }
  18.         #div1{
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: aqua;
  22.         }
  23.     </style>
  24. </head>
  25. <body onload="fun1()">
  27.      <input type="button" value="按钮" onclick="fun2()">
  28.      <input type="text" name="" id="" onfocus="onfocus1()" onblur="onblur1()">
  29.      <textarea name="" id="" cols="30" rows="10" onchange="onchange1()" ></textarea>
  30.      <div id="div1" onmouseover="onmouseover1()" onmouseout="onmouseout1()"></div>
  32.      <!--<div id="div3" class="cls3" hello="15pb">渗透测试</div>
  33.     <div id="div2">web安全</div>
  34.     <div id="div1">web基础</div>
  35.     <ul id="ul1" class="cls1">
  36.         <li>html</li>
  37.         <li>css</li>
  38.         <li>javascript</li>
  39.     </ul>
  40.     <ul id="ul2" class="cls2">
  41.             <li>web漏洞</li>
  42.             <li>代码审计</li>
  43.             <li>提权维持</li>
  44.             <li>服务器加固</li>
  45.     </ul> -->
  47.     <script type="text/javascript">
  48.     // js中定义好函数
  49.       function fun1(){
  50.         console.log("hello world");
  51.       }
  53.       function fun2(){
  54.         alert('测试');
  55.       }
  57.       function onmouseover1(){
  58.         console.log("鼠标滑过");
  59.       }
  60.       function onmouseout1(){
  61.         console.log("鼠标移出");
  62.       }
  63.       function onfocus1(){
  64.         console.log("获取焦点");
  65.       }
  66.       function onblur1(){
  67.         console.log("失去焦点");
  68.       }
  69.       function onchange1(){
  70.         console.log("文本改变");
  71.       }
  72.     </script>
  73. </body>
  74. </html>

06DOM0事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         /* #div3{
  10.             background-color: aqua;
  11.         } */
  12.         .cls3{
  13.             background-color: cyan;
  14.         }
  15.         .cls4{
  16.             background-color: red;
  17.         }
  18.         #div1{
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: aqua;
  22.         }
  23.     </style>
  24. </head>
  25. <body onload="fun1()">
  27.      <input type="button" value="按钮"" id="btn1">
  28.      <input type="text" name="" id="edttext">
  29.      <textarea name="" cols="30" rows="10" id="text1" ></textarea>
  30.      <div id="div1" ></div>
  32.      <!--<div id="div3" class="cls3" hello="15pb">渗透测试</div>
  33.     <div id="div2">web安全</div>
  34.     <div id="div1">web基础</div>
  35.     <ul id="ul1" class="cls1">
  36.         <li>html</li>
  37.         <li>css</li>
  38.         <li>javascript</li>
  39.     </ul>
  40.     <ul id="ul2" class="cls2">
  41.             <li>web漏洞</li>
  42.             <li>代码审计</li>
  43.             <li>提权维持</li>
  44.             <li>服务器加固</li>
  45.     </ul> -->
  47.     <script type="text/javascript">
  48.     // js中定义好函数
  49.       function fun1(){
  50.         console.log("hello world");
  51.       }
  52.       function onclick1(){
  53.         alert('测试');
  54.       }
  55.       function onmouseover1(){
  56.         console.log("鼠标滑过");
  57.       }
  58.       function onmouseout1(){
  59.         console.log("鼠标移出");
  60.       }
  61.       function onfocus1(){
  62.         console.log("获取焦点");
  63.       }
  64.       function onblur1(){
  65.         console.log("失去焦点");
  66.       }
  67.       function onchange1(){
  68.         console.log("文本改变");
  69.       }
  71.       // 1. 获取元素
  72.       var btn1 = document.getElementById("btn1");
  73.       // 2. 指定事件
  74.       btn1.onclick = onclick1;
  76.       var edt = document.getElementById("edttext");
  77.       // 函数变量赋值，onfocus1就是一个函数
  78.       // 相当于 a=1, b=a, b=1
  79.       edt.onfocus = onfocus1;
  80.       // 匿名函数
  81.       edt.onblur = function(){
  82.           console.log("失去了焦点");
  83.       }
  84.       // 
  85.       var div = document.getElementById("div1"); 
  86.       div.onmouseover = onmouseover1;
  87.       div.onmouseout = onmouseout1;
  89.       var text = document.getElementById("text1"); 
  90.       text.onchange = onchange1;
  92.     </script>
  93. </body>
  94. </html>

07DOM事件2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.       /* #div3{
  10.             background-color: aqua;
  11.         } */
  12.       .cls3 {
  13.         background-color: cyan;
  14.       }
  15.       .cls4 {
  16.         background-color: red;
  17.       }
  18.       #div1 {
  19.         width: 200px;
  20.         height: 200px;
  21.         background-color: aqua;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body onresize="onresize1()" onscroll="onscroll1()">
  26.     <!-- 表单指定onsubmit属性，在提交按钮被点击时会触发 -->
  27.     <form action="" onsubmit="sub()">
  28.       <input type="button" value="按钮"" id="btn1">
  29.       <input type="text" name="" id="edttext" />
  30.       <input type="submit" />
  31.     </form>
  32.     <script type="text/javascript">
  33.       function onresize1() {
  34.         console.log("改变窗口");
  35.       }
  36.       function onscroll1() {
  37.         console.log("滚动");
  38.       }
  39.       function sub() {
  40.         alert("确认");
  41.       }
  43.       var btn1 = document.getElementById("btn1");
  44.       btn1.onmousedown = function() {
  45.         console.log("鼠标按下");
  46.       };
  47.       btn1.onmouseup = function() {
  48.         console.log("鼠标弹起");
  49.       };
  50.       btn1.onmousemove = function() {
  51.         console.log("鼠标移动");
  52.       };
  53.     </script>
  54.   </body>
  55. </html>

08键盘事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <label id="label1">当前已输入</label><br/>
  11.     <input type="button" value="按钮"" id="btn1">
  12.     <input type="text" name="" id="edttext">
  13.     <textarea name="" cols="30" rows="10" id="text1" ></textarea>
  14.     <div id="div1" ></div>
  15.     <script type="text/javascript">
  17.     var text1 = document.getElementById("text1");
  18.     text1.onkeydown = function(){
  19.         // console.log("onkeydown");
  20.     }
  21.     // 数字、字母按下时才会触发
  22.     var num1 = 0;
  23.     // text1.onkeypress = function(){
  24.     //     console.log("onkeypress");
  25.     //     num1++;
  26.     //     // 1. 获取元素
  27.     //     var label1 = document.getElementById("label1");
  28.     //     // 2. 修改属性
  29.     //     label1.innerHTML = "当前已输入" + num1 + "个字符";
  31.     //     // 获取输入的字符
  33.     // }
  34.     text1.onkeypress = function(e){
  35.         console.log("onkeypress");
  36.         num1++;
  37.         // 1. 获取元素
  38.         var label1 = document.getElementById("label1");
  39.         // 2. 修改属性
  40.         label1.innerHTML = "当前已输入" + num1 + "个字符";
  42.         // 获取输入的字符
  43.         var ch = String.fromCharCode(e.keyCode);
  44.         console.log(ch);
  45.     }
  46.     text1.onkeyup = function(){
  47.         // console.log("onkeyup");
  48.     }
  50.     </script> 
  52. </body>
  53. </html>

08DOM对象this

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         /* #btn1{
  10.             width: 200px;
  11.         } */
  12.     </style>
  13. </head>
  14. <body>
  15.     <label id="label1">当前已输入</label><br/>
  16.     <input type="button" value="按钮"" id="btn1" onclick="onclick1(this)">
  17.     <input type="button" value="按钮2"" id="btn2" onclick="onclick2(this)">
  19.     <input type="text" name="" id="edttext">
  20.     <textarea name="" cols="30" rows="10" id="text1" ></textarea>
  21.     <div id="div1" ></div>
  22.     <script type="text/javascript">
  23.         function onclick1(){
  24.             // this.value = "按钮2";
  25.             var obj = arguments[0];
  26.             obj.value = "按钮2";
  27.             // 设置样式，对象.style.样式名
  28.             obj.style.backgroundColor = "red";
  29.             obj.style.width = "200px";
  30.             console.log("onclick1");
  31.         }
  33.         function onclick2(obj){
  34.             obj.value = "按钮2";
  35.             // 设置样式，对象.style.样式名
  36.             obj.style.height = "200px";
  37.             obj.style.backgroundColor = "red";
  38.             obj.style.width = "200px";
  39.             console.log("onclick1");
  40.         }
  42.     </script> 
  44. </body>
  45. </html>

09BOM对象window

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>BOM对象</title>
  8. </head>
  9. <body>
  10.     <input type="button" value="按钮" onclick="onclick1()">
  11.         <script type="text/javascript">
  12.         function test(){
  13.             // window对象
  14.             var bret = window.confirm("你确定要做更改吗?");   
  15.                 if(bret == true){
  16.                     window.alert("是的修改完毕");
  17.                 } else {
  18.                     window.alert("取消修改");
  19.                 }
  20.         }
  21.         function onclick1(){
  22.             // window.open("./08键盘事件.html");
  24.             var myWindow=window.open('','','width=200,height=100')
  25.             myWindow.document.write("This is 'myWindow'")
  26.             myWindow.focus();
  27.             // 设置超时调用
  28.             // 参数1，要执行的js代码
  29.             // 参数2，超时毫秒数
  30.             var timeid = setTimeout(function(){
  31.                 myWindow.close();
  32.                 // 清除时间调用
  33.                 clearTimeout(timeid);
  34.             }, 1000);
  37.         }
  38.         </script> 
  39. </body>
  40. </html>

10BOM对象间歇调用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <label id="label1">当前计时：0</label>
  11.     <!-- <input type="text" name="" id="" /> -->
  12.     <input type="button" value="计时开始" onclick="onclick1(this)" />
  13.     <script type="text/javascript">
  14.       var timecount = 0;
  15.       var isStart = false;
  16.       var timeid = null;
  17.       function onclick1(obj) {
  18.         if (isStart == false) {
  19.             // 设置间歇调用
  20.             timeid = setInterval(function() {
  21.             // 1. 获取label
  22.             var label1 = document.getElementById("label1");
  23.             // 2. 修改label
  24.             timecount++;
  25.             label1.innerHTML = "当前计时：" + timecount;
  26.           }, 1000);
  27.           // 改变布尔值
  28.           isStart = true;
  30.           // 设置按钮文本
  31.           obj.value = "关闭计时";
  32.         } else {
  33.             clearInterval(timeid);
  34.             isStart = false;
  35.             obj.value = "计时开始";
  37.             // 1. 获取label
  38.             var label1 = document.getElementById("label1");
  39.             // 2. 修改label
  40.             timecount = 0;
  41.             label1.innerHTML = "当前计时：" + timecount;
  43.         }
  44.       }
  45.     </script>
  46.   </body>
  47. </html>

11BOM对象location对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <label id="label1">当前计时：0</label>
  11.     <!-- <input type="text" name="" id="" /> -->
  12.     <input type="button" value="按钮" onclick="onclick1(this)" />
  13.     <script type="text/javascript">
  14.     function onclick1(obj){
  15.         // 获取当前文档的路径
  16.         var url = location.href;
  17.         // 路径是url编码形式的
  18.         console.log(url);
  19.         // 如果不包含hash信息，返回空
  20.         var hash = location.hash;
  21.         console.log(hash);
  22.         // 如果不包含字段信息，返回空
  23.         var host = location.host;
  24.         console.log(host);
  25.         var hostname = location.hostname;
  26.         console.log(hostname);
  27.         var pathname = location.pathname;
  28.         console.log(pathname);
  30.         var port = location.port;
  31.         console.log(port);
  32.         var protocol = location.protocol;
  33.         console.log(protocol);
  34.         var search = location.search;
  35.         console.log(search);
  37.         // 重新加载一下文档
  38.         location.reload();
  39.         // 打开一个新的文档，替换之
  40.         location.replace("./02DOM的一些属性.html");
  41.     }
  42.     </script>
  43.   </body>
  44. </html>

12BOM对象history

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <label id="label1">网页1</label><br />
  11.     <!-- <input type="text" name="" id="" /> -->
  12.     <input type="button" value="按钮1" onclick="onclick1(this)" />
  13.     <input type="button" value="返回上一步" onclick="onclick2(this)" />
  14.     <input type="button" value="前进一步" onclick="onclick3(this)" />
  16.     <script type="text/javascript">
  17.       function onclick1(obj) {
  18.         window.open("./12BOM对象history.html", "", "", true);
  19.       }
  20.       function onclick2(obj) {
  21.         // 返回上一个页面
  22.         history.back();
  23.       }
  25.       function onclick3(obj) {
  26.         // 前进一步
  27.         history.forward();
  28.       }
  29.     </script>
  30.   </body>
  31. </html>

13BOM对象history2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <label id="label1">网页2</label><br />
  11.     <!-- <input type="text" name="" id="" /> -->
  12.     <input type="button" value="获取历史记录" onclick="onclick0(this)" />
  14.     <input type="button" value="指定跳转到某一步" onclick="onclick1(this)" />
  15.     <input type="button" value="返回上一步" onclick="onclick2(this)" />
  16.     <input type="button" value="前进一步" onclick="onclick3(this)" />
  18.     <script type="text/javascript">
  19.      function onclick0(obj) {
  20.         var len = history.length;
  21.         console.log("历史记录："+ len + " " + history);
  22.       }
  23.       function onclick1(obj) {
  24.         history.go(1);
  25.       }
  26.       function onclick2(obj) {
  27.         // 返回上一个页面
  28.         history.back();
  29.       }
  30.       function onclick3(obj) {
  31.         // 返回上一个页面
  32.         history.back();
  33.       }
  34.       function onclick3(obj) {
  35.         // 前进一步
  36.         history.forward();
  37.       }
  38.     </script>
  39.   </body>
  40. </html>

14Screen对象属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.         <input type="button" value="获取屏幕信息" onclick="onclick0(this)" />
  12.     <script type="text/javascript">
  13.         function onclick0(obj){
  14.             console.log("高度:" + screen.availHeight);
  15.             console.log("宽度:" + screen.availWidth); 
  16.         }
  17.     </script>
  18. </body>
  19. </html>

15BOM对象navigator对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.         <script type="text/javascript">
  11.             document.write("<p>UserAgent: ")
  12.             document.write(navigator.userAgent + "</p>")
  13.             </script>
  14. </body>
  15. </html>

python之urlib模块

python2.7

1.

  1. # coding=utf-8
  2. # py 2.7 ,urllib的使用，直接调用函数
  3. import requests
  4. import urllib
  6. url = "http://www.baidu.com";
  8. r = urllib.urlopen(url);
  9. print(r.getcode());
  10. print(r.geturl());
  11. print(r.info());
  12. # print(r.read());
  13. #print(r.readline());
  14. # print(r.readlines());
  15. #print(r.fileno());
  16. #print r.close();

2.

  1. # coding=utf-8
  2. # py 2.7 ,urllib的使用，直接调用函数
  3. import requests
  4. import urllib
  6. dict = {'name': '我是谁', 'age': 200}
  7. url = urllib.urlencode(dict);
  8. print url;

python3.7

  1. import urllib.request
  2. # py 3.7
  3. # urllib 是 python内置的HTTP请求库
  5. # urllib.request 请求模块
  6.    # urllib.request.urlopen(url) 访问网页，返回源码
  7.    # urllib.parse.urlencode(dict) 将dict或者包含两个元素的元组列表转换成url参数。
  10. # urllib.request.urlopen(url)
  11. # 创建一个表示远程url的类文件对象，然后像本地文件一样操作这个类文件对象来获取远程数据。
  12. #info()：返回HTTPMessage对象，表示远程服务器返回的头信息。
  13. url = 'http://www.baidu.com'
  14. res = urllib.request.urlopen(url)
  15. # print(res.info())
  16. #getcode()：返回Http状态码。
  17. # print(res.getcode())
  18. #geturl()：返回请求的url。
  19. # print(res.geturl())
  21. # read(),readline(),readlines(),fileno(),close()：对HTTPResponse类型数据进行操作。
  22. # print(res.read())
  24. # urllib.parse.urlencode(dict)
  25. #将dict或者包含两个元素的元组列表转换成url参数。
  26. #如:字典{'name': ‘hell15pb', 'age': 200}将被转换为"name=hell15pb&age=200"
  27. # https://tieba.baidu.com/f?ie=utf-8&kw=篮球&fr=search
  28. dict = {'ie': 'utf-8','kw': '篮球','fr':'search'}
  29. url = 'https://tieba.baidu.com/f?'
  30. data = urllib.parse.urlencode(dict)
  31. print(url+data)

python之re模块实例

1.

  1. import urllib.request
  2. import re
  3. # python 3.7
  4. url = 'https://www.huya.com/'
  5. r = urllib.request.urlopen(url);
  6. # print(r.read().decode('utf-8'))
  7. ret = re.findall('target="_blank">(.*)</a></dd>', r.read().decode('utf-8'));
  9. for i in range(0,len(ret)):
  10.     print(ret[i])

2.

  1. import re
  2. import urllib.request
  4. url = 'http://jandan.net/ooxx'
  5. res = urllib.request.urlopen(url)
  6. # print(res.read().decode('utf-8'))
  7. ret = re.findall('</span><p><a href="(.*)" target="_blank"', res.read().decode('utf-8'));
  8. for i in range(0,len(ret)):
  9.     print("http:"+ret[i])