前端逼死强迫症之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图片) 压缩( ...
随机推荐
- Python之Flask
一.Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 .Flask使用 BSD 授权. Flask是一个轻 ...
- NoSql 使用小结
NoSql 使用小结 足够的冗余 如果出现要拿某个 id 去查另外的 collection 的情况,说明应该往这个增加所要查询的字段 实在要做关联查询的话,是不是应该考虑关系型的数据库,关系和非关系混 ...
- VBA For Each循环
For Each循环用于为数组或集合中的每个元素执行语句或一组语句.For Each循环与For循环类似; 然而,For Each循环是为数组或组中的每个元素执行的. 因此,这种类型的循环中将不存在步 ...
- ol li 兼容
ol 标签在 chrome 60 和 safari12 缩进不一样. 因为序号距离copy距离不一样,导致显示不一样.解决办法. list-style-position: inside;text-in ...
- vue-cli项目开发运行时内存暴涨卡死电脑
最近开发一个vue项目时遇到电脑卡死问题,突然间系统就非常卡,然后卡着卡着就死机了,鼠标也动不了了,只能冷启动.而且因为是突然卡死,没来得及打开任务管理器. 最开始以为是硬盘的问题,但是在卡死几次后, ...
- sql server with as只能查询一次
WITH Emp AS (SELECT acc.* FROM GXSpreadDB.dbo.gxs_account acc LEFT JOIN RYAccountsDB.dbo.AccountsInf ...
- 网站seo搜索引擎优化
SEO综合查询方式:http://seo.chinaz.com/网站地址(一般为域名地址),比如:http://seo.chinaz.com/www.test.com 搜索关键字(keywords)优 ...
- sql sever2008 R2 检测到索引可能已损坏。请运行 DBCC CHECKDB。
1.设置成单用户状态 USE MASTER ALTER DATABASE DBNAME SET SINGLE_USER; GO --DBNAME为修复的数据库名 2.执行修复语句,检查和修复数据库及索 ...
- 现在记录几款好用的vscode的插件
vscode 插件 Rainbow Brackets编码过程中,尤其在我们使用js进行函数式编程时,代码里会有很多的花括号,想要保证它们对称十分困难,所以就出现了上面小粉同学的尴尬局面,相信很多人都遇 ...
- windows 数据备份
xcopy 数据目录 备份目录 /e /c /q /h /r /y at 00:00 /every:M,T,W,Th,F,S,Su d:\批处理文件名