DOM操作

最新推荐文章于 2022-02-01 13:07:14 发布

*初级小白*~

最新推荐文章于 2022-02-01 13:07:14 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端 html

原文链接：https://www.jianshu.com/p/9e23c0ef5868?utm_source=desktop&utm_medium=timeline

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

DOM操作

DOM（DOcument Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分，这使得Javascript操作HTML，不是在操作字符串，而是在操作节点，极大的降低了编程难度。

一、DOM树

1.1、DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mhdl7dO0-1635344857988)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210828154059101.png)]

1.2、DOM常用节点

元素节点1

属性节点2

文本节点3

注释节点8

document 文档节点9

DocumentFragment 文档判断节点 11

1.3、DOM节点属性

在文档对象模型（DOM）中，每一个节点都是一个对象

nodeName：元素节点的标签名，以大写字母的形式表示，只读不能修改

nodeValue：文本节点和注释节点的内容，可读可写

nodeType：节点的类型（最有用的），帮助我们区分节点，只读

attributes：元素节点的属性集合（只能修改属性值），name属性名，value属性值

二、获取DOM元素

2.1、查询DOM节点

document 获取document文档（这是一个对象）

document.head 获取head标签

document.body 获取body标签

document.documentElement 获取HTML标签

2.2、get系列

动态获取，每次使用会重新获取

document.getElementById() 通过id获取元素

element.getElementsByTagName() 通过标签名获取元素

document.getElementsByName 通过name属性获取(注意：只有部分标签可以用，通过name属性获取元素（表单、表单元素、img、iframe）)

element.getElementsByClassName() 通过class类名获取

<body>
    <div id="one">你好。世界</div>
    <p>我好想在哪见过你</p>
    <div class="two">童话</div>
    <span>原宿酒店</span>
    <div>你好</div>
    姓名：<input type="text" name="user">
    <script>
      	//1. 通过id获取元素
        var odiv=document.getElementById('one');
        console.log(odiv); 

				//2. 通过标签名 TagName 获取元素  类数组(集合)数组可以有下标，开始是0，最后一项是length-1
        var ap=document.getElementsByTagName('p');
        console.log(ap);
				//这两个方法  所有浏览器全线兼容

				//3. 通过name获取   注意 name不能跟id重名
        var aIn=document.getElementsByName('user');
        console.log(aIn);

				//4. 通过class名获取
        var ad=document.getElementsByClassName('two');
        console.log(ad);
    </script>
</body>

2.3、query系列

静态获取，query系列的好用之处是参数为css 选择器

element.querySelector() 选到指定选择器下的第一个元素

element.querySelectorAll() 选到指定选择器的所有元素

<body>
    <div id="one">你好。世界</div>
    <p>我好想在哪见过你</p>
    <div class="two">童话</div>
    <div class="two">童话</div>
    <span>原宿酒店</span>
    <div>你好</div>
    姓名：<input type="text" name="user">
    <script>
        //querySelector 获取的是单个元素
        var od=document.querySelector('div#one')
        console.log(od);

        //querySelectorAll  获取的是一个集合
        var ad=document.querySelectorAll('div.two');
        console.log(ad);
    </script>
</body>

2.4、连续打点调用get

先获取一个HTML标签，然后选择这个HTML标签中的所有p标签

<body>
    <div id="three">
        <p></p>
        <p></p>
    </div>
    <script>
        var ap=document.getElementById('three').getElementsByTagName('p');
        console.log(ap);
    </script>
</body>

如果是数组，一定要加上下标，才能变成对象

var ap=document.getElementsByTagName('p')[0];
        console.log(ap);

三、节点的操作

3.1、基于节点树的操作（兼容所有浏览器）

parentNode 父节点（最顶端的parentNode为#document）

childNodes 子节点们

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 下一个兄弟节点

previousSibling 上一个兄弟节点

<body>
    <div>你好</div>
    <div id="box" >
        <p>1.你吃饭了没</p>
        <p>2.你吃饭了没</p>
        <p>3.你吃饭了没</p>
        <p>4.你吃饭了没</p>
        <div class="one">没</div>
        <span >你饿了吗</span>
        <span class="one">你饿了吗</span>
    </div>
    <input type="text" name="user">

    <div id="dian">点我</div>
    <script>
        //1.body,body的父节点是html,html的父节点是documen，documen的父节点是null
        var parentNode=box.parentNode;
        console.log(parentNode.parentNode.parentNode.parentNode);  
        
        //2.childNodes ：子节点们
        var childNodes=box.childNodes;
        console.log(childNodes);  //NodeList(15) [text, p, text, p, text, p, text, p, text, div.one, text, span, text, span.one, text]


        //3.firstChild:第一个子节点
        var firstChild=box.firstChild;
        console.log(firstChild);  //#text


        //4.lastChild:最后一个子节点
        var lastChild=box.lastChild;
        console.log(lastChild);  //#text


        //5.nextSibling:下一个兄弟节点
        //6.previousSibling :上一个兄弟节点
        var aP=document.getElementsByTagName('p')[1];
        console.log(aP);
        var nextSibling=aP.nextSibling;
        console.log(nextSibling);
        var previousSibling =aP.previousSibling ;
        console.log(previousSibling );
    </script>
</body>

3.2、基于元素节点树的操作（除了children，其他都不兼容IE9及以下）

parentElment 父元素节点

children 子元素节点们

firstElementChild 第一个子元素节点

lastElementChild 最后一个子元素节点

nextElementSibling 下一个兄弟元素节点

previousElementSibling 上一个兄弟元素节点

<body>
    <div>你好</div>
    <div id="box" >
        <p>1.你吃饭了没</p>
        <p>2.你吃饭了没</p>
        <p>3.你吃饭了没</p>
        <p>4.你吃饭了没</p>
        <div class="one">没</div>
        <span >你饿了吗</span>
        <span class="one">你饿了吗</span>
    </div>
    <input type="text" name="user">

    <div id="dian">点我</div>
    <script>
        //1.parentElement:父元素节点
        var parentElement=box.parentElement;
        console.log(parentElement);


        //2.children:子元素节点们
        var children=box.children;
        console.log(children);  //HTMLCollection(7) [p, p, p, p, div.one, span, span.one]


        //3.firstElementChild:第一个子元素节点
        var firstElementChild=box.firstElementChild;
        console.log(firstElementChild);  // <p>1.你吃饭了没</p>


        //4.lastElementChild:最后一个子元素节点
        var lastElementChild=box.lastElementChild;
        console.log(lastElementChild);  //<span class="one">你饿了吗</span>


        //5.nextElementSibling:下一个兄弟元素节点
        var nextElementSibling=box.nextElementSibling;
        console.log(nextElementSibling);  //<input type="text" name="user">


        //6.previousElementChild: 上一个兄弟元素节点
        var previousElementSibling=box.previousElementSibling;
        console.log(previousElementSibling);  //<div>你好</div>
    </script>
</body>

3.3、增、创建DOM节点

document.createElement() 创建元素节点

document.createTextNode() 创建文本节点

document.createComment() 创建注释节点

document.createDocumentFragment 创建文档判断节点

  var createElement=document.createElement('p');
        console.log('createElement',createElement);

        var createTextNode=document.createTextNode('this is text');
        console.log('createTextNode',createTextNode);

        var createComment=document.createComment('this is 注释');
        console.log('createComment',createComment);
        
        var createDocumentFragment=document.createDocumentFragment;
        console.log('createDocumentFragment',createDocumentFragment);

<script>
        var body=document.body;
        var input=document.createElement('input');
        input.type='button';
        input.value='创建一个按钮';
        body.appendChild(input);
    </script>

    <script>
        var body=document.body;
        var input=document.createElement('input');
        // input.type='button';
        // input.value='创建一个按钮';
        input.setAttribute('type','submit');
        input.setAttribute('name','submit');
        input.setAttribute('value','提交');
        input.setAttribute('onclick','javascript:alert("this is a text");');
        body.appendChild(input);
    </script>

3.4、插、添加（剪切操作）

parentNode.appendChild(A) 在parentNode的最后面添加节点A

parentNode.insertBefore(A,B) 把节点A添加在节点B的前面

 <div id="text">
        <p id="x1">HTML</p>
        <p>JAVASCRIPT</p>
    </div>
    <script>
        //在指定节点的最后一个节点列表之后添加一个新的节点
        //appendChild(newnode)    
        //newnode:指定追加的节点
        var otext=document.getElementById('text');
        var newnode=document.createElement('p');  //创建元素节点p
        newnode.innerHTML="this is a new p";
        console.log(newnode);  
        otext.appendChild(newnode);
    </script>

   <div id="text">
        <p id="p1">HTML</p>
        <p>JAVASCRIPT</p>
    </div>
    <script>
        //insertBefore() 方法可在已有的子节点前插入一个新的节点
        //insertBefore(newnode,node)
        //newnode：指要插入的新节点   node:指定此节点前插入节点
        //在指定节点前插入节点
        var otext=document.getElementById('text');
        var node=document.getElementById('p1');
        var newnode=document.createElement('p');
        newnode.innerHTML="this is a new part";
        otext.insertBefore(newnode,node);  //在p1标签之前插入新的节点    node也可以换成otext.childNodes[0],子节点的第一个
    </script>

3.5、删：删除节点

parentNode.removeChild(A) 删除节点A，父节点删除子节点，这个方法返回被删除的节点，以备后悔再使用

child.remove() 删除节点树上的节点，节点之间删除字节，节点自己删除当前节点是没有返回值的

 <div id="div1">
        <h1>HTML</h1>
        <h2>MYSQL</h2>
    </div>
    <script>
        //removeChild()方法从子节点列表中删除某个节点，如删除成功，此方法可返回被删除的节点，如不成功，则返回NULL
   			//把删除的子节点赋值给removeChild，这个子节点不在DOM树中，但是还在内存中，如果要完全删除对象，给removeChild赋null值
        //nodeObject.removeChild(node)
        //node:必需，指定需要删除的节点
        // var oh=div1.getElementsByTagName('h1')[0];  //获取h1的元素
        // var oh=div1.children[0];  //获取h1的元素
        var oh=div1.childNodes[1];   //获取h1的元素
        var removeChild=div1.removeChild(oh);
        document.write(`删除的内容为：${removeChild.innerHTML}`);
    </script>

 <div id="div1">
        <h1>HTML</h1>
        <h2>MYSQL</h2>
    </div>
    <script>
        //removeChild()方法从子节点列表中删除某个节点，如删除成功，此方法可返回被删除的节点，如不成功，则返回NULL
        //nodeObject.removeChild(node)
        //node:必需，指定需要删除的节点
        // var oh=div1.getElementsByTagName('h1')[0];  //获取h1的元素
        // var oh=div1.children[0];  //获取h1的元素
        var oh=div1.childNodes[1];   //获取h1的元素
        oh.remove();
        document.write(`删除的内容为：${oh.innerHTML}`);
    </script>

3.6、替换（剪切操作）

parentNode.replaceChild(A,B) 用节点A代替节点B

<h1 id="oldnode">JAVA</h1>
    <a href="javascript:newnode()">Java替换JavaScript</a>
    <script>
        //replaceChild实现子节点（对象）的替换，返回被替换对象的引用
        //node.replaceChild(newnode,oldnode)
        //newnode:必需，用于替换oldnode的对象     oldnode:必需，被newnode替换的对象
        function newnode(){
            var newnode=document.createElement('h1');  //点击会生成h1标签
            // console.log(newnode);
            var newnodeText=document.createTextNode('javascript');  //点击会生成javascript文字
            // console.log(newnodeText);
            newnode.appendChild(newnodeText);  //将文本内容插入到h1标签
            console.log(newnode);
            var oldnode=document.getElementById('oldnode');
            console.log(oldnode);
            oldnode.parentNode.replaceChild(newnode,oldnode);  //用newnode代替oldnode  javascript代替java
        }
    </script>

3.7、判断一个元素节点有没有子节点方法

element.hasChildNodes() 如果有则返回true，没有则返回false

 var oEle=document.createElement('h1');
        console.log('createElement',oEle);
        var oText=document.createTextNode('你是否吃饭了');
        console.log('createTextNode',oText);
        // var ap=box.appendChild(oEle);
        // console.log('appendChild',ap);
        box.appendChild(oEle);
        box.appendChild(oText);
        box.insertBefore(oEle,oText)
        box.removeChild(oEle);

        var op2=document.getElementsByTagName('p')[1];
        var op1=document.getElementsByTagName('p')[0];
        console.log(op1);
        var res=box.removeChild(op);
        console.log(res);
        console.log(op);
        var res=op.remove();
        console.log(res);
        console.log(op);
        box.replaceChild(op1,op2);
        var res=box.hasChildNodes('p');
        console.log(res);

四、节点的一些属性和方法

4.1、元素节点常用的属性

1.innerHTML获取元素节点的内容，可读可写，如果内容中有符合HTML格式的，会被解析成标签

2.innerText获取元素节点的内容，可读可写，如果内容有符合html格式的，不会被解析成标签

innerText在赋值的时候要注意，会将标签覆盖掉

4.2、元素节点常用的方法

设置或获取标签属性

element.setAttribute(‘class’,‘on’) 设置元素节点的class属性

element.getAttribute(‘class’) 获取元素节点的class属性

element.removeAttribute(‘class’) 删除元素节点的class属性

五、更改HTML的属性

js可以更改HTML的任何属性，方法是两种：1.点语法。2.setAttribut()、getAttribute()

5.1、getAttribute()，setAttribute()

getAttribute(); 获取属性

setAttribute(); 设置属性

 <h1 id="alink" title="今天你吃饭了么" onclick="dianji()">点击我，获取标签的属性值</h1>
    <script>
        //通过元素节点的属性名称获取属性的值
        //elementNode.getAttribute(name)
        //elementNode:使用getElementById()、getElementsByTagName()等方法获取到的元素节点
        //name:要想查询的元素节点的属性名字(例如：id)
        function dianji(){
            var anode=document.getElementById('alink');
            var attr=alink.getAttribute("id");
            var attr2=alink.getAttribute("title");
            document.write(`h1标签的Id为：${attr}<br/>`);
            document.write(`h1标签的title为：${attr2}`);
        }
    </script>

 <h1 id="alink" title="今天你吃饭了么" onclick="dianji()">点击我，获取标签的属性值</h1>
    <script>
        //setAttribute()方法增加一个指定名称和值的新属性，或者把一个属性设定为指定的值
        //elementNode.setAttribute(name,value)
        //1.name:要设置的属性名    2.value：要设置的属性值
        //把指定的属性设置为指定的值，如果不存在具有指定名称的属性，该方法会创建一个新的属性
        function dianji(){
            var alink=document.getElementById("alink");
            alink.setAttribute('name','h1');
            alink.setAttribute('title','今天我没吃饭');
            console.log(alink);
        }
    </script>

5.2、点语法

得到一个元素之后，直接打点调用它的属性名，就能对HTML相应的属性进行更改，可以获取，也可以设置（class这个属性，要换成className，因为class是JS的保留字，如果想要换一个HTML元素的class属性，那么就要打点调用.className属性）

5.3、区别：

第一：所有自定义的属性，都不能通过点语法获取和设置

第二：所有的行内样式，点语法.style得到的是一个样式对象，我们可以通过.style.border继续得到小样式，但是getAttribute()得到的是字符串

六、H5新增元素节点的classList属性

classLast属性是一个类数组。其身上有几个常用的方法

1.add(value)将给定的参数字符串添加到元素的class属性中，如果存在就不添加了

2.remove(value)将给定的参数字符串从class属性中删除

3.contains(value)返回布尔值，表示class属性中是否包含参数字符串

4.toggle(value)检测class属性中是否有参数字符串，有则删除，返回false，没有则添加，返回true

七、H5新增了自定义属性，但是需要data-开头

八、脚本CSS

8.1、获取计算样式表、行内样式表

计算样式表一般用来获取的，行内样式表一般用来设置的

获取计算样式表：

1、只读，不可写

2、获取的值是计算后的绝对值。不是相对值

3、window.getComputedStyle(ele,null).attr 主流浏览器以及IE8以上

第一个参数为获取元素节点上的计算属性

第二个参数获取伪元素

4、ele.currentStyle IE8及其以下

例子：

getComputedStyle(ob).bagckgroundColor;

getComputedStyle(ob)[backgroundColor]

ob.currentStyle.backgroundColor

ob.currentStyle[backgroundColor]

行内样式表：元素节点.style获取的是行内样式表

1.一般用内联样式（行内样式）表来设置某些css属性

2、可读可写，可以通过行内样式间接控制css属性

3、含有连词符的css属性，需要使用小驼峰写法

4、float是js里面的保留字一般使用cssFloat

5、设置的值要求为字符串形式

//行内样式表的使用
<div id="box" style="width: 100px; height: 100px;"></div>
    <script>
        var ob=document.getElementById('box'); 
        // console.log('width为:'+ob.style.width);
        // console.log(`height为:${ob.style["height"]}`);
        ob.style.width='300px';   //通过对象来赋值设置css的属性
        ob.style.backgroundColor='blue';   //在css中有连接符的属性在js中使用对应的驼峰来转换
        ob.style.cssFloat='right';   //float是保留字，因此需要加css
        ob.className='da';   //如果想要换一个HTML元素的class属性，那么就要打点调用.className属性。
    </script>

//getComputedStyle和currentStyle的使用 
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;  //用!important在嵌入式把css的权限提到最大
            height: 100px;
            background-color:pink;
        }
    </style>
//计算样式表内元素的权重越大就会计算出元素的指定样式
<div id="box" style="width: 100px;"></div>
    <script>
        var ob=document.getElementById('box');
        console.log(getComputedStyle(box).width);  //主浏览器以及IE8以上
        console.log(ob.currentStyle.width);   //IE8及其以下
    </script>

//getComputedStyle的第二个参数使用
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;
            height: 100px;
            background-color:pink;
        }
        #box::after{
            content: "";
            display: block;
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
      <div id="box" style="width: 100px;"></div>
    <script>
        var ob=document.getElementById('box');
        console.log(getComputedStyle(box,"after").width);  //主浏览器以及IE8以上
        console.log(ob.currentStyle.width);   //IE8及其以下
    </script>

//封装一个函数，让计算样式表的代码在谷歌和IE浏览器下都可以使用
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;
            height: 100px;
            background-color:pink;
        }
        #box::after{
            content: "";
            display: block;
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
     <div id="box" style="width: 100px;"></div>
    <script>
        var ob=document.getElementById('box');
        function getStyle(dom,attr){
            if(dom.currentStyle){
                return dom.currentStyle[attr];
            }else{
                return getComputedStyle(dom,null)[attr];
            }
        }
        console.log(getStyle(ob,'width'));

        var ob=document.getElementById('box');
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return getComputedStyle(ele)[attr];
            }else{
                return ele.currentStyle[attr];
            }
        }
        console.log(getStyle(ob,'width'));
    </script>

8.2、设置元素样式

如果设置样式通过行内style来设置元素样式，那么我们可以通过获取计算样式值，然后修改

8.3、快捷位置和尺寸

DOM的API，获取元素的显示尺寸（数字类型的值）

ele.offsetWidth width+左右padding+左右border

ele.offsetHeight height+上下padding+上下border

ele.offsetLeft 水平距离（常用）

ele.offsetTop 竖直距离（常用）

ele.clientWidth width+左右padding（常用）

ele.clientHeight height+上下padding（常用）

dom.clientLeft 上边框的width

dom.clientTop 左边框的width

8.3.1、offsetWidth和offsetHeight

   <div id="box"></div>
        <script>
            var ob=document.getElementById('box');
            console.log(ob.offsetHeight);  //width:100+上下padding:20+20+上下border:10==160
            console.log(ob.offsetWidth);   //width:200+左右padding:30+30+左右border:10==280
        </script>

8.3.2、offsetLeft属性和offsetTop

一个元素的offsetLeft值，就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离每一个元素，天生都有一个属性，叫做offsetParent

offsetParent就是自己祖先元素中，距离自己最近的已经定位的元素，如果自己的祖先元素中，没有任何盒子进行了定位，那么offsetParent对象就是body

IE6、IE7：

情形1：如果自己没有定位属性，那么自己的offsetParent对象就是自己的祖先元素中离自己最近的有width或者有height的元素

情形2：自己如果有定位属性，那么自己的offsetParent就是自己的祖先元素中离自己最近的有定位的元素，数值就是自己的左外边框到offsetParent对象的左内边距的值

IE8：

无论自己是否定位，自己的offsetParent就是自己祖先元素中，离自己最近的已经定位的元素

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            margin-left: 20px;
            margin-top: 40px;
            background-color:pink;
        }
    </style>   
<div id="box">
             <div id="middle"></div>
         </div>
         <script>
             var ob=document.getElementById('box');
             //dom.offsetLeft：获取dom到定位父级的水平距离
             console.log(ob.offsetLeft);  //30  position:absolute;left:10+margin-left:20==30
             //dom.offsetTop：获取dom到定位父级的竖直距离
             console.log(ob.offsetTop);  //50  position:absolute;top:10+margun-top:40==50
         </script>

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            background-color:pink;
        }
        #middle{
            position: absolute;
            left: 20px;
            top: 5px;
            width:200px;
            height: 200px;
            margin-left: 20px;
            background-color: green;
        }
    </style>
<div id="box">
            <div id="middle"></div>
        </div>
        <script>
            var ob=document.getElementById('box');
            //父元素是浏览器窗口
            console.log(ob.offsetLeft);
            console.log(ob.offsetTop);
            //水平距离是40=（position:absolute;left:20+margin-left:20=40）是按照子元素到父元素的水平位置来计算的
            var om=document.getElementById('middle');
            console.log(om.offsetLeft);
            //竖直距离是5=（position:absolute;top:5==5）
            console.log(om.offsetTop);
        </script>

8.3.3、clientWidth和clientHeight

clientWidth就是自己的width+padding的值，也就是说，比offWidth少了border，如果盒子没有高度，用文字撑的，IE6的clientHeight是0，其他浏览器都是数值

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px !important;
            height: 100px;
            padding: 20px 30px;
            background-color:pink;
        }
    </style>
<div id="box"></div>
    <script>
        var ob=document.getElementById('box');
        console.log(getComputedStyle(ob).width); //200px 
        //但是这个元素在页面真实显示的是260px，用clientWidth获取真实的宽度，clientHeight获取真实的高度
        console.log(ob.clientWidth+'px');  //width:200+左右padding：30+30==260
        console.log(ob.clientHeight+'px'); //width:100+上下padding：20+20==140
    </script>

8.3.4、clientLeft和clientTop

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            background-color:pink;
        }
        #middle{
            position: absolute;
            left: 30px;
            top: 30px;
            width:200px;
            height: 200px;
            border-top: 10px solid red;
            border-left: 15px solid red;
            background-color: green;
        }
    </style>
      <div id="box">
            <div id="middle"></div>
        </div>
        <script>
            var om=document.getElementById('middle');
            console.log(om.clientLeft);  //15  左边框的15
            console.log(om.clientTop);  //10   上边框的10
        </script>

8.4、获取元素的有定位属性的父级

ele.offsetParent 如果没有定位父节点，则返回body

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 300px;
            height: 300px;
            margin-left: 20px;
            margin-top: 40px;
            background-color:pink;
        }
    </style>
     <div id="box">
             <div id="middle"></div>
         </div>
         <script>
             var ob=document.getElementById('box');
             console.log(ob.offsetParent);
         </script>

九、获取元素的滚动值

9.1、获取滚动元素的宽高

当元素实际内容超过设置的内容时

dom.scrollWidth ====> 元素实际内容的width

dom.scrollHeight ====> 元素实际内容的height

当内容没有容器高、宽度的时候，scrollWidth和scrollHeight获取的是容器的高度和宽度

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 100px;
            background-color:pink;
        }
    </style>
<div id="box">
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
            yellowyellowyellowyellowyellowyellow
         </div>
         <script>
             var ob=document.getElementById('box');
             console.log(ob.scrollWidth);
             console.log(ob.scrollHeight);
         </script>

9.2、获取元素的滚动距离（数字类型的值）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AvHvBRpe-1635344857997)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210902082000446.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kqWI80x4-1635344857999)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210902082933145.png)]

dom.scrollLeft 滚动的水平距离

dom.scrollTop 滚动的竖直距离

9.3、滚动距离的兼容写法

1、获取滚动条的滚动距离IE8以上

window.pageXOffset 页面滚动的水平距离

window.pageYOffset 页面滚动的竖直距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EBWYw7oE-1635344858000)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210902173255437.png)]

    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 3px solid pink;
            margin: 10px auto;
            /* overflow-y: scroll; */
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
            <span>的结论是打飞机第三方士大夫水电费但是</span>
          </div>
    </div>
    <script>
        // var val=0;
        // setInterval(function(){
        //     val+=10;
        //     box.scrollTop=val;
        // },1000)
        
    </script>