前端之DOM操作
一、概念
javascript
- javascript是一种脚本语言,可以被浏览器解析,所以它可以称之为前端的三把利器之一。
- javascript跟java没有半毛钱关系。
- 声明局部变量:使用关键字var
- 应用场景:当Selenium定位不到元素时,就要使用js代码来定位了。
Dom
- Document object model文档对象模型
- 它就是把死板的标签变成可以通过方法调用的对象,对象里面囊括了页面里的所有元素、功能。
- 通过Dom提供的调用方式,来操纵这个页面当中的元素。类似于对象,它可以调用里面任何的东西。
- dom想操作页面,是因为有一套定位功能。
js+dom
- 是有逻辑性的操作页面
- js是脚本语言,可以写逻辑性代码
- dom是文档对象模型,可以直接操作页面
- js与dom的关系,就类似于python之与对象
js局部变量的使用:
二、DOM的具体功能
(一)定位元素
1、直接定位
(1)通过id进行定位
document.getElementById('inner1')
- 缺点:如果这个元素没有id就无法定位到了。
(2)通过class属性定位
document.getElementsByClassName('inner')
- 使用.getElementsByClassName(),可以获取列表
- 优点:如果没有id属性,可以使用class属性定位到。
- 缺点:费事,如果有直接能定位到的方法,绝对不要用加s的这种方式。
(3)通过标签进行定位
document.getElementsByTagName('input')
- 使用.getElementsByTagName(),可以获取列表
- 优点:如果没有id属性,可以使用标签属性定位到。
- 缺点:费事,如果有直接能定位到的方法,绝对不要用加s的这种方式。
(4)通过标签的name属性进行定位
document.getElementsByName('username')
- 使用.getElementsByClassName(),可以获取列表
- 优点:如果没有id属性,可以使用标签属性定位到。
- 缺点:费事,如果有直接能定位到的方法,绝对不要用加s的这种方式。
2、从能定位到的相邻的元素来定位
(1)获取子标签元素
- 通过.children[]方法来定位子标签元素
var tmp=document.getElementById('inner1')
tmp
tmp.children[1]
(2)获取第一个子标签元素、最后一个子标签元素
- 通过.firstElementChild方法来定位第一个子标签元素
- 通过.lastElementChild方法来定位最后一个子标签元素
var tmp=document.getElementById('inner1')
tmp
tmp.firstElementChild
tmp.lastElementChild
(3)获取父元素
通过.parentElement方法获取父节点标签元素
var tmp=document.getElementById('inner1')
tmp
tmp.parentElement
(4)获取下一个兄弟标签元素
- 通过.nextElementSibling方法获取下一个兄弟标签元素
var tmp=document.getElementById('inner1')
tmp
tmp.nextElementSibling
(5)获取上一个兄弟标签元素
- 通过.previousElementSibling方法获取上一个兄弟标签元素
var tmp=document.getElementById('inner1')
tmp
tmp.previousElementSibling
(二)操纵元素
- 在dom中,只要能操纵的元素,就能修改。
1、操纵行内标签、块级标签
(1)获取元素值
- 通过.value方法来获取元素值
var tmp=document.getElementById('inner1')
tmp
tmp.lastElementChild.value
(2)修改元素值
- 通过给获取到的元素赋值来修改
tmp.lastElementChild.value='lrx'
(3)获取到标签内容再修改
(a).innerText方法获取标签名
- 通过.innerText方法只能获取到标签名
var tmp=document.getElementById('inner1')
tmp
tmp.innerText
通过赋值进行修改
- innerText用来修改标签内的文本内容,也就是说,它只修改标签与标签之间夹着的内容,必须是闭合标签。
(b)获取标签中所有内容
- 通过.innerHTML方法获取到标签中的所有内容
var tmp=document.getElementById('inner1')
tmp
tmp.innerHTML
(c)区别与联系
- innerText修改目标元素的文本内容,如果赋值的内容是<p></p>这种包含标签的字符串,则修改后依旧会以字符串的形式存储;
- innerHTML如果赋值的内容包含是包含标签的字符串,会直接转成标签。
2、操纵select标签
(1)获取元素值
(a)通过.value方法
- select标签赋值元素值,可以根据页面上元素内容的变化而变化:
- 必须要赋值选项中存在的值,不存在的赋值完了也是空:
(b)通过.selectedIndex方法
- 输入已有元素的下标值,可以定位到元素:
3、操纵样式
(1).className方法
- 通过.className方法,可以定位到同时有两个样式的元素:
var tmp=document.getElementById('clst')
tmp
tmp.className='tmp2 inner'
(2).classList方法
- 通过.classList方法,可以获取到样式列表(这个列表不是真的列表,但可以用列表方式进行操作):
- 缺点:只能操作已经存在样式的元素
(a)删除样式
- 使用.classList.remove('样式名')方法
(b)添加样式
- 使用.classList.add('样式名')方法
(3).style方法
- 优点:可以直接添加原来没有的样式。
- 在工作中,经常会遇到display属性=none的情况,开发会在上面再盖一层好看的样式,这样我们会定位不到,此时就要使用这个方法了,将最下面那层定位到。
- .style方法操作的是标签中的属性。
(a)直接添加没有的样式:
添加前:
由于tmp.style是操作的标签中的属性,而标签此时没有width这个属性,所以定位不到:
添加后:
实际上是将属性添加到标签上了:
(b)定位到被隐藏的元素:
隐藏元素:
var tmp=document.getElementById('clst')
tmp
tmp.style.display='none'
还原被隐藏的元素:
var tmp=document.getElementById('clst')
tmp
tmp.style.display=''
(c)css与js的一点区别
- 在css中,style=background-color属性是-color,而js无法解析-,所以会将css中有-的属性都变成-后面的第一个字母大写,变成backgroundColor。
- 如果在js中仍然按照css中的写法去写,会报错:
正确写法:
var tmp=document.getElementById('clst')
tmp
tmp.className='tmp1 inner'
tmp.style.backgroundColor='green'
tip:
1、简便方法,直接看提示:从下图红框中的提示中可以看出:select为标签名,#代表这个标签有名为s1的id属性,如果有.代表这个标签有名为xxx的class属性,定位的时候就不用特意去点进去看了。
2、同时使用多个class样式时,使用空格分隔,即:
#伪代码:
<header>
.c1{}
.c2{}
</header> <body>
<div class="c1 c2"></div>
</body>
前端之DOM操作的更多相关文章
- 笔记 前端的$dom操作
jqueryDOM操作 1. 页面加载 函数 $( function(){ 具体内容 } ); 表示页面加载函数 2 dom 类操作 text() - 设置或返回所选元素的文 ...
- 【前端】DOM操作
1 什么是DOM 全称 Document Object Model 文档对象模型. 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通 ...
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- 前端页面卡顿?或是DOM操作惹的祸,需优化代码
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
- 前端页面卡顿、也许是DOM操作惹的祸?
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
- Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码
文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScri ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
随机推荐
- 网络协议 15 - P2P 协议:小种子大学问
[前五篇]系列文章传送门: 网络协议 10 - Socket 编程(上):实践是检验真理的唯一标准 网络协议 11 - Socket 编程(下):眼见为实耳听为虚 网络协议 12 - HTTP 协议: ...
- ZZCMS v8.2 前台Insert注入+任意文件删除
前几天看了水泡泡老哥的zzcms的审计,在论坛上一搜发现这个cms有不少洞.听说很适合小白练手,所以来瞅一瞅.不知道我发现的这个洞是不是已经被爆过了,如果雷同,纯属巧合. 一.Insert注入,直接返 ...
- 【重学计算机】机组D7章:总线
1. 系统总线的特性及应用 总线概念:将计算机系统中各部件连接起来 总线分类:(外部/内部,系统/非系统,串行/并行,同步/异步...) 按用途分类: 存储总线:cpu与存储器 系统总线:连接存储总线 ...
- 【重学计算机】计组D3章:运算方法与运算器
1. 定点数运算及溢出 定点数加减法:减法化加法,用补码直接相加,忽略进位 溢出:运算结果超出了某种数据类型的表示范围 溢出检测方法:统一思想概括为正正得负或负负得正则溢出,正负或负正不可能溢出 方法 ...
- Flink-Kafka-Connector Flink结合Kafka实战
戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...
- RabbitMQ消息队列(一)-RabbitMQ的优劣势及产生背景
本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...
- EffectiveJava阅读笔记(一)
考虑用静态工厂方法代替构造器 一.概述 二.使用静态工厂的优势 获取类对象的两种方式: 使用公有构造方法 静态工厂方法 1.介绍 有名称 不必每次调用时创建一个新对象 可以返回原类型的任何子类型对象 ...
- c# Base64解密加密
private static string base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ...
- I/O输入流基础之FileInputStream
InputStream:是所有字节输入流的父类,其作用是:用这个流把网络数据(getOutputStream()),文件系统的数据读入内存 由与 public abstract class Inpu ...
- linux下nginx【反向代理】配置【负载均衡】配置
nginx 可以配置多个端口: 1.10088端口 配置反向代理,消除跨域问题. 2.10087端口 配置ip_hash模式的负载均衡,ip_hash可以绕开解决session共享的问题. nginx ...