天道酬勤,地道酬精,人道酬善,商道酬诚,业道酬精。
DOM身为 JavaScript 三大内容之一,虽然在真正的开发中用的不多,但是也是JS学习中不可或缺的一部分,DOM的学习相对来说比较简单,分享一下我之前的部分DOM笔记。能力有限,水平一般,不足之处,多多包涵。
DOM简介
DOM,全称Document Object Model,文档对象模型。
DOM是一组用来描述 js 代码怎样与 html 文档进行交互和访问的 web 标准,它定义了一系列对象、方法和属性,用于访问、操作和创建文档中的内容、结构、样式和行为。
DOM的版本介绍
DOM0
W3C组织成立之前,形成一个所谓的标准。这一遗留的DOM被所有浏览器厂商采用,并且已经作为“0级别”DOM正式纳入到W3C标准中。它在所有浏览器中有效。0级DOM,主要就是针对Document,定义了一些相关的属性和方法。
- 定义的属性和方法:
- 获取元素表单
form表单有特殊性,可以通过表单元素(input、textarea、select)的name属性,就可以获取form中的这些表单元素。而且它们共同构成了一个对象数组。用对象的方式来获取。
DOM1
在DOM1中制定了两个子规范:
-
DOM Core(核心部分):把xml文档设计为树形节点结构,并为这种结构的运行机制制订了一套规范化标准。同时定义了创建、编辑、操纵这些文档结构的属性和方法。
-
DOM HTML:针对HTML文档、标签集合,以及与个别HTML标签相关的元素定义了对象、属性和方法。
DOM1中获取获取元素方式:
- getElementById() 因为id在html标签中是唯一,所以我们通过id获取到的元素也是唯一;这种方法:效率,准确率都很高;不能批量选择元素。
var id = document.getElementById('ID');
- getElementsByTagName() 通过标签名获取元素,这种方法获取到的元素,是一个集合;返回一个由选取到的元素组成的一个类似数组的东西。如果页面中只有一个;那么返回的依然是一个集合,只是集合内的元素个数是1而已;
var lis = document.getElementsByTagName('li');
var li0 = document.getElementSByTagName('li')[0];
DOM0级方式所有的浏览器都支持,但是有一些麻烦,而且,功能不是很全面。节点之间的关系:非常麻烦,而且复杂,有浏览器的兼容性问题;功能较多,在未来,如果浏览器是大统一的时候,这种方式将会非常有用;
标准方法:效率高,获取快速,准确。
DOM2
DOM2增加了事件绑定功能:
- onmouseover 鼠标移上事件
- onmouseout 鼠标移出事件
- onmousemove 鼠标移动事件
DOM3
DOM3增加了验证功能 。
DOM重点
DOM主要是学习四块内容
- 操作节点
- 操作css
- 事件模型
- 定时器
下面就做简单介绍:
操作节点
操作元素节点
操作元素节点说白了就是对HTML中的元素节点进行增删改查。
- createElement( )创建元素节点
var div1 = document.createElement('div');
注意:创建好的元素,并没有添加进页面,需要手动添加到DOM的节点结构中。
- appendChild( )把元素追加到某个标签的最后边
var div1 = document.createElement('div');
div.appendChild(div1);
appendChild 把元素追加到某个标签的最后边,具体是添加到哪个节点的最后边,取决于是谁调用了这个方法。
- insertBefore( )把元素添加到指定元素的前边
var div2 = document.createElement('div');
div.insertBefore(div2);
- cloneNode ( ) 复制一个节点
var div3 = div.cloneNode();
- removeChild ( ) 删除一个节点
div.removeChild(div1);
removeChild 这个方法需要有父节点去调用,表示的是要删除父节点中的某个元素,要删除哪个元素取决于该方法接受的参数
操作属性节点
- 直接使用对象.属性这种方式打点调用,这是DOM0级提出的,只对html中定义的属性起作用,对于自定义属性无效。
div.title; //获取属性节点
div.title = "jianlai"; //设置属性节点:
- 使用DOM 提供的一个方法getAttribute()和setAttribute(),这个是DOM1级提出的。
getAttribute() 获取属性
由一个元素节点去调用,给它传递一个属性的名字,从而获得这个属性的值。
var res = oImg.getAttribute('abc')
setAttribute()设置属性
由一个元素节点调用,传递要设置的属性名和属性值;
oImg.setAttribute('abc','123');
操作文本节点
使用 innerHTML 进行赋值
var oList = document.getElementById('list');
oList.innerHTML = 12;
注意如果给innerHTML赋值,它会把标签中原来的内容都删除掉。
如果只是添加内容,怎么办,只要用+=这个运算符就可以了。
操作css
操作行内样式
用js控制行内样式,就是控制节点的style属性,每个节点的style属性中都存储了这个元素的css样式信息,所以,我们可以通过style这个属性去设置或者得到css的样式,但是只针对行内样式。
- 获取行内样式:节点元素 . style. 样式的名称
console.log(oBox.style.backgroundColor);
- 设置行内样式:对节点元素 . style. 样式的名称进行赋值
oBox.style.backgroundColor = 'red';
对于css中类似于text-align、background-color、margin-left …这样的形式,在js中不可以直接这样写,要写成驼峰的形式textAlign、backgroundColor、marginLeft
操作css类
操作css类就是通过 js 控制元素的类名发生变化,从而控制类名所控制的样式,发生改变,主要针对的是非行内样式。
注意,操作 css 类使用 className,因为 class 是ES6的关键字,所以使用 className。
当一个元素有很多的类名时,如果只是想改变其中的一个可以使用 replace来进行替换。
var oBox = document.getElementById('box');
var str = oBox.className;
var newStr = str.replace('one','two')
获取元素尺寸
- client系列
clientWidth:获取盒子或页面可视区域的宽度
clientHeight::获取盒子或页面可视区域的高度
clientTop:获取盒子的上边框的大小
clientLeft:获取盒子的左边框的大小
- offset系列
offsetWidth:获取盒子或页面可视区域的宽度+border
offsetHeight::获取盒子或页面可视区域的高度+border
offsetTop:获取一个定位元素相对于参考点的上面的距离
offsetLeft:获取一个定位元素相对于参考点的左面的距离
offsetParent:获取一个定位元素的参考点
- scroll系列:
scrollWidth:获取盒子或页面真实内容的宽度
scrollHeight:获取盒子或页面真实内容的高度
scrollTop:获取页面或盒子向上卷去的高度
scrollLeft:获取页面或盒子向左卷去的宽度
获取一张网页可视区的高度:document.body.clientHeight
获取一张网页真实的高度:document.body.scrollHeight
获取一张网页卷去的高度:document.body.scrollTop
事件模型
事件简介
js 中的时间类型主要包括以下几点:
- 鼠标点击
- 鼠标悬停
- 鼠标挪开
- 键盘敲击
- 表单的提交
- 滚动
事件三要素:
- 事件源:在哪个元素上发生的事件,具体发生了什么
- 事件:点击,悬停,键盘敲击
- 监听器:当事件发生时,做了什么,在js中,通常用一个函数来表示
注意:
- 事件源一般指的是一个元素(宿主对象)。
- 在事件里,一般的形式 是 onclick onmouserover 其中真正的事件是 click mouserover on其实只是一个修饰,表示要添加事件的意思。
- 监听器是一个匿名函数,但是这个函数不需要去调用,会有js引擎去调用,但是调用是有条件的,必须要触发添加好的事件,才会去调用这个函数。
事件绑定
事件绑定就是对事件源进行事件的绑定,主要有以下几种方式:
- HTML事件处理程序
- DOM 0级事件处理程序
- DOM 2级事件处理程序
HTML事件处理程序
直接把事件添加到HTML代码中
<div id="box" onclick="add()">hello ange</div>
DOM0 级事件处理程序
这种方式就是给节点对象添加方法
var oAll = document.getElementById('all');
oAll.onclick = function(){
alert(1);
}
DOM2 级事件处理程序
通过 addEventListener 进行添加事件:
oAll.addEventListener('click',function(){
alert(1);
}
注意:
- 事件类型不需要加on,而且事件类型是字符串
- 监听器执行的顺序,取决于添加事件的顺序
通过 removeEventListener 进行移除事件:
错误方法:
let box = document.querySelector('.box')
box.addEventListener('click', function () {
alert(999);
}, false)
box.removeEventListener('click', function () {
alert(999)
}, false)
//这两个函数虽然长得一样,但它们不是同一个函数
//所以这种办法是不能删除该绑定事件的
正确方法:
let box = document.querySelector('.box')
function fn(){alert('666')}
box.addEventListener('click',fn)
box.removeEventListener('click',fn)
//这种方法可行,而且点击事件一次也不会发生
let box = document.querySelector('.box')
box.addEventListener('click', function fn() {
alert('666');
this.removeEventListener('click', fn)
})
//这种方法会执行一次绑定事件,然后进行解绑
事件流及事件传播
在页面中,如果对某一个元素发生了事件,那么这个元素的所有祖先级都会触发相同的事件。
事件传递:某个事件会从当前点击的这个元素和它的最祖先的元素(document)之间进行传递。
传递是顺序的,顺序有两种:
1.从内往外传,叫冒泡
2.从外往内传,叫捕获
DOM0级添加的方式都是冒泡的
DOM2级的方式,主要看第三个参数,false表示的是冒泡,true表示的捕获
let box = document.querySelector('.box')
let box1 = document.querySelector('.box1')
box.addEventListener('click',function(){
alert('999')
},false)
box1.addEventListener('click',function(){
alert('666')
},false)
事件类型
在DOM中主要包括以下事件类型:
定时器
定时器的函数有两组,一共四个:
- setTimeout( ) 和 clearTimeout( )
- setInterval( ) 和 clearInterval( )
这四个函数都是属于window对象的,Window是可以省略的。
而且时间都是以毫秒为单位。
setTimeout()
setTimeout(要执行的任务,时间) 挂在window对象上的,表示的含义是,多长时间后,执行一个任务,仅仅执行一次。
setInterval(function(){
console.log('1s以后'); //执行的认为
},1000) //多久后执行,1000毫秒等于1秒
clearTimeout( )
clearTimeout( 延时器编号)用于清除定时器,和setTimeout()是对应的。
var timer = setTimeout(function(){
console.log('1s之后');
},1000)
clearTimeout(timer) //清除定时器
注意:timer所返回的是延时器序号。
setInterval( )
setInterval(任务,时间) 定时器,接受两个参数,一个是任务,一个是时间,每隔一定的事件就会执行任务。多次执行(一直执行),时间也是数值类型的,以毫秒为单位的.
var num = 0;
setInterval(function(){
num++;
console.log(num);
},2000);
clearInterval( )
clearInterval(定时器编号); 清除定时器
clearInterval(timer);