python dom操作

Posted 崽崽blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python dom操作相关的知识,希望对你有一定的参考价值。

1.DOM介绍

(1)什么是DOM

  • DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
  • DOM就是由节点组成的。

(2)解析过程

  • HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性
  • DOM树(一切都是节点)

DOM的数据结构如下:

 

 

上图可知,在HTML当中,一切都是节点:(非常重要)

  • 元素节点:HMTL标签。

  • 文本节点:标签中的文字(比如标签之间的空格、换行)

  • 属性节点::标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

(3)DOM可以做什么

  • 找对象(元素节点)

  • 设置元素的属性值

  • 设置元素的样式

  • 动态创建和删除元素

  • 事件的触发响应:事件源、事件、事件的驱动程序

1.获取DOM的方式

<script>
        console.log(window); //加载出窗口
        console.log(document); //打印出文档
        console.log(document.documentElement);   //打印文档中的元素
        console.log(document.body); //打印文档的body

        // 通过id 获取
        var oDiv = document.getElementById("active");
        console.log(oDiv);   // 获取到该标签下的内容

        var oTag = document.getElementsByTagName("div")[0];
        console.log(oTag); // div标签

        //通过类名来获取,获取的也是伪数组,多个DOM对象
        var oActive = document.getElementsByClassName("box");
        console.log(oActive);
        for(var i = 0; i< oActive.length;i++){
            //样式设置
            oActive[i].style.backgroundColor = "yellow";
        }
        //救命稻草

        var oD = document.querySelectorAll("div p");
        console.log(oD);
        oD .forEach(function (item, index) {
            console.log(item)   //  <p>倚天屠龙记</p>
        })
    </script>

 事件的三要素:事件源、事件、事件驱动程序

总结如下:

  • 事件源:引发后续事件的html标签。

  • 事件:js已经定义好了(见下图)。

  • 事件驱动程序:对样式和html的操作。也就是DOM。

 <title>Title</title>
    <script>
   /*窗口加载   1.先去加载文档  2.再去加载图片*/
        window.onload = function () {    //此时如果不加载窗口,文档是没有加载进来的
            console.log(document);
            console.log(document.getElementById(\'btn\'));
            // document.getElementById("btn").onclick = function () {
            //     alert(1);
            // };
            document.getElementById("btn").onmouseover = function(){
                console.log("鼠标悬停了")
            };
            document.getElementById("btn").onmouseout = function(){
                console.log("鼠标离开了")
            }
        }
    </script>
</head>
<body>
<button id ="btn">点我</button>

常见事件

(2)对标签值的操作

innerText

//设置文本
var oDiv=document.getElementById(\'box\');
oDiv.innerText=\'哈哈哈\'

innerHTML

//既可以设置文本 又可以设置标签  设置 set 获取 get   点语法(set方法和get方法)
oDiv.innerHTML=\'<h3>嘿嘿嘿</h3>\'

(3) 获取标签内容值

//只获取所有(当前标签和子标签)文本内容
console.log(oDiv.innerText);
//获取父标签中所有标签元素(子标签,空格,换行,文本)
console.log(oDiv.innerHTML);

(4)对表单控件value的操作

//设置value值  只适应于表单控件元素
document.getElementById(\'user\').value = \'alex\';
console.log(document.getElementById(\'user\').value);

(5)对标签的css操作(样式操作)

xxx.style.css的属性key=\'值\'

盒子颜色的切换

var oDiv = document.getElementsByClassName(\'box\')[0];

var isRed = true;
oDiv.onclick = function () {
    if (isRed) {
        //this  谁做的事件操作 this指向谁
        this.style.backgroundColor = \'green\';
        this.style.width = \'400px\';
        isRed = false;
    } else {
        this.style.backgroundColor = \'red\';
        isRed = true;
    }

}

(6)对标签属性的操作

<script>
    var oDiv = document.getElementsByClassName("box")[0];
    var oBtn = document.getElementById("btn");
    var isShow = true;
    oBtn.onclick = function () {
        if(isShow){
            oDiv.id = "box1";
            oDiv.title = "hhhh";
            console.log(oDiv.className); //box
            oDiv.className = oDiv.className+"active";
            isShow = false
        }else{
            oDiv.className = "box";
            isShow = true
        }
    }
</script>

DOM的操作(创建,追加,删除)

js中的面向对象

定时器

1. DOM的操作(创建,追加,删除)

(1)DOM节点的获取

  • parentNode 获取父级标签

  • nextElementSibling 获取下一个兄弟节点

  • children 获取所有的子标签

    <script>
        var oP = document.getElementById("wuxia");
        console.log(oP.parentNode); // 父级div标签下的所有内容
        console.log(oP.nextElementSibling.innerText);  //萧峰
        console.log(oP.nextSibling.innerText); // IE浏览器
        
        var a = oP.nextElementSibling|| oP.nextSibling;
        console.log(a);
        console.log(oP.parentNode.childen);
    </script>

(2) DOM的增删操作

创建 createElement()

//既可以创建已有的标签,还可以创建自定义的标签
var oDiv = document.createElement(\'div\')

追加 appendChild() 父子标签操作

父.appendChild(oDiv);

删除 removeChild()

父.removeChild(子节点);
自己.parentNode.removeChild(自己)

插入insertBefore()

父.insertBefore(新的子节点,要参考的节点)

 利用创建删除实现隐藏代码示例

<script>
        var oBtn = document.querySelector("#btn");
        var oDel = document.querySelector("#del");
        var oFather = document.querySelector(".father");

        var oP = null;
        var oA = null;
        oBtn.onclick = function(){
            //创建 dom p标签
            oP = document.createElement("p");
            oA = document.createElement("a");
            //追加到父级标签中
            oFather.appendChild(oP);
            oFather.insertBefore(oA,oP);
            //设置对象属性值
            oA.href = \'http://www.baidu.com\';
            //设置值
            oA.innerText="百度";
            oP.innerHTML = "alex";
            oP.setAttribute("class","active")
        };
        oDel.onclick = function(){
            //如果oP对象存在就结束程序
            if (!oP){
                return;
            //
            }else{
                console.log(oFather);
                //将增加的p标签移出
                oFather.removeChild(oP)
            }
        }
    </script>

使用js模拟hover选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        ul{
            width: 600px;
            height: 80px;
            line-height: 80px;
            text-align:center;
            overflow:hidden;
        }
        ul li{
            float:left;
            margin: 0 10px;
            width:  80px;
            height: 80px;
            background: darkturquoise;
            color: #fff;
        }
        ul li.active{
            background: red;
        }
    </style>
</head>
<body>
<ul>
    <li>举</li>
    <li>头</li>
    <li>望</li>
    <li>明</li>
    <li>月</li>
</ul>
<script>
    var lists = document.getElementsByTagName("li");
    for(var i =0;i<lists.length;i++){
        lists[i].onclick = function(){
            //在修改当前盒子样式之前,现将所有盒子的类名置空
            for(var j=0; j<lists.length;j++){
                lists[j].className ="";
            }
            this.className = "active"; //修改当前 鼠标进入盒子的样式
        }
    }
</script>
</body>

</html>

 选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #tab{
            width: 480px;
            margin: 20px auto;
            border: 1px solid red;
        }
        ul{
            width: 100%;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #cccccc;
        }
        ul li a{
            text-decoration: none;
            color:black;
        }
        li.active {
            background-color: darkcyan;
        }
        p{
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: darkgrey;
        }
        p.active{
            display: block;
        }
    </style>
</head>
<body>
<div>
    <div id="tab">
        <ul>
            <li class = "active">
                <a href="javascript:void(0);">首页</a>
            </li>
            <li class = "active">
                <a href="javascript:void(0);">新闻</a>
            </li>
            <li class = "active">
                <a href="javascript:void(0);">图片</a>
            </li>
        </ul>
        <p class="active">首页内容</p>
        <p>新闻内容</p>
        <p>图片内容</p>
    </div>
</div>

<script>
    var lists = document.getElementsByTagName("li");
    var oPs = document.getElementsByTagName("P");
         // var i;
        //i=3 变量提升 会导致 变量 是一个全局作用域
        //var 声明变量 全局作用域,存在变量提升
    for(var i= 0; i<lists.length;i++){ //为了给每个dom添加事件
        lists[i].currentIndex = i;
        console.dir(lists[i]);
        lists[i].onclick = function(){
            for(var j = 0; j<lists.length;j++){
                lists[j].className = "";
                oPs[j].className = \'\';
            }
            this.className = "active";
            oPs[this.currentIndex].className = \'active\'
        }
    }
</script>
</body>

</html>

 

2.js中的面向对象

(1)使用Object或对象字面量创建对象

// 构造函数方式创建对象
    let person = new Object();
    person.name = \'alex\';
    person.fav = function () {
        console.log(this);
    }
    //字面量方式创建 使用最多
    var person2 = {
        name:\'wusir\',
        age:19,
        fav:function () {
            alert(this.age);
        }
    }
    person2.fav();

3.定时器

 

 

 

事件点击案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn" onclick="f1(this);">
    提交
</button>

<button id="btn2">
    确认
</button>

<div id="xxx">
    大海啊,全是水
</div>

<script>
    function f1(ths) {

        ths.style.color = \'red\';
        var div1 = document.getElementById(\'xxx\');
        div1.style.color = \'yellow\';
    }

    var btn2 = document.getElementById(\'btn2\');
    btn2.onclick = function () {
        this.style.color = \'blue\';
    }

</script>

</body>
</html>

 

鼠标焦点案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username" value="请输入内容">

<script>
    //获得焦点
    var inpEle = document.getElementById(\'username\');
    inpEle.onfocus=function () {
        if(this.value === \'请输入内容\'){
            this.value=\'\';
        }
    };

    //失去焦点
    inpEle.onblur=function () {
        console.log(\'>>>>>>\',this.value.trim()) //打印出来
        if (this.value.trim().length ===0){
            this.value=\'请输入内容\';
        }
    }
</script>

</body>
</html>

 

 

写一个小米商城的主页 实战

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="小米商城首页.css">
</head>
<body>
<div>
    <div class="nav">
        <div class="nav-center">
            <div class="nav-left">
                <a href="javascript:void (0)">小米商城</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">MIUI</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">lot</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">云服务</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">金融</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">商城</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">小城</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">小米城</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">小城</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">小米城</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">小城</a><span>&nbsp;|</span>
                <a href="javascript:void (0)">小商城</a><span>&nbsp;|</span>
            </div>
            <div class="nav-right">
                <a href="javascript:void (0)">登录</a><span>&nbsp;|&nbsp;</span>
                <a href="javascript:void (0)">注册</a><span>&nbsp;|&nbsp;</span>
                <a href="javascript:void (0)">消息通知</a><span>&nbsp;|&nbsp;</span>
                <a href="javascript:void (0)">购物车</a><span>&nbsp;|&nbsp;</span>
            </div>
        </div>
    </div>
</div>

<div class="content_father">
    <div class="content1">
        <div class="content1-left">
            <a href="" class="logo">
                <img src="logo.png" alt="">
            </a>
        </div>
        <div class="content1-center">
            <a href="javascript:void (0)">小米手机</a>
            <a href="javascript:void (0)">红米</a>
            <a href="javascript:void (0)">电视</a>
            <a href="javascript:void (0)">笔记本</a>
            <a href="javascript:void (0)">家电</a>
            <a href="javascript:void (0)">新品</a>
            <a href="javascript:void (0)">路由器</a>
            <a href="javascript:void (0)">智能硬件</a>
            <a href="javascript:void (0)">服务</ajquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

DOM操作

学习笔记:python3,代码片段(2017)

JavaScript单行代码,也就是代码片段

dom操作

实用代码片段将json数据绑定到html元素 (转)