python操作dom_Python Dom 的介绍和使用day1
DOM:
1.查找元素:
1.直接查找
2.间接查找
1.节点 (所有内容)
2.元素 (被括号括起来的内容)
比如:
111
1
节点包括111和1,元素只有1
2.操作元素:
1.ID
1.获得标签内容
1.通过ID查找到标签:t=document.getElementById("")
2.通过标签得到间接寻找相关节点:t.childNodes、t.parentNode
3.获得标签的值: t.value
4.获得标签的文本内容:t.innertext、t.innerHTML(
如:一111二)
t.innertext ————>一111二
t.innerHTML ————> 一111二
2.修改标签内容
t.value = "66"
2.class
1.寻找标签,获得标签列表:t=document.getElementsByTagName("div")
2.切片,对目的对线进行操作:(当然,如果知道ID,就找得更快了)
t[0].classList、t[0].classList.add('c4')、t[0].classList.remove()
3.样式
同理:也可以对标签的其他样式进行修改:
如t.style.color="red",如果带-:如background-color就变成t.style.backgroundColor
4.属性(
t.getAttribute(name) 获得属性
t.setAttribute("name","xixi") 修改属性
t.removeAttribute("name") 移除属性
可以用来控制选择框的是否选中,即控制checked
Title
序号用户名密码
111112222233333
var t1= document.getElementById("tb");
var t2=t1.children;for(var i=0;i
{
t3=t2[i].firstElementChild.firstElementChild;
t3.setAttribute("checked","checked");
t3.checked=true;
}
}
function CancleALL() {
var t1= document.getElementById("tb");
var t2=t1.children;for(var i=0;i
{
t3=t2[i].firstElementChild.firstElementChild;
t3.removeAttribute("checked")
t3.checked=false
}
}
function ReverseALL() {
var t1= document.getElementById("tb");
var t2=t1.children;for(var i=0;i
{
t3=t2[i].firstElementChild.firstElementChild;
var val=t3.getAttribute("checked");if ((t3.checked==true || val=="checked" )&&t3.checked!=false){t3.checked=false;t3.removeAttribute("checked")}else{t3.checked=true;t3.setAttribute("checked","checked");}
}
}
例子
PS:当在网页上勾选单选框时,不会在标签中增加 checkde=checked,所以不能通过获取属性来判断,而是直接用
对象.checked == true or false 来改变单选框的是否选中
最后一点,因此两个方法都能改变,所以两种方法要同时兼顾。
当然,最好的方法就是统一使用 对象.checked 来改变
3.使用的例子:
搜索框
1.创建输入框
2.给输入框绑定事件
3.在script上定义事件的内容
Title
//onfocus表示鼠标的焦点在对话框 onblur鼠标的焦点移出对话框
var t=document.getElementById("i1");
var val=t.valueif (val=="请输入内容"){t.value=""}
}
function f2() {
var t=document.getElementById("i1");
var val=t.value;//去空格,看字符长度if (val.trim().length==0){t.value="请输入内容"}
}
View Code
弹出框
Title
margin: 0;
}
.bj{
height: 2000px;
width:100%;
background-color: #9E9EA6;
}
.hide{
display: none;!important;
}
.shade{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: #5ab2ce;
z-index: 100;
}
.modal{
width: 400px;
height: 400px;
position: fixed;
background-color: white;
top:50%;
left:50%;
margin-top:-200px ;
margin-left: -200px;
z-index: 101;
}
取消
var t1= document.getElementById("shade");
var t2= document.getElementById("modal");
t1.classList.remove("hide");
t2.classList.remove("hide");
}
function f2() {
var t1= document.getElementById("shade");
var t2= document.getElementById("modal");
t1.classList.add("hide");
t2.classList.add("hide");
}
View Code
4.标签操作
1.创建标签
方法一:创建对象
var tag = document.createElement('a')
tag.innerText = 'haha'
tag.className = 'c1'
tag.href = "http://www.baidu.com"
方法二:创建字符串
var tag = "haha"
2.添加标签
方法一:创建对象
xx.appendChild(tag) 默认加到最后
xx.insertBefore(tag,xx.children[1]) 加到任意位置
xx.insertAdjacentElement("afterBegin",document.createElement('p'))
方法二:创建字符串
xx.insertAdjacentHTML("beforeEnd",tag); 当成标签传进去
xx.insertAdjacentText("beforeEnd",tag); 当成文本传进去
第一个参数只能是
“beforeBegin”在标签外面的前面添加,与标签同级;
“afterEnd”在标签外面的后面添加,与标签同级;
“beforeEnd”在标签里面的最后面添加,是标签的子级
python操作dom_Python Dom 的介绍和使用day1相关推荐
- 【用SQLite做数据分析】Python操作SQLite的入门介绍
本篇推文共计2000个字,阅读时间约3分钟. Python 进行数据分析和数据挖掘是当前炙手可热的技术领域,如何高效地管理大量数据是其中非常关键的环节.数据库是最佳的解决方案之一,目前流行的数据库有 ...
- python资料库-Python操作三大主流数据库
学会使用的技术栈:python flask redis mongoDB mysql 第1章 数据库简介 简单介绍Mysql.数据库简介.导学篇 第2章 mysql基础 XAMPP 集成好的 最流行的P ...
- java连接mongodb_第78天: Python 操作 MongoDB 数据库介绍
MongoDB 是一款面向文档型的 NoSQL 数据库,是一个基于分布式文件存储的开源的非关系型数据库系统,其内容是以 K/V 形式存储,结构不固定,它的字段值可以包含其他文档.数组和文档数组等.其采 ...
- python提取hbase数据_详解python操作hbase数据的方法介绍
配置 thrift python使用的包 thrift 个人使用的python 编译器是pycharm community edition. 在工程中设置中,找到project interpreter ...
- Python操作Excel表格的模块xlrd的简单介绍
Python操作Excel表格的模块xlrd的简单介绍 处理数据对Python来说,比较容易,操作简单,功能强大,短短几行代码,就可处理大量的数据信息,下面介绍Python处理Excel表格的一个模块 ...
- Elasticsearch的介绍 以及使用python操作es详细步骤
一. 什么是 Elasticsearch 想查数据就免不了搜索,搜索就离不开搜索引擎,百度.谷歌都是一个非常庞大复杂的搜索引擎,他们几乎索引了互联网上开放的所有网页和数据.然而对于我们自己的业务数据来 ...
- python操作word文档(python-docx)
python操作word文档(python-docx) 1. 效果图 1.1 python-docx文档标题段落(等级.加粗.斜体.居中)效果图 1.2 python-docx字体(加粗.斜体.居中. ...
- python操作yaml的方法详解
这篇文章主要为大家介绍了python操作yaml的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助 一.参考链接 https://pyyaml.org/wiki/PyYAM ...
- python连接excel存放数据_有了这篇python操作Excel学习笔记,以后储存数据 办公很轻松!...
最近在做一些数据处理和计算的工作,因为数据是以.csv格式保存的,因此刚开始直接用Excel来处理.但是做着做着发现重复的劳动其实并没有多大的意义,于是就想着写个小工具帮着处理.以前正好在一本书上看到 ...
最新文章
- 10 Reasons Why Your Projects Should Use the Dojo
- UA SIE545 优化理论基础 用Farkas定理证明Farkas类的结论
- qq android2.0,取代QQ?腾讯TIM安卓2.0发布:10GB云盘免费用
- 在Object-C中学习数据结构与算法之排序算法
- idea 快捷键整理
- maya中英文对比_maya中英文对照表
- java ftp获取文件夹大小,java 用FTPClient 下载文件时不显示总大小?解决方案
- java演练代码 银行取款演练 java
- 【python数据分析】用python进行数据探索2(常见matplotlib及pandas绘图函数汇总、对比及拓展)
- 在网页子文本框模拟特定的鼠标滚轮_Pyhton爬虫的另类操作,之前有碰到不能爬的网页来看看!...
- 求解偏微分方程开源有限元软件deal.II学习--Step 13
- 如何优化 Java 性能? 1
- php 中的关联数组 介绍
- HDFS原理(超详解)
- 如何在线压缩图片?电脑怎么缩小图片kb大小?
- 程序员的自我进化:共享经济新模式——共享员工
- Maven的学习与2022IDEA创建Maven的web项目的教程(这个比上一期更“啰嗦哦~,前面不想删了,整体再来一遍”)
- android人脸情绪识别器,Emotion Recognition微软人脸情绪识别器
- 用HTML绘制哆啦A梦
- 合工大机器人足球仿真考试题56题(底层uva)
热门文章
- java中循环语句_Java语法基础之循环结构语句详解
- inotifypropertychanged接受不执行_死刑立即执行很好理解,缓期2年执行是什么意思?是2年后再执行吗...
- java null 转空_java 对象属性为 null 值转为 空串
- Knative 多容器支持介绍
- 阿里技术 2019 年度热文 Top10 出炉,你错过哪些?
- mysql 按照in id顺序_Mysql查询结果顺序按in()中ID的顺序排列的案例区分
- 你在「动森」里遇到的那些「丑动物」,后来怎么样了?
- Tomcat和Resin有什么区别,工作中你怎么选择?
- 数据库面试题【十、【非关系型数据库】和【关系型数据库】的【区别】与【优势比较】】
- 判断当前时间是否在某个时间范围内