DOM2知识

最新推荐文章于 2024-07-24 23:00:08 发布

傻乎乎的小不点

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量134

点赞数 4

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/m0_62697897/article/details/127156641

版权

1.Document类型

2.属性方法

3.元素大小

4.补充知识：overflow和scroll

1.Document类型

（1）属性

<1>document.documentElement 指向<html>元素

代码：

    // 1.获取html标签
    var html=document.documentElement;
    console.log(html);

运行结果：

<2>document.body 指向body元素

代码：

  // 2.获取body标签或节点
    var body=document.body;
    console.log(body);

运行结果：

<3>document.title 返回title元素中的文本，该属性可写

代码：

    // 3.设置或者获取title内容
    var title=document.title;
    document.title="同学，该学习了！";
    console.log(title);

运行结果：

<4>document.URL 返回当前页面的网址

代码：

    // 4.返回当前页面的网址
    var URL=document.URL;
    console.log(URL);

运行结果：

<5>document.domain 返回当前文档的域名

（2）方法

<1>查找元素

<2>文档写入：document.write()

<3>创建元素：document.createElement()

2.属性方法

（1）setAttribute() 为元素新增属性，或设置当前属性，接收两个参数：属性和值

（2）removeAttribute() 删除元素属性

（3）getAttribute() 获取元素属性，不存在则返回null

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="" alt="图片加载失败">
    <button>显示图片</button>
    <button>隐藏图片</button>
    <div></div>
</body>
<script>
    // 设置属性   setAttribute(属性名，属性值)  
    // 获取属性   getAttribute()    
    // 移除属性   removeAttribute()
    var btn=document.querySelectorAll('button');
    var img=document.querySelector('img');
    btn[0].onclick=function()
    {
        // img.src="https://pics5.baidu.com/feed/3812b31bb051f819c21309db4f40b9eb2f73e76c.jpeg?token=24efd8ecdb299dc29407b18eb227f868";
        // 第二种方法
        img.setAttribute('src','https://pics5.baidu.com/feed/3812b31bb051f819c21309db4f40b9eb2f73e76c.jpeg?token=24efd8ecdb299dc29407b18eb227f868');
        console.log(img.getAttribute('alt'));
    }
    btn[1].onclick=function()
    {
        img.removeAttribute('src');
    }
    var div=document.querySelector('div');
    div.id='box';
    // 点语法设置属性   只能体现标签本身有的属性
    // setAttribute设置属性   标签本身有的属性和自定义属性都可以体现
    div.index='hello';
    div.setAttribute('index1','hello');
    console.log(div.getAttribute('index1'));
</script>
</html>

运行结果：通过点击显示图片和隐藏图片实现具体操作

显示图片：

隐藏图片：

3.元素大小

（1）offset

<1>offsetLeft 元素左外边框距离左边的距离

<2>offsetTop 元素上外边框距离上边的距离

代码：

    var box=document.querySelector('.box');
    // offsetLeft:获取元素左边框距离左边缘的距离
    // offsetTop:获取元素上边框距离上边缘距离
    console.log(box.offsetLeft);
    console.log(box.offsetTop);

运行结果：

<3>offsetHeight 元素垂直方向所占空间height+padding+border和子元素无关

<4>offsetWidth 元素水平方向所占空间width+padding+border和子元素大小无关

代码：

    // offsetHeight  获取高度  (height+padding+border)    和子元素大小没有关系
    // offsetWidth   获取高度  (width+padding+border)
    console.log(box.offsetHeight);
    console.log(box.offsetWidth);

运行结果：

（2）client

<1>clientHeight 元素垂直方向所占空间height+padding和子元素大小无关

<2>clientWidth 元素水平方向所占空间width+padding和子元素大小无关

代码：

  // clientHeight  获取高度  (height+padding)          和子元素大小没有关系
    // clientWidth   获取高度  (width+padding)
    console.log(box.clientHeight);
    console.log(box.clientWidth);

运行结果：

（3）scroll

<1>scrollHeight 子元素不大于父元素情况下和client相同。

注意：如果子元素大于父元素，大小为：子元素大小+padding+border+margin

<2>scrollWidth 子元素不大于父元素情况下和client相同。

注意：如果子元素大于父元素，大小为：子元素大小+padding+border+margin

代码：

   // 和子元素大小有关系  当子元素超出父元素大小，
    // scrollWidth    子元素的width+padding+border+margin-left+父元素的border
    // scrollHeight   子元素的height+padding+border+margin-top+父元素的border
    console.log(box.scrollHeight);
    console.log(box.scrollWidth);

运行结果：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-top: 50px;
            padding: 10px;
            border: 5px solid black;
        }
        .son_box{
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            padding: 10px;
            border: 10px solid  tomato;
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son_box"></div>
    </div>
</body>
<script>
    var box=document.querySelector('.box');
    // offsetLeft:获取元素左边框距离左边缘的距离
    // offsetTop:获取元素上边框距离上边缘距离
    console.log(box.offsetLeft);
    console.log(box.offsetTop);


    // offsetHeight  获取高度  (height+padding+border)    和子元素大小没有关系
    // offsetWidth   获取高度  (width+padding+border)
    console.log(box.offsetHeight);
    console.log(box.offsetWidth);

    // clientHeight  获取高度  (height+padding)          和子元素大小没有关系
    // clientWidth   获取高度  (width+padding)
    console.log(box.clientHeight);
    console.log(box.clientWidth);


    // 和子元素大小有关系  当子元素超出父元素大小，
    // scrollWidth    子元素的width+padding+border+margin-left+父元素的border
    // scrollHeight   子元素的height+padding+border+margin-top+父元素的border
    console.log(box.scrollHeight);
    console.log(box.scrollWidth);
</script>
</html>

运行结果：

4.补充知识：overflow和scroll

（1）overflow：超出

<1>overflow:hidden 超出父元素的部分隐藏应用：解决塌陷问题

<2>overflow:scroll 超出父元素的部分以滚动条显示

<3>overflow-x:hidden: x方向隐藏 y方向以滚动条显示

<4>overflow-y:hidden: y方向隐藏 x方向以滚动条显示

（2）scroll：滚动

<1>scrollLeft 有滚动条的情况下获取元素向左滚动距离

<2>scrollTop 有滚动条的情况下获取元素向上滚动距离

注意：document.documentElement.clientWidth 可视窗口大小

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: tomato;
            /* overflow: hidden; */
            /* overflow: scroll; */
            /* overflow-x: hidden; */
            overflow-y: hidden;
        }
        .box div{
            width: 500px;
            height: 500px;
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <!-- 
        overflow:hidden   超出父元素的部分隐藏   应用：解决塌陷问题
                 scroll   超出父元素的部分以滚动条显示
        overflow-x:hidden: x方向隐藏   y方向以滚动条显示
        overflow-y:hidden: y方向隐藏   x方向以滚动条显示 
     -->
     <div class="box">
        <div>天空飘来五个字,那都不是事儿</div>
     </div>
     <button>普通而很特别</button>
</body>
<script>
    // scrollLeft  有滚动条的情况下   获取元素向左滚动距离
    // scrollTop   有滚动条的情况下   获取元素向上滚动距离
    var box=document.querySelector('.box');
    var btn=document.querySelector('button');
    btn.onclick=function()
    {
        console.log(box.scrollLeft);
        console.log(box.scrollTop);
    }
</script>
</html>

运行结果：

scroll滚动前：

scroll滚动后：

傻乎乎的小不点

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM2知识

3>offsetHeight 元素垂直方向所占空间height+padding+border和子元素无关。offsetWidth 元素水平方向所占空间width+padding+border和子元素大小无关。clientWidth 元素水平方向所占空间width+padding和子元素大小无关。注意：如果子元素大于父元素，大小为：子元素大小+padding+border+margin。注意：如果子元素大于父元素，大小为：子元素大小+padding+border+margin。
复制链接

扫一扫