循序渐进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  // 上一个兄弟标签元素
更多： http://www.cnblogs.com/wupeiqi/articles/5643298.html 


二、操作
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()           重新加载






来看一个搜索框默认值点击消失的例子：（内容操作）





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <input id="l1" type="text" value="请输入" onfocus="Clear();" onblur="Writeback();" />

    <script type="text/javascript">
//        函数名开头必须大写
        function Clear() {
            var  tag=document.getElementById('l1');
            if(tag.value == "请输入"){
                tag.value = "";
            }
        }

        function Writeback() {
            var con=document.getElementById("l1");
            if(con.value === ""){
                con.value = "请输入"
            }
        }
    </script>

</body>
</html>





静态对话框 实现（dom 样式操作）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            left:0;
            right: 0;
            top:0;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            z-index: 100;
        }
        .middle{
            position: fixed;
            height: 200px;
            width: 400px;
            top:50%;
            left:50%;
            margin-left:-200px;
            margin-top:-100px;
            background-color: #cccccc;
            z-index: 101;
        }
        .mid1{
            margin-left: 100px;
            margin-top: 120px;
        }
        .mid2{
            float: right;
            margin-right: 100px;
            margin-top: 120px;
        }
    </style>
</head>
<body>
    <input type="button" value="测试" onclick="Showup();"/>
    <div id="l1" class="shadow hide"></div>
    <div id="l2" class="middle hide">
        <input id="l3" type="button" value="确定" class="hide mid1" onclick="Goaway();" />
        <input id="l4" type="button" value="取消" class="hide mid2" onclick="Goaway();" />
    </div>

    <script type="text/javascript">
        function Showup() {
            var tag1 = document.getElementById("l1");
            var tag2 = document.getElementById("l2");
            var tag3 = document.getElementById("l3");
            var tag4 = document.getElementById("l4");
            tag1.classList.remove("hide");
            tag2.classList.remove("hide");
            tag3.classList.remove("hide");
            tag4.classList.remove("hide");
        }
        function Goaway() {
            var tag1 = document.getElementById("l1");
            var tag2 = document.getElementById("l2");
            var tag3 = document.getElementById("l3");
            var tag4 = document.getElementById("l4");
            tag1.classList.add("hide");
            tag2.classList.add("hide");
            tag3.classList.add("hide");
            tag4.classList.add("hide");
        }
    </script>
</body>
</html>




全选 取消 反选 的实现


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选"  onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="CancelAll();"/>
    <input type="button" value="反选" onclick="ReverseCheck();"/>

    <table border="1" >
        <thead>

        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = true;
                }
            }
        }

        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }

        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }

    </script>
</body>
</html>


点赞小列子的实现：（创建，操作标签--document.createElement）



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test16</title>
</head>
<body>
    <a style="top: 100px;position: relative;" onclick="Favor(this);">点赞</a>
    <script >
        function Favor(ths){
            // ths => this => 当前触发的标签
            var top = 49;
            var left = 71;
            var op = 1;
            var fontSize = 18;

            var tag = document.createElement('span');
            tag.innerText = '+1';
            tag.style.position = 'absolute';
            tag.style.top = top + "px";
            tag.style.left = left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + 'px';
            ths.parentElement.appendChild(tag);

            var interval = setInterval(function(){
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.1;

                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + 'px';
                if(op <= 0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            }, 50);
        }
    </script>
</body>
</html>





定时器列子：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="status" style="color: red;">

    </div>
    <input type="submit" onclick="DeleteStatus();" value="删除" />

    <script>
        function DeleteStatus(){
            var s = document.getElementById('status');
            s.innerText = '删除成功';
            setTimeout(function(){
                s.innerText = "";
            },5000);
        }
    </script>
</body>
</html>


返回顶部：（document.body.scrollTop）



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            right: 20px;
            bottom: 20px;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
    <script>
        function BackTop(){
            document.body.scrollTop = 0;
        }
        function BodyScroll(){
            var s = document.body.scrollTop;
            var t = document.getElementById('back');
            if(s >= 100){
                t.classList.remove('hide');
            }else{
                t.classList.add('hide');
            }
        }
    </script>
</body>
</html>


dom提交表单



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="f1">
        <input type="text" />
        <input type="submit" value="提交"/>
        <a onclick="Submit()">提交</a>
    </form>
    <script>
        function Submit(){
            var form = document.getElementById('f1');
            form.submit();
        }
    </script>
</body>
</html>


跑马灯



<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>    
    </body>
</html>





三、事件




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


event示例：



window.onkeydown = function(event){
            //console.log(event);
            if(event.keyCode == 27){
                HideModal();
            }
        }


用户验证示例：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="username" />
        <input type="submit" value="提交" onclick="return SubmitForm();" />
    </form>
    <script>
        function SubmitForm(){
            var user = document.getElementById('username');
            if(user.value.length > 0 ){
                // 可以提交
                return true;
            }else{
                // 不可提交，提示错误
                alert('用户名输入不能为空');
                return false;
            }
        }
    </script>
</body>
</html>


事件优先级示例：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="http://www.baidu.com" onclick="ClickB();">百度</a>
    <form>
        <input type="text" />
        <input type="submit" onclick="ClickB();" />
    </form>

    <input type="checkbox" onclick="ClickB();" />
    <script>
        function ClickB(){
            alert(123);
        }
    </script>
</body>
</html>

来自为知笔记(Wiz)

循序渐进Python3（十一） --3-- web之dom的更多相关文章

Spring 4 官方文档学习（十一）Web MVC 框架之配置Spring MVC
内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置类型转换和格式化校验拦截器内容协商 View Controllers View Reso ...
循序渐进学.Net Core Web Api开发系列【0】：序言与目录
一.序言我大约在2003年时候开始接触到.NET,最初在.NET framework 1.1版本下写过代码,曾经做过WinForm和ASP.NET开发.大约在2010年的时候转型JAVA环境,这么多 ...
循序渐进学.Net Core Web Api开发系列【16】：应用安全续-加密与解密
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述应用安全除 ...
循序渐进学.Net Core Web Api开发系列【15】：应用安全
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述本篇介绍W ...
循序渐进学.Net Core Web Api开发系列【14】：异常处理
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述本篇介绍异 ...
循序渐进学.Net Core Web Api开发系列【13】：中间件（Middleware）
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述本篇介绍如 ...
循序渐进学.Net Core Web Api开发系列【12】：缓存
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述本篇介绍如 ...
循序渐进学.Net Core Web Api开发系列【11】：依赖注入
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述本篇介绍如 ...
循序渐进学.Net Core Web Api开发系列【10】：使用日志
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述本篇介 ...
循序渐进学.Net Core Web Api开发系列【9】：常用的数据库操作
系列目录循序渐进学.Net Core Web Api开发系列目录本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述本篇描述一 ...

随机推荐

Python DES 加密解密，就是大家所谓想要的那个非常快速的方法
这个要借助Crypto.Cipher这个插件来实现的,引用后只需要写如下代码即可 from Crypto.Cipher import DES class MyDESCrypt: key = chr(1 ...
利用微软AntiXss Library过滤输出字符，防止XSS攻击
假如项目在前期没有过滤客户提交的字符,那么可以在输出的时候,对输出的字符进行过滤,防止出现XSS跨域攻击. 原理简单:利用ASP.NET API的管道原理,在MessageHandlers中添加一个自 ...
html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
升级到VS2013.Update.4的问题
升级到VS2013.Update.4后,编译VS2010的解决方案出错,提示AxImp.exe找不到,到网上搜索后,没有找到能用的法子: 修复VS2013后也无法解决: 折腾2个小时后终于找到问题了: ...
[JavaScript]配置日期选择控件
我选择的日期控件是:bootstrap-datepicker(下载路径:https://github.com/Aymkdn/Datepicker-for-Bootstrap) 比较方便,实用.原来是英 ...
Android学习起步 - 新建工程及相关
新手起步迷迷糊糊,以下记录迷惑之处,大家共勉!!! 1.创建安卓应用工程选择Andriod Application Project 点下一步直到完成. 二.下面是新建工程注意的地方 (1)首选删除系 ...
public static void Invoke (Action action)
using System; using System.Security.Principal; using System.Security.Permissions; namespace Demo { c ...
Jmeter组件8. BeanShell Sampler
BeanShell是一个小巧免费的JAVA源码解释器,支持对象式的脚本语言特性,亦可嵌入到JAVA源代码中,能动态执行JAVA源代码并为其扩展了脚本语言的一些特性,像JavaScript和perl那样 ...
js截取url的参数（转自。。）
用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg ...
Take advantage of “Integrated Calling” to know whom suspect talked to
A new feature in iOS 10 is "Integrated Calling". An integrated call from Chat App like Nav ...

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

查找元素

二、操作

dom提交表单

三、事件

循序渐进Python3（十一） --3-- web之dom的更多相关文章

随机推荐

热门专题