1、DOM简介
节点:构成HTML文档最基本的单元。
常用节点分为四类:
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本结点:HTML标签中的文本内容
2、事件:用户和浏览器之间的交互行为。
3、文档的加载
onload事件会在整个页面加载完成之后才触发。
为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
window.onload = function(){
js语句;
};
4、dom查询
获取元素节点
- 通过document对象调用:
getElementById()
:通过id属性获取一个元素节点对象
getElementsByITagName()
:通过标签名属性获取一组元素节点对象
getElementsByName()
:通过name属性获取一组元素节点对象 - innerHTML用于获取元素内部的HTML代码,对于自结束标签,该属性没有意义。
- 如果需要读取元素节点属性:
直接使用:元素.属性名。 如:元素.name
注意:class属性不能采用这种方式, 方法:元素.className
5、
获取元素节点的子节点 - 通过具体的元素节点调用
getElementsByITagName()
:方法,返回当前节点的指定标签名后代节点
chileNodes
:属性,表示当前节点的所有子节点
该属性会获取包括文本结点在内的所有节点
firstChild
:属性,表示当前节点的第一个子节点
lastChild
:属性,表示当前节点的最后一个子节点
获取父节点和兄弟节点 - 通过具体的节点调用
parentNode
:属性,表示当前节点的父节点
previousSibling
:属性,表示当前节点的前一个兄弟节点
nextSibling
:属性,表示当前节点的后一个兄弟节点 - 定义一个函数。专门用来为指定元素绑定单击响应函数
参数:
idStr:要绑定单击响应函数的对象的id属性值
fun:事件的回调函数,当单击元素时,该函数将会被触发
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onlick = fun;
}
innerText
该属性可以获取到元素内部的文本内容
他和innerHTML类似,不同的是它会自动将html去除。
6、
获取body标签:var body = document.body;
获取html根标签:var html = document.documentElement;
获取页面中所有元素:var all = document.all;
需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点的对象:
document.querySelector()
该方法总会返回唯一的一个元素,若满足条件的有多个,仍只返回第一个元素。
虽然IE8中没有getElementsByClassName(),但是可以使用上述方法代替。
document.querySelectorAll()
:和上述方法类似,但不同的是他会将符合条件的元素封装到一个数组中。就算只有一个元素,也会返回数组。
7、
document.createElement()
:可以用于创建一个元素节点对象。
他需要一个标签名作为参数,将会根据该标签名创建元素节点对象,并将创建好的对象作为返回值返回。
document.createTextNode()
:可以用来创建文本节点对象。
需要一个文本内容作为参数,将会根据该内容创建文本结点,并将新的节点返回
appendChild()
:向一个父节点中添加一个新的子节点。
用法:父节点.appendChild(子节点);
insertBefore()
:可以在指定的子节点前插入新的子节点。
用法:父节点.insertBefore(新节点,旧节点);
replaceChild()
:可以使用指定的子节点替换已有的子节点。
用法:父节点.replaceChild(新节点,旧节点);
removeChild()
:删除一个子节点。
用法:父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点)
:对于父节点不明确的子节点
8、
confirm()
:用于弹出一个带有确认和取消按钮的提示框。
需要一个字符串作为参数,该字符串将会作为提示文字显示出来。
如果用户点击确认,将返回true;点击取消,返回false。
- 删除tr的响应函数。 -----T104尚硅谷
9、使用DOM操作
- 通过JS修改元素的样式
语法:元素.style.样式名=样式值
注意:如果样式名含有-,在JS中使不合法的。需要将这种样式名改为驼峰命名。
我们通过style属性设置的样式都是内联样式,而内联样式具有较高的优先级,所以修改后往往会立即显示。
但如果是在样式中写了!important,此时样式会有最高的优先级。 - 读取样式
语法:元素.style.样式名
通过style属性设置和读取到的都是内联样式,无法读取样式表的中的样式。
10、读取样式拓展
获取元素的当前显示的样式:
语法:元素.currentStyle.样式名
他可以用来读取当前元素正在显示的样式。
但只有IE浏览器支持。
在其他浏览器中可以使用getComputedStyle()
这个方法来获取元素当前样式。
这个方法时window方法,可以直接使用。
需要两个参数:
1、要获取样式的元素
2、可以传递一个伪元素,一般都传递null
该方法会返回一个对象,对象中封装了当前元素对应的样式。
可以通过对象.样式名来读取样式,如果获取的样式没有设置,则会获取到真实的值,而不是默认值。
但是该方法不支持IE8及以下的浏览器。
正常浏览器的方式:
alert(getComputedStyle(box1,null).backgroundColor);
IE8的方式:
alert(box1.curremtStyle.backgroundColor);
- 定义一个函数,用来获取指定元素的当前样式:
参数:
obj 要获取样式的元素
name 要获取的样式名
function getStyle(obj,name){
if(window.getComputedStyle) {
//正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
}
else {
//IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj, null)[name]:obj.currentStyle[name];
11、其他样式操作的属性
-
clientWidth
clientHeight
这两个属性可以获取元素的可见宽度和高度。
这些属性都是不带px的,返回都是一个数字,可以直接进行计算。
会获取元素宽度和高度,包括内容区和内边距。
这些属性都是只读的,不能修改。 -
offsetWidth
offsetHeight
获取元素的整个宽度和高度,包括内容区、内边距和边框。 -
offsetParent:用来获取当前元素的定位父元素。
他会获取到离当前元素最近的开启了定位的祖先元素。
如果所有的祖先元素都没有开启定位,将会返回body。 -
offsetLeft:当前元素相对于其定位父元素的水平偏移量。
offsetTop:当前元素相对于其定位父元素的垂直偏移量。 -
scrollWidth
scrollHeight
可以获取元素整个滚动区的宽度和高度 -
scrollLeft:获取水平滚动条滚动的距离
scrollTop:获取垂直滚动条滚动的距离
当满足scrollHeight- scrollTop == clientHeight
时,说明垂直滚动条滚动到底了。
当满足scrollWidth- scrollLeft == clientWidth
时,说明水平滚动条滚动到底了。
onscroll:该事件会在元素的滚动条滚动时触发。
为表单项添加disabled="disabled"
,则表单项将变成不可用状态。
disabled属性可以设置一个元素是否禁用,若为true,则禁用;为false,则可用。
12、事件对象:当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。
在事件对象中,封装了当前事件相关的一切信息,如鼠标的坐标,鼠标滚轮滚动的方向,键盘哪个键被按下。 -
onmousemove:该事件将会在鼠标在元素移动时被触发。
-
clientX:可以获取鼠标指针的水平坐标
clientY:可以获取鼠标指针的垂直坐标
(用于获取鼠标在当前的可见窗口的坐标,div的偏移量是相对于当前页面的坐标)
在IE8中,响应函数被触发时,浏览器是不会传递事件对象的。
在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的。
pageX,pageY
可以获取鼠标相当于当前页面的坐标,但在IE8中不支持。