js的DOM操作整理（整理）

您所在的位置：网站首页 › js数组操作方法大全 › js的DOM操作整理（整理）

js的DOM操作整理（整理）

2023-08-16 09:32| 来源: 网络整理| 查看: 265

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight;

21.网页卷去的距离与偏移量

我们先来看看下面的图：

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

五、JS学习之DOM及案例

转自或参考：JS学习之DOM及案例https://blog.csdn.net/huangql517/article/details/80476171

1、DOM简介

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model，简称DOM）。

即当浏览器载入HTML文档时, 它就会成为DOM对象，而在JS中，所有的事物都是节点，

元素、文本等都是节点。可以通过节点进行DOM对象的增删改查。

既然HTML在被浏览器加载时会对应的生成DOM对象，而JS又可以通过节点来操作DOM，所以，JS

完全可以创建动态的HTML，

看一下实际当中的一些场景，js是怎么处理的，案例如下。

2、先来点语法

2.1、获取DOM节点的方法 //通过id获取，唯一的 var oDiv = document.getElementById('box'); //通过类名获取，返回数组形式，所以可以加索引取值 var oDiv = document.getElementsByClassName('.box')[0]; //通过标签名获取 var oDiv = document.getElementsByTagName('div')[0];

2.2、常用的DOM节点

2.3、节点的增删改查

// 删除元素上的class属性 oH2.removeAttribute('class'); // 删除创建的DOM对象 oDiv.removeChild(oH2); // 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点 var op = document.createElement('p'); op.innerText = '我是一个段落'; oDiv.replaceChild(op,oH2); 3、模态框案例

// 获取dom元素 var btn = document.getElementById('btn'); // 1、创建divdom元素 var oDiv = document.createElement('div'); var oP = document.createElement('p'); var oSpan = document.createElement('span'); // 2、设置各dom元素的属性，方便后续定位操作，写样式等 oDiv.id = 'box'; oP.id = 'content'; oSpan.id = 'span1'; oP.innerHTML = '模态框成功弹出'; oSpan.innerHTML = '关闭'; // 3、部署dom元素，理清层级关系 oDiv.appendChild(oP); oP.appendChild(oSpan); //给按钮添加点击事件 btn.onclick = function(){ //动态的添加到一个div到body中，并且在btn前面 console.log(this);//当前this指向的是当前按钮元素 this.parentNode.insertBefore(oDiv,btn); }; //点击span标签就触发删除节点函数，删除整个div块 oSpan.onclick = function(){ // removeChild()删除节点 oDiv.parentNode.removeChild(oDiv) }

样式自己设置下，最终效果如下，页面首先展示一个button按钮，点击弹出模态框（div块>p标签>span标签），

再点击span（关闭），则删除div块，回到页面初始的样子，

4、点击有惊喜案例

#box{ width: 200px; height: 200px; background-color: green; line-height: 200px; text-align: center; } 点击有惊喜 var box = document.getElementById('box'); console.log(box); var n=0; box.onclick = function(){ n++; if(n%4==1){ this.style.backgroundColor='blue'; this.innerText = '2222' }else if(n%4==2){ this.style.backgroundColor='red'; this.innerText = '3333' }else if(n%4==3){ this.style.backgroundColor='yellow'; this.innerText = '4444' }else{ this.style.background = 'transparent'; this.innerText = ''; } }

初始页面有个div盒子，样式已设置，js里面现在通过id找到dom元素，再通过一个自增n对4取余的结果来改变dom元素

属性，比如上面的背景色和蚊子内容，达到点击一直切换的效果。

效果如下

六、jquery的dom操作实例

转自或参考：DOM操作之属性和样式操作https://www.cnblogs.com/yuyujuan/p/9410428.html

在DOM操作，除了前面的节点操作以外，常常被用到的操作还有属性操作和节点操作，下面，主要来总结一下jQuery中的属性操作方法和样式操作方法。

在开始操作前，我们需要先在html中添加如下代码，后面所有的操作都是基于该DOM结构进行的。

　　　　Document 　　　　　　　　.red{ 　　　　　　color:red; 　　　　} 　　　　.blue{ 　　　　　　color:blue; 　　　　} 　　　　.yellow{ 　　　　　　color:yellow; 　　　　} 　　　　　　

你最喜欢的水果是？

　　　　　　苹果　　　　香蕉　　　　荔枝　　　　　　　　　　

属性操作获取和设置属性

在前面我们提到过一个方法attr()，通过给该方法添加一个参数（属性名称），可以获取相应信息。

$(function(){ var txt = $("ul li:eq(1)").attr("title"); console.log(txt); })

当给该方法传递多个参数时，可以用来设置相关属性。

$(function(){ $("ul li:eq(1)").attr("title","最喜欢的水果"); $("ul li:eq(2)").attr({"title":"水果","name":"荔枝"}); })

删除属性

在jQuery中，使用removeAttr()方法删除某个元素的特点属性。

$(function(){ $("p").removeAttr("title"); })

样式操作获取和设置样式

因为class也是和title一样，也属于元素的属性，所以，我们可以使用attr()来获取和设置元素的class。

$(function(){ 　　var txt1 = $("ul li:eq(0)").attr("class"); 　　console.log(txt1); 　　$("ul li:eq(0)").attr("class","blue"); 　　var txt2 = $("ul li:eq(0)").attr("class"); 　　console.log(txt2); })

使用attr()方法设置样式时，新的样式覆盖了之前的样式。

添加样式

有的时候，我们希望为某个元素添加样式，但是又不覆盖之前原有的样式，很明显，attr()并不能满足我们的要求，这个时候，我们需要用到一个新的方法addClass()，该方法是在不改变原有样式的基础上，在后面添加新的样式。

$(function(){ var txt1 = $("ul li:eq(0)").attr("class"); console.log(txt1); $("ul li:eq(0)").addClass("blue"); var txt2 = $("ul li:eq(0)").attr("class"); console.log(txt2); })