python 之 前端开发( DOM操作)
Posted mylu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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操作)的主要内容,如果未能解决你的问题,请参考以下文章
2020Python修炼记前端开发之 jQuery 属性/样式操作