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相关推荐

  1. 【用SQLite做数据分析】Python操作SQLite的入门介绍

    本篇推文共计2000个字,阅读时间约3分钟. Python 进行数据分析和数据挖掘是当前炙手可热的技术领域,如何高效地管理大量数据是其中非常关键的环节.数据库是最佳的解决方案之一,目前流行的数据库有 ...

  2. python资料库-Python操作三大主流数据库

    学会使用的技术栈:python flask redis mongoDB mysql 第1章 数据库简介 简单介绍Mysql.数据库简介.导学篇 第2章 mysql基础 XAMPP 集成好的 最流行的P ...

  3. java连接mongodb_第78天: Python 操作 MongoDB 数据库介绍

    MongoDB 是一款面向文档型的 NoSQL 数据库,是一个基于分布式文件存储的开源的非关系型数据库系统,其内容是以 K/V 形式存储,结构不固定,它的字段值可以包含其他文档.数组和文档数组等.其采 ...

  4. python提取hbase数据_详解python操作hbase数据的方法介绍

    配置 thrift python使用的包 thrift 个人使用的python 编译器是pycharm community edition. 在工程中设置中,找到project interpreter ...

  5. Python操作Excel表格的模块xlrd的简单介绍

    Python操作Excel表格的模块xlrd的简单介绍 处理数据对Python来说,比较容易,操作简单,功能强大,短短几行代码,就可处理大量的数据信息,下面介绍Python处理Excel表格的一个模块 ...

  6. Elasticsearch的介绍 以及使用python操作es详细步骤

    一. 什么是 Elasticsearch 想查数据就免不了搜索,搜索就离不开搜索引擎,百度.谷歌都是一个非常庞大复杂的搜索引擎,他们几乎索引了互联网上开放的所有网页和数据.然而对于我们自己的业务数据来 ...

  7. python操作word文档(python-docx)

    python操作word文档(python-docx) 1. 效果图 1.1 python-docx文档标题段落(等级.加粗.斜体.居中)效果图 1.2 python-docx字体(加粗.斜体.居中. ...

  8. python操作yaml的方法详解

    这篇文章主要为大家介绍了python操作yaml的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助 一.参考链接 https://pyyaml.org/wiki/PyYAM ...

  9. python连接excel存放数据_有了这篇python操作Excel学习笔记,以后储存数据 办公很轻松!...

    最近在做一些数据处理和计算的工作,因为数据是以.csv格式保存的,因此刚开始直接用Excel来处理.但是做着做着发现重复的劳动其实并没有多大的意义,于是就想着写个小工具帮着处理.以前正好在一本书上看到 ...

最新文章

  1. 10 Reasons Why Your Projects Should Use the Dojo
  2. UA SIE545 优化理论基础 用Farkas定理证明Farkas类的结论
  3. qq android2.0,取代QQ?腾讯TIM安卓2.0发布:10GB云盘免费用
  4. 在Object-C中学习数据结构与算法之排序算法
  5. idea 快捷键整理
  6. maya中英文对比_maya中英文对照表
  7. java ftp获取文件夹大小,java 用FTPClient 下载文件时不显示总大小?解决方案
  8. java演练代码 银行取款演练 java
  9. 【python数据分析】用python进行数据探索2(常见matplotlib及pandas绘图函数汇总、对比及拓展)
  10. 在网页子文本框模拟特定的鼠标滚轮_Pyhton爬虫的另类操作,之前有碰到不能爬的网页来看看!...
  11. 求解偏微分方程开源有限元软件deal.II学习--Step 13
  12. 如何优化 Java 性能? 1
  13. php 中的关联数组 介绍
  14. HDFS原理(超详解)
  15. 如何在线压缩图片?电脑怎么缩小图片kb大小?
  16. 程序员的自我进化:共享经济新模式——共享员工
  17. Maven的学习与2022IDEA创建Maven的web项目的教程(这个比上一期更“啰嗦哦~,前面不想删了,整体再来一遍”)
  18. android人脸情绪识别器,Emotion Recognition微软人脸情绪识别器
  19. 用HTML绘制哆啦A梦
  20. 合工大机器人足球仿真考试题56题(底层uva)

热门文章

  1. java中循环语句_Java语法基础之循环结构语句详解
  2. inotifypropertychanged接受不执行_死刑立即执行很好理解,缓期2年执行是什么意思?是2年后再执行吗...
  3. java null 转空_java 对象属性为 null 值转为 空串
  4. Knative 多容器支持介绍
  5. 阿里技术 2019 年度热文 Top10 出炉,你错过哪些?
  6. mysql 按照in id顺序_Mysql查询结果顺序按in()中ID的顺序排列的案例区分
  7. 你在「动森」里遇到的那些「丑动物」,后来怎么样了?
  8. Tomcat和Resin有什么区别,工作中你怎么选择?
  9. 数据库面试题【十、【非关系型数据库】和【关系型数据库】的【区别】与【优势比较】】
  10. 判断当前时间是否在某个时间范围内