JS基础之DOM文档对象模型

最新推荐文章于 2024-04-24 21:16:49 发布

C先生20190721

最新推荐文章于 2024-04-24 21:16:49 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/czxvzxzczcc/article/details/99707005

版权

一、概念

浏览器已经为我们提供文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。

二、事件

我们可以在事件对应的属性中设置一些JS代码，，但我们的事件被触发时，这些代码会执行
onclick ondblclick onmousemove....

事件：
- 用户和浏览器之间的交互行为，
比如：点击按钮，鼠标移动，关闭窗口。。。

三、文档的加载

浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取一行就运行一行，如果将script标签写到页面的上边，在执行代码时。页面还没有加载。将JS代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行JS代码

onload 事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的影响函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕。

四、DOM查询节点

getElementByld()
- 通过id属性获取一个元素节点对象

getElementsByTagName()
- 通过标签名获取一个元素节点对象
这个方法会给我们返回一个类的数组对象，所有查询的元素都会封装到对象中
即使查询到的元素只有一个，也会封装到数组中返回

getElementsByName()
- 通过name属性获取一个元素节点对象

在document中有一个属性body，它保存的是body的引用

document.documentElement保存的是html根标签

document.all 代表页面中所有的元素

根据元素的class属性值查询一组元素节点对象
getElementsByClassName可以根据class属性值获取元素节点对象
但是该方法不支持IE8及一下浏览器

document.querySelector()
- 需要一个选择器的字符串作为参数，它可以根据一个CSS选择器来查询一个元素节点对象
- 虽然IE8中没有getElementsByTagName，但是可以使用document.querySelector()代替
- 使用该方法，它总会返回唯一的一个元素，如果满足条件的有多个，那么它只返回第一个

querySelectorAll() 该方法和querySelector()类似，不同的是它会将符合条件的元素封装到一个数组中返回，即使符合条件的元素只有一个，他也会返回数组

五、DOM操作节点

appendChild():把新的节点添加到指定节点

removeChild():删除子节点

replaceChild():替换子节点

insertBefore():在指定的子节点前面插入新的子节点

createElement():创建元素节点

createTextNode():创建文本节点

createAttribute():创建属性节点

getAttribute():返回指定的属性值

setAttribute():把指定的属性值设置或修改为指定的属性值

parentNode():以Node对象的形式返回指定节点的父节点，如果没有父节点则返回null

childNodes():以NodeList对象返回节点的子节点集合

attributes():元素的属性节点

nodeName():节点的名称

nodeValue:节点的值

nodeType():节点的类型

六、使用DOM读取样式

获取元素的当前显示样式
语法：
元素.currentStyle.样式名
alert(box1.currentStyle.backgroundColor);
它可以读取当前元素正在显示的样式
如果当前元素没有设置样式，则获取他的默认值

上面的方法只在IE中使用,其他浏览器都不支持

在其他浏览器中用 getComputedStyle()
这个方法是window的方法，所以直接使用
语法：
getComputedStyle().样式名

两个参数：
第一个：要获取的元素
第二个：可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象.样式名来获取样式
如果获取的样式没有设置，则会获取到真实的值，而补水默认值
比如，没有设置width，他不会获取到auto，而是一个长度
但是该方法又不支持IE8及其以下的浏览器

通过currentStyle和getComputedStyle读取到的样式都是只读的
不能修改，如果要修改必须通过style属性

/*
定义一个函数，用来获取指定元素的当前样式
参数：
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];

/*if(obj.currentStyle){
return obj.currentStyle[name];
}else {
return getComputedStyle(obj,null)[name];
}*/

}

七、使用DOM操作CSS

通过JS修改元素的样式：
语法：
元素.style.样式名 = 样式值

注意如果CSS中含有-号这种名称在js中是不合法的如：background-color
需要将这种名字改为驼峰命名法
去掉 - ，然后将-后的字母大写

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖样式，此时将会导致JS修改样式失效，尽量不要修改!important。

八、滚动条的样式操作

clientWidth
clientheight
这两个属性可以获取元素的可见高度和宽度
这些属性都是不带px的，返回都是一个数字，可以直接进行计算
会获取元素的宽度和高度，包括内容区和内边距
这些属性都是只读的，不能修改

offsetWidth
offsetHeight
- 获取元素的整个宽度和高度，包括内容区，内边距和边框

offsetParent
- 可以用来获取当前元素的定位父元素
- 会获取到离当前元素最近的开启了定位的祖先元素
- 如果所有的祖先元素都没有开启定位，则返回body

offsetLeft
- 当前元素相对于其定位父元素的水平偏移量
offsetTop
- 当前元素相对于其定位父元素的垂直偏移量

scrollWidth
scrollHeight
- 可以获取元素整个滚动区域的宽度和高度

scrollLeft
- 可以获取水平滚动条滚动的距离
scrollTop
- 可以获取垂直滚动条滚动的距离

当满足.scrollHeight - .scrollTop == .clientHeight
说明垂直滚动条，滚动到底

当满足.scrollWidth - .scrollLeft == .clientWidth
说明水平滚动条，滚动到底当垂直滚动条到底时，表单项才可用
onscroll
- 该事件会在滚动条滚动的时候触发