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的更多相关文章

  1. 前端逼死强迫症系列之javascript续集

    一.javascript函数 1.普通函数 function func(){ } 2.匿名函数 setInterval(function(){ console.log(123); },5000) 3. ...

  2. 前端逼死强迫症系列之javascript

    JavaScript 和Python.C#.Java.Ruby一样,都是一门独立的编程语言. 像python.C.Java等都需要解释器,学习它们的语法.而浏览器本身就是javascript的解释器. ...

  3. 前端逼死强迫症之css续集

    上节内容回顾 如果点击图片调转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框. 因为a标签默认字体颜色就是蓝色,img标签继承了父级标签,而IE浏览器默认给边框加了宽度.解决: < ...

  4. 前端逼死强迫症系列之css

    一.编写css样式 1.ID选择器 由于ID唯一,所以也是写多遍. <head> <style> #i1{ background-color: #2459a2; height: ...

  5. 前端逼死强迫症系列之Html

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  6. 【BZOJ5505】[GXOI/GZOI2019]逼死强迫症(矩阵快速幂)

    [BZOJ5505][GXOI/GZOI2019]逼死强迫症(矩阵快速幂) 题面 BZOJ 洛谷 题解 如果没有那两个\(1*1\)的东西,答案就是斐波那契数,可以简单的用\(dp\)得到. 大概是设 ...

  7. [LOJ3086][GXOI/GZOI2019]逼死强迫症——递推+矩阵乘法

    题目链接: [GXOI/GZOI2019]逼死强迫症 设$f[i][j]$表示前$i$列有$j$个$1*1$的格子的方案数,那么可以列出递推式子: $f[i][0]=f[i-1][0]+f[i-2][ ...

  8. P5303 [GXOI/GZOI2019]逼死强迫症

    题目地址:P5303 [GXOI/GZOI2019]逼死强迫症 这里是官方题解 初步分析 从题目和数据范围很容易看出来这是一个递推 + 矩阵快速幂,那么主要问题在于递推的过程. 满足条件的答案一定是以 ...

  9. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

随机推荐

  1. 面试必问:Golang高阶-Golang协程实现原理

    引言 实现并发编程有进程,线程,IO多路复用的方式.(并发和并行我们这里不区分,如果CPU是多核的,可能在多个核同时进行,我们叫并行,如果是单核,需要排队切换,我们叫并发) 进程和线程的区别 进程是计 ...

  2. 天梯赛 L2-023. 图着色问题

    题解:用dfs遍历图的每条边就好,这里注意要求颜色的个数为k #include <cstdio> #include <iostream> #include <cstrin ...

  3. SVN_05用戶管控

    安全性设置 [1]在左侧的User上点击右键 输入上面的信息,点击OK,我们就创建一个用户了. 说明:注意到了下面图中的Groups,是的,也可以先创建组,把用户添加到各个组中,然后对组进行授权,操作 ...

  4. [转]Entity Framework 异常: 'OFFSET' 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效

    https://blog.csdn.net/weixin_34321977/article/details/85850064 在使用 EF 的时候,突然发现更新后在服务器中运行出错,异常信息主要包含以 ...

  5. 编写Postgres扩展之一:基础

    原文:http://big-elephants.com/2015-10/writing-postgres-extensions-part-i/ 编译:Tacey Wong Postgres提供了广泛的 ...

  6. R_数据视觉化处理_初阶_02

    通过数据创建一幅简单的图像, #Crate a easy photopdf("mygraph.pdf") attach(mtcars) plot(wt,mpg) abline(lm ...

  7. 【已解决】极速迅雷win10闪退解决方案

    [已解决]极速迅雷win10闪退解决方案 本文作者:天析 作者邮箱:2200475850@qq.com 发布时间: Wed, 17 Jul 2019 18:01:00 +0800 在吾爱下载了个极速迅 ...

  8. 一语道破Java 11的ZGC为何如此高效

    GC是大部分现代语言内置的特性,Java 11 新加入的ZGC号称可以达到10ms 以下的 GC 停顿,本文作者对这一新功能进行了深入解析.同时还对还对这一新功能带来的其他可能性做了展望.ZGC是否可 ...

  9. JAVA笔记整理(二),下载安装JDK

    Windows平台 1.登录Oracle官方网站(http://www.oracle.com/index.html),找到下载 2.选择要下载的版本,点击JDK DOWNLOAD 3.下载文件,先勾选 ...

  10. 第十三篇:socket网络编程

    本篇主要介绍网络编程的基础,以及UDP/TCP网络的socket编程,关于UDP套接字聊天器的实现.以及基于TCP套接字的服务器/客户端的实现上传下载功能. 一.网络通信 关于网络通信即通过网络(介质 ...