python基础-第十一篇-11.2DOM为文档操作

　　文档对象模型（DOM）是一种用于HTML和XML文档的编程接口

节点类型

12种节点类型都有NodeType属性来表明节点类型

节点关系

    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>

    <script>
        var t = document.getElementById("t");
        console.log(t.nodeType,t.nodeName,t.nodeValue);  //1 "DIV" null
        console.log(t.parentNode);  //<body>...</body>
        console.log(t.childNodes);  //[text, span, text, span#s, text, p, text]
        console.log(t.children);  //[span, span#s, p, s: span#s]

        var s = document.getElementById("s");
        console.log(s.previousSibling);  //#text, Node 对象形式
        console.log(s.previousElementSibling);  //<span></span>
        console.log(s.nextSibling);  //#text
        console.log(s.nextElementSibling);  //<p></p>
        console.log(s.firstchild);  //#text
        console.log(s.firstElementChild);  //<a></a>
        console.log(s.lastChild);  //#text
        console.log(s.lastElementChild);  //<h1>Nick</h1>

        console.log(t.childElementCount);  //3
        console.log(t.ownerDocument);  //#document
    </script>

节点关系方法：

hasChildNodes() 包含一个或多个节点时返回true

contains() 如果是后代节点返回true

isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true

compareDocumentPostion() 确定节点之间的各种关系

选择器

getElementById（）一个参数：元素标签的ID
getElementsByTagName（）一个参数：元素标签名
getElementsByNmae（）一个参数：name属性名
getElementsByClassName（）一个参数：包含一个或多个类名的字符串
classList 返回所有类名的数组

add（添加）
remove（删除）
contains（存在返回true，否则返回false）
toggle（存在则删除，否则添加）

querySelector（）接收CSS选择符，返回匹配到的第一个元素，没有则null
querySelectorAll（）接收CSS选择符，返回一个数组，没有则返回[]

    <div class="t">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <script>
        var t = document.getElementsByClassName("t");
        console.log(t);  //[div.t]
        console.log(t[0]);  //<div id="t">...</div>
        console.log(t.length);  //1
    </script>

    <div class="t t2 t3"></div>

    <script>
        var t = document.getElementsByTagName("div")[0];
        tlist = t.classList;
        console.log(t);  //<div class="t t2 t3"></div>
        console.log(tlist);  //["t", "t2", "t3"]
        tlist.add("t5");
        console.log(tlist.contains("t5"));  //true
        tlist.remove("t5");
        console.log(tlist.contains("t5"));  //false
        tlist.toggle("t5");
        console.log(tlist.contains("t5"));  //true
    </script>

<!--querySelector()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelector("div");
        console.log(tT); //<div class="t t2 t3"></div>
        var tI = document.querySelector("#t");
        console.log(tI); //<div class="t" id="t"></div>
        var tC = document.querySelector(".t");
        console.log(tC); //<div class="t t2 t3"></div>
        var tN = document.querySelector("[name]");
        console.log(tN); //<div name="nick"></div>
    </script>

<!--querySelectorAll()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelectorAll("div");
        console.log(tT); //[div.t.t2.t3, div#t.t, div]
        var tI = document.querySelectorAll("#t");
        console.log(tI); //[div#t.t]
        var tC = document.querySelectorAll(".t");
        console.log(tC); //[div.t.t2.t3, div#t.t]
        var tN = document.querySelectorAll("[name]");
        console.log(tN); //[div]
    </script>

样式操作方法style

    <div id="t" style="background-color: yellow; width: 100px; height: 100px">8</div>

    <script>
        var tT = document.getElementById("t");
        console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow;
        tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改属性
        console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow;
        console.log(tT.style.item("0")); //background-color
        console.log(tT.style.length); //3
        console.log(tT.style.getPropertyValue("background-color")); //yellow
        console.log(tT.style.getPropertyPriority("background-color")); //空字符串
        console.log(tT.style.removeProperty("width")); //200px
        tT.style.setProperty("width","200px",""); //设置属性，第三个值为important优先值，可不写

    </script>

表格操作方法

    <script>
        var table = document.createElement("table");
        table.border = "1px";
        table.width = "150px";

        var theadt = table.createTHead();
        var tbody = table.createTBody();

        var trH0 = theadt.insertRow(0);
        trH0.insertCell(0).appendChild(document.createTextNode("姓名"));
        trH0.insertCell(1).appendChild(document.createTextNode("年龄"));

        var trB0 = tbody.insertRow(0);
        var trB1 = tbody.insertRow(1);
        trB0.insertCell(0).appendChild(document.createTextNode("nick"));
        trB0.insertCell(1).appendChild(document.createTextNode("18"));
        trB1.insertCell(0).appendChild(document.createTextNode("jenny"));
        trB1.insertCell(1).appendChild(document.createTextNode("21"));

        trB0.deleteCell(1);

        console.log(table);
        document.body.appendChild(table);
    </script>

表单操作方法

document.forms 获取所有表单
.submit 提交表单

    <form action="https:baidu.com/s" method="get">
        <input type="text" name="wd"/>
        <input type="button" value="百度一下" onclick="this.disable=true;BaiDu(this);"/>
    </form>

    <script>
        var form = document.forms;  //获取所有表单
        var formone = form[0];
        console.log(1,form);
        console.log(2,formone);

        function BaiDu(ths){
            var inputBaiDu = ths;
            inputBaiDu.parentNode.submit();
        }
    </script>

节点

ELEMENT 元素节点

attributes 属性节点

attributes 获取所有标签属性
getAttribute() 获取标签指定的属性
setAttribute() 设置指定标签属性
removeAttribute() 移除指定标签属性
var s=document.createAttribute("age"); s.nodeValue="18" 创建age属性，设置属性值为18

    <div id="t" class="s1 s2" name="alex"></div>
    <script>
        var t = document.getElementById("t");

        console.log(t.attributes);
        console.log(t.attributes.id);
        console.log(t.attributes.class);

        console.log(t.attributes.getNamedItem("name"));
        console.log(t.attributes.removeNamedItem("class"));
        console.log(t.attributes.getNamedItem("class"));
        var s = document.createAttribute("age");
        s.nodeValue = "18";
        console.log(t.attributes.setNamedItem(s));
        console.log(t.attributes);
        console.log(t.attributes.item("1"));
    </script>

    <div id="t" class="s1 s2" name="alex"></div>
    <script>
        var t = document.getElementById("t");

        console.log(t.attributes);

        console.log(t.getAttribute("name"));
        t.setAttribute("age",18);
        console.log(t.getAttribute("age"));
        t.removeAttribute("age");
        console.log(t.getAttribute("age"));
    </script>

TEXT 文本节点

    <div id="t">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <script>
        var t = document.getElementById("t");
        console.log(t.innerText);
        console.log(t.outerText);
        console.log(t.innerHTML);
        console.log(t.outerHTML);
        console.log(t.textContent);
    </script>

文档节点

位置操作方法

scrollTop 滚动条距离顶部的高度
scrollHeight：文档高度：自身+padding
clientTop 边框高度
clientHeight 可见范围的高度：自身+padding
offsetTop 当前标签距离“上级”定位标签的高度
offsetHeight 可见范围的高度：自身+padding+border

    <div onscroll="scroll">
        <div id="zg" class="zg">
            <div id="dg" class="dg">

            </div>
        </div>
    </div>
    <script>
        var zg = document.documentElement.offsetHeight;
        console.log(zg);  //1006(height+border+padding)
        var dg = document.documentElement.clientHeight;
        console.log(dg);  //902 可变文档占屏幕高度

        var dgBox = document.getElementById("dg");
        console.log(dgBox.offsetHeight);  //514 （padding、border、自身高度）
        console.log(dgBox.scrollHeight);  //510  文档高度（自身+padding）
        console.log(dgBox.offsetTop);  //20  上级定位标签的高度
        console.log(dgBox.clientTop);  //边框高度
        console.log(dgBox.offsetParent);  //<div id="zg" class="zg">...</div>元素、父级定位标签

        function scroll(){
            console.log(document.body.scrollTop);
        }

定时器

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

    <input type="button" value="Interval" onclick="Interval();"/>
    <input type="button" value="StopInterval" onclick="StopInterval()"/>
    <script>
        function Interval(){
        s1 = setInterval(function(){
            console.log(123);
        },1000);
        s2 = setInterval(function(){
            console.log(456);
        },2000);
        console.log(1);
        }

        function StopInterval(){
            clearInterval(s1);
            clearInterval(s2);
        }
    </script>

弹出框

    <div onclick="func()">12</div>
    <script>

    function func(){
        var result = prompt("what is your name?","alex");
        if (result != null){
            alert("welcome,"+result);
        }
        console.log(result);

location

其它

事件操作

搜索框

　　<style>    　　.style_before{   　　 color:gray;    　　}   　　 .style_after{   　　 color:black;   　　 }　　</style>

    <!--onfocus鼠标点进去   onblur鼠标移出去-->
    <input type="text" placeholder="请输入内容" />
    <input type="text" onfocus="Focus(this)" onblur="Blur(this)" class="style_before" value="请输入内容"/>
    <script>
        function Focus(ths){
            if(ths.value == "请输入内容"){
                ths.value = "";
                ths.className = "style_after";
            }
        }
        function Blur(ths){
            if(ths.value == "请输入内容" || ths.value.trim().length == 0){
                ths.value = "请输入内容";
                ths.className = "style_before";
            }
        }
    </script>

跑马灯

  <div id="str_one" style="height:150px;color:red;font-size:50px;text-align:center;line-height:150px;fonz-weight:bold">
        上 海 自 来 水 水 来 自 海 上
    </div>
    <script>
        setInterval(function (){
        str = document.getElementById("str_one");
        str_text = str.innerText;

        first_char = str_text[0];
        sub_char = str_text.slice(1,str_text.length);
        new_str = sub_char + first_char;

        str.innerText = new_str;
        },500)
    </script>

全选、反选

    <h3>爱好</h3>
    <div>
        <ul id="il">
            <li><input type="checkbox" value="1"/>篮球</li>
            <li><input type="checkbox" value="2"/>足球</li>
            <li><input type="checkbox" value="3"/>排球</li>
        </ul>
    </div>
    <input type="button" onclick="Cheakall()" value="全选"/>
    <input type="button" onclick="cancleall()" value="取消"/>
    <input type="button" onclick="reversll()" value="反选"/>
    <script>
        function Cheakall(){
            var il = document.getElementById("il");
            var cheak = il.getElementsByTagName("input");
            for(var i=0;i<cheak.length;i++){
                cheak[i].checked = true;
            }
        }

        function cancleall(){
            var il = document.getElementById("il");
            var cheak = il.getElementsByTagName("input");
            for(var j=0;j<cheak.length;j++){
                cheak[j].checked = false;
            }
        }

        function reversll(){
            var il = document.getElementById("il");
            var cheak = il.getElementsByTagName("input");
            for(var k=0;k<cheak.length;k++){
                var current_st = cheak[k].checked
                if(current_st){
                    cheak[k].checked = false;
                    }else{
                    cheak[k].checked = true;
                    }
            }
        }
    </script>

模态对话框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
        display:none;
        }

        .c1{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background:rgba(0,0,0,.6);
        z-index:2;
        }

        .c2{
        position:fixed;
        width:400px;
        height:300px;
        top:50%;
        left:50%;
        z-index:3;
        margin-top:-150px;
        margin-left:-200px;
        background:white;
        text-align:center;
        padding-top:150px;
        }
    </style>
</head>
<body>
    <div><input type="button" value="登录" onclick="hihi()"/></div>
    <div id="cc1" class="c1 hide"></div>
    <div id="cc2" class="c2 hide">
        <div>用户名：<input type="text"/></div>
        <div>密码：<input type="text"/></div>
        <input type="button" value="确定"/>
        <input type="button" value="取消" onclick="hisl()"/>
    </div>
    <script>
        function hihi(){
            document.getElementById("cc1").classList.remove("hide");
            document.getElementById("cc2").classList.remove("hide");
        }
        function hisl(){
            document.getElementById("cc1").classList.add("hide");
            document.getElementById("cc2").classList.add("hide");
        }
    </script>
</body>

书签章节

菜单

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
        list-style:none;
        padding:0;
        margin:0;
        }
        ul li{
        float:left;
        background-color: #2459a2;
        color:white;
        padding:8px 10px;
        }
        .clearfix:after{
        display:block;
        content:".";
        height:0;
        visibility:hidden;
        clear:both;
        }
        .hide{
        display:none;
        }
        .tab-menu .title{
        background:#dddddd;
        }
        .tab-menu .title .active{
        background:#0099dd;
        color:black;
        }
        tab-menu .content{
        border:1px solid #dddddd;
        min-height:150px;
        }
        ul li:hover{
        cursor:pointer;
        }
    </style>
</head>
<body>
    <div style="width:400px;margin:0 auto;">
        <div class="tab-menu">
            <div class="title clearfix">
                <ul>
                    <li target="h1" class="active" onclick="show(this);">股基</li>
                    <li target="h2" onclick="show(this);">指基</li>
                    <li target="h3" onclick="show(this);">混基</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div con="h1">1...</div>
                <div con="h2">2...</div>
                <div con="h3">3...</div>
            </div>
        </div>
    </div>

    <script>
        function show(ths){
            var tar = ths.getAttribute("target");
            var liclass = ths.parentNode.children;
            /*循环父亲的儿子，如果是自己，加活动状态，否则移除*/
            for(var i=0;i<liclass.length;i++){
                if(liclass[i].getAttribute("target") == tar){
                    liclass[i].classList.add("active");
                }else{
                    liclass[i].classList.remove("active");
                }
            }
            var cont = document.getElementById("content").children;
            /*循环内容，如果与暗号对的上，样式上什么都不做，没对上就隐藏*/
            for(var j=0;j<cont.length;j++){
                if(cont[j].getAttribute("con") == tar){
                    cont[j].className = "";
                }else{
                    cont[j].className = "hide";
                }
            }
        }
    </script>
</body>

返回顶部

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .go_top{
        position:fixed;
        right:28px;
        bottom:19px;
        width:38px;
        height:40px;
        background:yellow;
        }
        .hide{
        display:none;
        }
    </style>
</head>
<body onscroll="func();">
    <div style="height:2000px;"></div>
    <div id="i2" class="go_top hide">
        <h3 onclick="gotop();">返回顶部</h3>
    </div>
    <script>
        function func(){
            var scrolltop = document.body.scrollTop;
            var ii = document.getElementById("i2");
            if(scrolltop>300){
            ii.classList.remove("hide");
            }else{
            ii.classList.add("hide");
            }
        }

        function gotop(){
        document.body.scrollTop = 0;
        }
    </script>
</body>

详见：http://www.cnblogs.com/suoning/p/5656922.html

时间： 2024-10-13 07:55:26

python基础-第十一篇-11.2DOM为文档操作的相关文章

python基础-第十一篇-11.1JavaScript基础

JavaScript是一门解释型编程语言,主要是增强html页面的动态效果 JavaScript是有三部分组成:ECMAScript.BOM.DOM 单行注释// 多行/* */ 引入方式引入外部文件 <script type="text/javascript" src="js文件"></script> 除了以文件的方式引入,还是写在HTML的<head>或<body>中推荐写在body的底部,这样可以让网

Python基础（2）：doc、文档字符串docString、help()

OS:Windows 10家庭中文版,Python:3.6.4 Python中的文档字符串(docString) 出现在模块.函数.类的第一行,用于对这些程序进行说明.它在执行的时候被忽略,但会被编译器存放到模块.函数.类的__doc__属性中.不过,并非每一个模块.函数.类都有文档字符串. Part 1.自定义模块.函数.类的文档字符串新建模块dstest.py,存放于Python安装目录下(可以在import模块时被找到): 导入dstest,查看模块dstest及其下的函数d

【SSH三大框架】Hibernate基础第十一篇：对继承映射的操作

在java中,类之间可以有继承关系,但是在数据库中是没有继承关系的.不过Hibernate是为了把面向对象的关系反映到数据库中,Hibernate为我们提供了3种方案: 第一.一个继承体系放在一张表中(就是把父类与子类的所有属性反映在一张表中) 第二.每个子类映射一张表,然后与父类对应的表用主键一对一关联起来第三.每个具体类映射一张表我们假设有三个类:Employee(员工).Skill(技术).Sales(销售) 员工分为技术人员和销售人员两种类型,技术和销售类继承员工类: Employe

Python小爬虫-自动下载三亿文库文档

新手学python,写了一个抓取网页后自动下载文档的脚本,和大家分享. 首先我们打开三亿文库下载栏目的网址,比如专业资料(IT/计算机/互联网)http://3y.uu456.com/bl-197?od=1&pn=0,可以观察到,链接中pn=后面的数字就是对应的页码,所以一会我们会用iurl = 'http://3y.uu456.com/bl-197?od=1&pn=',后面加上页码来抓取网页. 一般网页会用1,2,3...不过机智的三亿文库用0,25,50...来表示,所以我们在拼接ur

python基础-第六篇-6.2模块

python之强大,就是因为它其提供的模块全面,模块的知识点不仅多,而且零散---一个字!错综复杂没办法,二八原则抓重点咯!只要抓住那些以后常用开发的方法就可以了,哪些是常用的?往下看--找答案~ 模块定义模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才能完成 (函数又可以在不同的.py文件中),n个 .py 文件组成的代码集合就称为模块.

python基础1--小结篇

如果有别的编程语言基础,python属于极好上手的一门语言.应用上,用“自取所需”来描述,最为贴切. 首先,放上一些推荐. 安装上: 1.python3.5.1(推荐官网直接下载,自带IDLE),安装不麻烦,记得增加环境变量即可 2.编辑器:sublime 其实,并没有使用很多,但是推荐的人超多 ,破解版网上很多,按资源下载即可 3.IDE: 强推 pycharm 对JetBrains软件执着的热爱方便又美观网上能找到找到注册码,学生用edu邮箱可以免费使用,当然,支持正版! 熟悉上: 语

python基础-第十篇-10.1HTML基础

htyper text markup language 即超文本标记语言超文本:就是指页面内可以包含图片.链接,甚至音乐,程序等非文字元素标记语言:标记(标签)构成的语言网页==HTML文档,由浏览器解析,用来展示的静态网页:静态资源,如:xxx.html 动态网页:html代码有某种开发语言根据用户请求动态生成的标签是由一对尖括号包裹的单词构成,例如:<html> 所有标签中的单词不可能以数字开头标签不区分大小写,<html>和<HTML>,推荐使用小写

Python基础学习总结篇

Python基础学习总结先附上所有的章节: Python学习(一)安装.环境配置及IDE推荐 Python学习(二)Python 简介 Python学习(三)流程控制 Python学习(四)数据结构(概要) Python学习(四)数据结构 —— int float Python学习(四)数据结构 —— str Python学习(四)数据结构 —— bool Python学习(四)数据结构 —— list tuple range Python学习(四)数据结构 —— set frozenset

Python基础——windows自动化篇（九）-正则表达式

正则表达式(regexp) 正则表达式在某种意义上可以算是字符串操作中的最高级别了,并不是因为它的语法的复杂,而是它的灵活.理解这一点就需要了解正则表达式的本质,无论多么复杂的正则表达式,它的本质就是字符串,目的就是用来记录其他字符串的规律.看似有些抽象,但是其实很容易理解,大多数人在使用dos命令的时候,会使用到通配符,比如在某个目录列出所有的pdf文档,方法就是dir *.pdf——这里的*表示统配,也就是可以代表任何字符串,这个命令也就是列出来所有符合以下命名的文件:任意字符串+”.pdf