前端逼死强迫症之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图片) 压缩( ...
随机推荐
- Spring Cloud Alibaba学习笔记（12） - 使用Spring Cloud Stream 构建消息驱动微服务
什么是Spring Cloud Stream 一个用于构建消息驱动的微服务的框架 应用程序通过 inputs 或者 outputs 来与 Spring Cloud Stream 中binder 交互, ...
- 天梯赛 L3-002. 堆栈
思路:这里的线段树维护一个区间里面出现数的个数,对于Pop,push单点更新一下就好. #include<stdio.h> #include<iostream> #includ ...
- MonkeyRunner——Mac
1. MonkeyRunner介绍: Android的SDK中集成了三个可用来进行自动化测试的工具:Monkey.MonkeyRunner和Robotium.这三个测试工具都是基于黑盒测试. Monk ...
- 使用SAP Leonardo上的机器学习服务提取图片的特征向量
要想提取图片的特征向量,首先得知道特征向量是什么. 我们假设这样一个服务场景,技师上门维修某设备,发现上面某零件损坏了,假设这位技师由于种种原因,没能根据自己的经验识别出这个零件的型号.此时技师掏出自 ...
- 定制ubuntu镜像
使用ubuntu server 18.04 lts版镜像 作为源镜像定制目标镜像, 工具cubic, 定制目标镜像, 使得一些服务装机后即可使用,例如redis, mysql, monggodb ,s ...
- Formal Analysis of the TLS Handshake Protocol -----论文整理
1.关键词 TLS.SSL.Formal Analsysis Conridentiality Secerecy 2.Table THE SSL/TLS handshake Protocol 3 ...
- [TCP/IP][distributed] proxy protocol 是什么
问题描述: 在Web分布式系统中,一般会搭建复杂的load blance系统来提供高性能的web服务. load blance有4层网络的,也有7层网络的.再经过这样的分布式网络之后,后面真正提供服务 ...
- centos 中的vsftpd 配置
一.安装vsftpd 1.1 检查系统是否已经安装过vsftpd了 [root@localhost /]# rpm -aq vsftpd 如果返回结果显示: vsftpd--.el7.x86_64 # ...
- 基本排序-冒泡/选择/插入(python)
# -*- coding: utf-8 -*- import random def bubble_sort(seq): n = len(seq) for i in range(n-1): print( ...
- evpp下载1个文件
上传一个文件无错误 如何下载一个文件?? 集群?? http pdf 直接 redbuf