前端逼死强迫症之DOM
Dom：document。相当于把所有的html文件，转换成了文档对象。
之前说过：html-裸体的人；css-穿上衣服；js-让人动起来。
让人动起来，就得先找到他，再修改它内容或属性。
- 找到标签
- 操作标签
- 事件
一、查找元素
1.直接查找
document.getElementById('i1') 根据ID获取一个元素
document.getElementsByTagName('div') 根据标签名获取标签集合
document.getElementsByClassName('div') 获取class多个元素(列表)
document.getElementsByName 获取name多个元素(列表)
2.间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二、操作标签
1.内容操作
标签.innerText 获取标签中的文本内容
标签.innerText = "" 对标签内部文本进行重新复制
outerText
innerHTML HTML内容
innerHTML
value 值
2.样式操作
className
tag.className='c1' 直接整体做操作
tag.classList.add('c2') 添加指定样式
tag.classList.remove('c2') 删除指定样式 PS：onclick点击操作
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
className // 样式，返回字符串
classList // 样式，返回数组
classList.add() // 添加样式
classList.remove() // 移出样式
- 更细力度设置样式
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"
3.属性操作
setAttribute(key,value) // 设置标签属性
removeAttribute(key) // 移除标签属性
attributes // 获取所有标签属性
getAttribute(key) // 获取指定标签属性
创建标签，并添加到HTML中：
- a. 字符串形式
- b. 对象的方式
document.createElement(‘div’)
<body>
<input type="button" onclick="AddEle1();" value="+" />
<input type="button" onclick="AddEle2();" value="+" />
<div id="i1">
<p><input type="text" /></p>
</div>
<script>
// 第一种添加方式：字符串形式
function AddEle1(){
// 创建一个标签
// 将标签添加到i1里面
var tag = "<p><input type='text'/></p>";
// 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
// 第二种添加方式：对象的方式
function AddEle2(){
// 创建一个标签
// 将标签添加到i1里面
var tag = document.createElement('input');
tag.setAttribute('type', 'text');
tag.style.fontSize = '16px';
tag.style.color = 'red'; var p = document.createElement('p');
p.appendChild(tag);
document.getElementById('i1').appendChild(p);
}
</script>
</body>
4.提交表单
默认情况下：只有多行文本textarea、下拉框select 和input 标签可以数据提交到后台。
通过DOM任何标签都可提交表单。
<body>
<form id="f1" action="http://www.cnblogs.com/lixiaoliuer/p/7155938.html">
<input type="text" />
<input type="submit" value="提交1" />
<a onclick="submitForm();">提交2</a>
</form>
<script>
function submitForm(){
document.getElementById("f1").submit()
}
</script>
</body>
5.其他操作
console.log // 输出框
alert // 弹出框
confirm // 确认框
// URL和刷新
location.href // 获取当前URL
location.href = "url" // 设置URL 重定向
location.reload() // 重新加载，刷新
// 定时器
setInterval // 多次定时器
clearInterval // 清除多次定时器
setTimeout // 单次定时器
clearTimeout // 清除单次定时器
<body>
<form id="f1" action="http://www.oldboyedu.com">
<input type="text" />
<input type="submit" value="提交1" />
<a onclick="submitForm();">提交2</a>
</form>
<script>
function submitForm(){
//document.getElementById('f1').submit()
//alert(123);
var v = confirm('真的要提交吗？');
console.log(v);
// v 鼠标点击确定、取消的返回值。
}
// 定时器，一直执行
var obj = setInterval(function(){
console.log(1);
clearInterval(obj); // 清除定时器
}, 1000);
// 定时器，只执行一次
setTimeout(function () {
console.log('timeout');
},15000);
</script>
</body>
浏览器console日志中，看运行输出信息
<body>
<div id="status"></div>
<input type="button" value="删除" onclick="DeleteEle();" />
<script>
function DeleteEle(){
document.getElementById('status').innerText = "已删除";
setTimeout(function () {
document.getElementById('status').innerText = "";
}, 3000);
}
</script>
</body>
删除显示信息，显示3秒后自动消失
三、事件
1.行为 样式 结果相分离的页面
- 实现表格，鼠标移上去后，变色
<body>
<table border="1" width="300px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
function t1(n){
var myTrs = document.getElementsByTagName("tr")[n];
// console.log(myTrs);
myTrs.style.backgroundColor = "red";
}
function t2(n){
var myTrs = document.getElementsByTagName("tr")[n];
myTrs.style.backgroundColor = "";
}
</script>
</body>
- 优化后 —> 行为(js) 样式(css) 结构(html) 相分离
<body>
<table id="i1" border="1" width="300px">
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function(){
// 谁调用这个函数，this指向谁
this.style.backgroundColor = "red";
};
myTrs[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
</script>
</body>
2.绑定事件的两种方式
- a. 直接标签绑定 onclick=’xxx()’ onfocus
- b. 先获取Dom对象，然后进行绑定
- document.getElementById(‘xx’).onclick
- document.getElementById(‘xx’).onfocus
a. 第一种绑定方式：直接标签绑定
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(ths){
// ths(形参) 当前点击的标签
}
b. 第二种绑定方式：先获取Dom对象，然后进行绑定
<input id='i1' type='button' >
document.getElementById('i1').onclick = function(){
// this 代指当前点击的标签
}
注意this这里不要乱用，两种绑定方式不同，this传入的时候也是不同的
c. 第三种绑定方式：同时绑定多个事件
<script>
var mydiv = document.getElementById("i1");
mydiv.addEventListener('click',function(){console.log('aaa'),false});
mydiv.addEventListener('click',function(){console.log('bbb'),false});
</script>
鼠标点击，同时执行以上两个，操作。第三个参数：默认就是false，false：冒泡模型；true：捕捉模型
3.作用域示例
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
// i=0,i=1,i=2
myTrs[i].onmouseover = function(){
this.style.backgroundColor = "red";
// myTrs[i].style.backgroundColor = "red";
// 为什么这里必须用this，不能用myTrs[i]？ 因为作用域不同，js是以函数作为作用域的
};
}
前端逼死强迫症之DOM的更多相关文章
- 前端逼死强迫症系列之javascript续集
一.javascript函数 1.普通函数 function func(){ } 2.匿名函数 setInterval(function(){ console.log(123); },5000) 3. ...
- 前端逼死强迫症系列之javascript
JavaScript 和Python.C#.Java.Ruby一样,都是一门独立的编程语言. 像python.C.Java等都需要解释器,学习它们的语法.而浏览器本身就是javascript的解释器. ...
- 前端逼死强迫症之css续集
上节内容回顾 如果点击图片调转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框. 因为a标签默认字体颜色就是蓝色,img标签继承了父级标签,而IE浏览器默认给边框加了宽度.解决: < ...
- 前端逼死强迫症系列之css
一.编写css样式 1.ID选择器 由于ID唯一,所以也是写多遍. <head> <style> #i1{ background-color: #2459a2; height: ...
- 前端逼死强迫症系列之Html
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- 【BZOJ5505】[GXOI/GZOI2019]逼死强迫症（矩阵快速幂）
[BZOJ5505][GXOI/GZOI2019]逼死强迫症(矩阵快速幂) 题面 BZOJ 洛谷 题解 如果没有那两个\(1*1\)的东西,答案就是斐波那契数,可以简单的用\(dp\)得到. 大概是设 ...
- [LOJ3086][GXOI/GZOI2019]逼死强迫症——递推+矩阵乘法
题目链接: [GXOI/GZOI2019]逼死强迫症 设$f[i][j]$表示前$i$列有$j$个$1*1$的格子的方案数,那么可以列出递推式子: $f[i][0]=f[i-1][0]+f[i-2][ ...
- P5303 [GXOI/GZOI2019]逼死强迫症
题目地址:P5303 [GXOI/GZOI2019]逼死强迫症 这里是官方题解 初步分析 从题目和数据范围很容易看出来这是一个递推 + 矩阵快速幂,那么主要问题在于递推的过程. 满足条件的答案一定是以 ...
- 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
随机推荐
- 怎样获取当前页面框架的数量(即iframe和frame的数量)
需要使用window.length, 或者window.frames.length; 如果页面中不包含frame和iframe元素, 则返回0; window.length === window.fr ...
- HTTP协议超级详解
HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数据通信的基础. ...
- Java 之 文件过滤器
在学习过滤器之前,先来做一个案例. 题目:文件搜索,搜索 D:\java 目录中 .java 文件. 分析: 1. 目录搜索,无法判断多少级目录,使用递归,遍历所有目录 2. 遍历目录时,获取的子 ...
- K2 BPM_加班党们，说好不哭还是说好不秃？_流程管理
早上经过财务小陈的办公桌 看到她正边看手机边默默流泪 诶?这不是这两天刷屏的 周杰伦的<说好不哭>吗 小陈你怎么哭啦,这歌让你想到前男友了吗? ...... (摇头) 小陈擦擦眼泪 唱起了 ...
- 转载 AI-Talking 图算法
https://mp.weixin.qq.com/s/2XRgJr-ydxHA3JxAZ_5HeA 图算法在风控业务的实践 直播行业中有很多业务风控问题,比如说批量注册.刷热度.垃圾信息以及薅羊毛等. ...
- windows上安装python虚拟环境
一.windows上安装python虚拟环境 1.安装pip install virtualenvvirtualenv --version 2.新建一个python虚拟环境virtual_env_01 ...
- linux跳板机开发之trap信号机应用
场景1:公司新招聘了一个配置管理员,他的工作是负责将公司开发人员写的新代码依次分发到办公室测试环境.IDC测试环境和正式线上环境.因此公司需要开发一个程序,当配置管理员登录服务器,只能进入分发的管理界 ...
- Dism++备份还原系统
使用dism++备份和还原需要下载该工具,并选择与系统对应的Dism++x64或Dism++x32运行进行操作. Dism++网络下载地址:http://www.chuyu.me/zh-Hans/in ...
- tomcat部署(一)
Tomcat部署最佳实践 标签: linux 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 tomcat是玩web软件必会技能之一,今天我给大家介绍一下tomc ...
- grafana忘记登陆密码
找到grafana的数据文件grafana.db find / -name "grafana.db" ps:默认的安装路径为/var/lib/grafana/grafana.db ...