python 之前端开发（ DOM操作）

11.47 DOM操作

查找节点：

11.471 直接查找

document.getElementById           //根据ID获取唯一一个标签

document.getElementsByClassName   //根据class属性获取一系列标签

document.getElementsByTagName     //根据标签名获取一系列标签

11.472 间接查找

语法	含义
childNodes	获取所有的子节点，除了元素还有文本等
children	获取所有元素子节点，不包含文本
parentNode	获取父节点
previousSibling	获取上一个兄弟节点，不包含文本
previousElementSibling	获取上一个兄弟元素节点，包含文本
nextSibling	获取下一个兄弟节点，不包含文本
nextElementSibling	获取下一个兄弟元素节点，包含文本
firstChild	获取第一个子节点，不包含文本
firstElementChild	获取第一个子节点，包含文本
lastChild	获取最后一个子节点，不包含文本
lastElementChild	获取父元素最后一个元素节点，包含文本

11.473 增加节点

1、创建新节点

var divEle = document.createElement('div');

2、追加一个子节点（放到最后）

父节点.appendChild(新的子节点)；

3、插入一个子节点（插入到某个节点前）

父节点.insertBefore(新的子节点,某个节点);

4、克隆节点

要复制的节点.cloneNode();       //括号里不带参数和带参数false：只复制节点本身，不复制子节点。

要复制的节点.cloneNode(true);   //带参数true：既复制节点本身，也复制其所有的子节点。

11.474 删除、替换节点

父节点.removeChild(要删除的子节点)；

父节点.replaceChild(新的子节点, 某个子节点);

11.475 修改/设置节点属性

1、获取文本节点的值：

var divEle = document.getElementById("d1")

divEle.innerText                            //只查看所有标签内的文本

divEle.innerHTML                            //查看所有子标签，包括文本和子标签

2、设置文本节点的值：

var divEle = document.getElementById("d1")

divEle.innerText="1"                //先清空节点内容，再添加文本(字符串:'<h1>我是h1</h1>')

divEle.innerHTML="<p>2</p>"         //先清空节点内容，可识别文本内的html标签(标签:'<h1>我是h1</h1>')

3、attribute操作

var divEle = document.getElementById("d1");

divEle.setAttribute("age","18")

divEle.getAttribute("age")

divEle.removeAttribute("age")

4、自带的属性还可以直接.属性名来获取和设置

imgEle.src

imgEle.src="..."

11.476 获取元素的值

适用于input、select、textarea标签

var x=document.getElementById('input')

var y=document.getElementById('select')

var z=document.getElementById('textarea')

x.value

y.value

z.value

11.477 class操作

var x=document.getElementById('div1')



x.classList.remove('col1')          //x.classList里删除class='col1'

x.classList.add('col1')             //x.classList里添加class='col1'

x.classList.contains('col1')        //x.classList里是否有class='col1'

x.classList.toggle('col1')          //没有就添加，返回true，有就删除，返回false

11.478 css操作

obj.style.backgroundColor="red"                         //此处设置的是行内样式

1.对于没有中横线的CSS属性一般直接使用style.属性名即可 如：

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可 如：

obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

11.479 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时执行一段JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

1、常用事件

onclick        当用户点击某个对象时调用的事件句柄。

ondblclick     当用户双击某个对象时调用的事件句柄。



onfocus        元素获得焦点。               // 输入框

onblur         元素失去焦点。               //应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             //应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）



onkeydown      某个键盘按键被按下。          //应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。



onselect      //在文本框中的文本被选中时发生。

onsubmit      ///确认按钮被点击，使用的对象是form。

2、绑定方式

方式一：

行内绑定：直接通过div被点击来修改自身样式：

<body>

<div id="div1" onclick="changeColor(this)"> 我是div，点我 </div>

<script>                                                  //this是实参，表示触发事件的当前元素

  function changeColor(ths) {

    ths.style.backgroundColor="green";                      //函数定义过程中的ths为形参

  }

</script>

</body>

通过button被点击来修改另一个div标签样式：

<body>

<input type="button" id="b1" value="开关" onclick="change()">

<div class="c1 bg-red"></div>

<script>                                              //<script>必须放在div定义后，可以放在body里

    function change() {

        var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1这个标签

        c1Ele.classList.toggle("bg-green");                  // 修改classList

    }

</script>

</body>

方式二：

直接绑定匿名函数：直接通过div被点击来修改自身样式：

<body>

<div id="div1">来，点亮我的绿</div>

<script>

    var oDiv = document.getElementById('div1');

    oDiv.onclick = function() {

        this.style.backgroundColor = 'red';

    }

</script>

</body>

通过button被点击来修改另一个div标签样式：

<body>

<input type="button" id="b2" value="开关">

<div class="c1 bg-red"></div>

<script>

    function change() {

        var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1这个标签

        c1Ele.classList.toggle("bg-green");                 // 修改classList

    }

    var b2Ele = document.getElementById("b2");               // 通过JS代码绑定事件

    b2Ele.onclick = ()=>{

        change();

    }

</script>

</body>

方式三：

先单独定义函数，再绑定

<div id="box1" ></div>

<script>

    var div1 = document.getElementById("box1");

    div1.onclick = fn;              //注意，这里是fn，fn代表的是整个函数,fn()指的是返回值。

    function fn() {                 //单独定义函数

        alert("我是弹出的内容");

    }

</script>

11.4791 定时器

<body>

<input type="button" id="b1" value="开始">

<input type="button" id="b2" value="停止">

<input type="text" id="i1">

<script>

    var t;

    function showTime() {

        var now = new Date();            // 将当前时间填写到i1中

        var i1Ele = document.getElementById("i1");

        i1Ele.value = now.toLocaleString();

    }

    showTime();                         //1找到开始按钮,给它绑定事件,点击后每隔1秒执行一次showTime()

    var b1Ele = document.getElementById("b1");

    b1Ele.onclick = function () {

        if (!t){

           t = setInterval(showTime, 1000);

        }

    };

    var b2Ele = document.getElementById("b2");//2找到停止按钮，给它绑定事件，点击之后就清除定时器

    b2Ele.onclick = function () {

        clearInterval(t);             // 清除的是定时器，

        console.log(t);

        t = undefined;               //t只是一个普通的变量，它保存了定时器的id值,清除定时器后t中还有值

    };

</script>

</body>

定时器

11.4792 输入框聚焦

<body>

<input type="text" id="i1" value="海飞丝">

<input type="text" id="i2" value="辣条" onfocus="f1(this);" onblur="f2(this);">

<script>                                    //this指的是当前事件的标签对象

    //方式一

    function f1(ths) {

        ths.value = "";

    }

    function f2(ths) {

        ths.value = "辣条";

    }



    //方式二

   var i1Ele = document.getElementById("i1");

   i1Ele.onfocus = function () {                // 给i1设置获取光标的事件

       this.value = "";

   };

   i1Ele.onblur = function () {

       this.value = "海飞丝";                   // 给i1设置失去光标的事件

   }

</script>

</body>

11.4793 select联动

<body>

<select id="province">

    <option>请选择省:</option>

</select>

<select id="city">

    <option>请选择市:</option>

</select>

<script>

    var s1Ele = document.getElementById("province");

    var s2Ele = document.getElementById("city");

    var data = {"上海": ["黄浦区", "静安区"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

    for (let k in data) {               // 将省直辖市数据填充到第一个select中

        //console.log(k);

        let tmp = document.createElement("option");

        tmp.innerText = k;

        s1Ele.appendChild(tmp);          // 将创建的tmp添加到第一个select中

    }

    s1Ele.onchange = function () {      // 当第一个select框的值发生变化之后才去更新第二个select框

        s2Ele.innerHTML = "";           //第二次选择区时清空第二个select框的option选项

        let p = document.createElement("option");//恢复默认选项'请选择省市'

        p.innerText = "请选择市";

        s2Ele.appendChild(p);

        //console.log(this.value);

        let provine = this.value;       //拿到选择的省或直辖市



        // 将province对应的区信息 填充到第二个select中

        for (let i = 0; i < data[provine].length; i++) {

            let tmp = document.createElement("option");

            tmp.innerText = data[provine][i];

            s2Ele.appendChild(tmp);

        }

    }

</script>

</body>

python 之前端开发（ DOM操作）的更多相关文章

python 之前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）
11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...
python 之前端开发（HTTP协议、head标签、img标签、a标签、列表标签）
第十一章前端开发 11.1 HTTP 1.1引入了许多关键性能优化:keepalive连接,请求流水线,chunked编码传输,字节范围请求等 1.keepalive连接: 1.长连接允许HTTP设备 ...
python 之前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）
11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如 ...
python全栈开发day45-DOM操作、对象、定时器
一.昨日内容回顾 1.内置对象 Array String Date Math 2.DOM事件三要素:事件源.事件.事件驱动程序事件源,事件,事件驱动程序 3.获取事件源的三种方式 var oDiv ...
前端之DOM操作
一.概念 javascript javascript是一种脚本语言,可以被浏览器解析,所以它可以称之为前端的三把利器之一. javascript跟java没有半毛钱关系. 声明局部变量:使用关键字va ...
Python学习-前台开发-ajax操作
概述对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用一个简单操作需要 ...
前端开发-DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
python全栈开发day68-ORM操作：一般操作、ForeignKey操作、ManyToManyField、聚合查询和分组查询、F查询和Q查询等
ORM操作 https://www.cnblogs.com/maple-shaw/articles/9403501.html 一.一般操作 1. 必知必会13条 <1> all(): 查询 ...
python 之前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...

随机推荐

Kafka(三） —— 集群监控
任何应用功能再强大.性能再优越,如果没有与之匹配的监控,那么一切都是虚无缥缈的.监控不仅可以为应用提供运行时的数据作为依据参考,还可以迅速定位问题,提供预防及告警等功能,很大程度上增强了整体服务的鲁棒 ...
ArcGIS Python人门到精通目录基于ArcGIS10.2，100以上案例15章42个视频806分钟，51GIS网站上线
ArcGIS Python人门到精通目录闫老师 QQ:276529800 微信13108507190 1. ArcGIS Python基础 1.1 ArcGIS为什么学习Python 1.2 A ...
转载【2017-05-20】OpenWrt 打印机共享专用固件 (trunk, r47249)
[2017-05-20 更新]经过研究发现,Windows 共享打印机使用 RAW 数据(不是 RAW 协议)传输,因此 CUPS 可以去掉所有的过滤器和 PPD 文件.因此重新编译了 8M 的 ar ...
【转】Android检查手机是否被root
目前来说Android平台并没有提供能够root检查的工具.但是我们可以通过两种方式来判断手机里面是否有su文件这个su文件是不是能够执行但是这两种检查方式都存在缺点. 第一种存在误测和漏测的情 ...
mfc封装cef浏览器关闭整个窗口程序得时候又重启mfc 应用的程序
最近使用mfc 做了一个cef得浏览器多标签得.当使用这个封装得浏览器一段时间之后(超过1分钟2分钟) 当关闭封装得浏览器整个窗体 x得时候,整个窗体又重新弹了出来. 大概现象就是一个exe程序你杀 ...
Vue 使用axios分片上传
Vue的界面 <input type="file"/> 上传方法 fileUpload: function () { var num = 1 var file = do ...
微信小程序设置全局请求URL 封装wx.request请求
app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * metho ...
实现一个自己的IOC
实现一个自己的IOC package com.IocExample; import java.lang.reflect.Constructor; import java.lang.reflect.In ...
Web Application Framework
ASP.NET Boilerplate https://github.com/aspnetboilerplate ASP.NET Boilerplate - Web Application Frame ...
Spring cloud微服务安全实战-5-7实现基于session的SSO（客户端应用的Session有效期）
授权模式改造成了Authorization code完成了改造的同时也实现了SSO.微服务环境下的前后端分离的单点登陆. 把admin的服务重启.刷新页面并没有让我去登陆,直接就进入了首页. ord ...

python 之 前端开发（ DOM操作）