DOM操作(JavaScript)

最新推荐文章于 2023-10-23 15:17:09 发布

wxt_

最新推荐文章于 2023-10-23 15:17:09 发布

阅读量170

点赞数 2

分类专栏： js 文章标签： JavaScript DOM操作 offset scroll client 三大家族

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103436643

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

五、offset, scroll, client 三大家族

一、dom提供的方法

获取元素的方法：

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

创建元素

var ele = document.createElement("标签名")

添加元素

dom.appendChild(ele)

eg: ele = document.createElement("span") || document.createTextNode("aaa")

var dom = document.getElementsByTagName("div")[0]

删除元素

dom.removeChild(ele )

eg: ele = document.getElementsByTagName("li")[0]

二、dom提供的属性

设置标签的文本内容

innerHTML

innerText

获取父元素

dom.parentElemrnts

获取子元素

dom.children

获取当前元素的上一个元素

dom.previousElementSibling

获取当前元素的下一个元素

dom.nextElementSibling

子节点

dom.childNodes

节点类型

nodeType == 1 : 标签节点

nodeType == 2 : 属性节点

nodeType == 3 : 文本节点

设置类名

dom.className = "classname"

三、dom提供的类名操作方法

classList
dom.classList.add("classname") //添加类名
dom.classList.remove("classname") //移除类名
dom.classList.toggle("classname") //如果不存在类名就添加,存在就删除
dom.classList.contains("classname") //属性包含类名否,返回布尔值

四、获取元素的css属性值

dom.style.属性 = 属性值
dom.currentStyle['属性'] 获取属性值(IE的getComputedStyle)
getComputedStyle(dom，伪类(或null))["属性"]

调用者: window

参数:a.元素 b.伪类,不是伪类就传null

返回值:对象

功能: 获取元素的css属性(只读不写,区别于[dom.style.属性名 = 属性值],只写不读) 学习api的四个要点调用者参数返回值功能

学习api的四个要点
    调用者
    参数
    返回值
    功能

五、操作元素的标签属性的方式

getAttribute("标签的属性") 获取标签属性的属性值
setAttribute("属性","属性值") 设置标签属性的属性值
removeAttribute("属性") 删除标签属性的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签属性的操作</title>

    <style> 
        .box {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }

        #boxId {
            background-color:red;
        }
    
    </style>
</head>
<body>
    <div class="box" id="boxId"></div>

    <img src="./img/timg.jpg" alt="">


    <script>
        // 1.0 获取元素
        var ele = document.getElementsByTagName("div")[0]
        var img = document.getElementsByTagName("img")[0]
        // getAttribute()
        // 调用者： dom
        // 参数：属性名
        // 返回值：属性值
        // 功能：获取标签指定的属性值
        // 2.0 获取标签属性的值
        var cName = ele.getAttribute("class")
        console.log(cName)
        console.log("===========================================")
        // 设置标签的属性值
        // setAttribute()
        // 调用者： dom
        // 参数：属性名,属性值
        // 返回值：忽略
        // 功能：设置标签指定的属性值

        // 2.0 获取标签属性的值
        // 3.0 设置img的路径
        img.setAttribute("src","./img/second.png")
        
        console.log("===========================================")
        // 4.0 移除标签的属性
        // removeAttribute()
        // 调用者： dom
        // 参数：属性名
        // 返回值：忽略
        // 功能：移除标签指定的属性值
        
        ele.removeAttribute("id")
        
        console.log("===========================================")
    </script>

</body>
</html>

六、offset, scroll, client 三大家族

offset属性

offsetWidth = width + paddig + border
offsetHeight = height+ paddig + border
offsetTop
offsetLeft

// 定位区别父元素是否加了定位属性

// 如果加了定位属性(relative,absolute,fixed),box.offsetTop和box.offsetLeft相对父元素的边框的距离

// 如果没有加定位属性, box 相对浏览器边框的距离

 <script>

        //获取相关元素,
        var box = document.getElementsByClassName("box")[0];   //只读不写
        //offset属性
        
        //offsetWidth = width + paddig + border
        //offsetHeight
        var w = box.offsetWidth;
        var h = box.offsetHeight;
        console.log({
            width:w,
            height:h
        })

        // 定位  区别父元素是否加了定位属性
        // 如果加了定位属性(relative,absolute,fixed),box.offsetTop和box.offsetLeft相对父元素的边框的距离
        // 如果没有加定位属性, box 相对浏览器边框的距离
        var ttop = box.offsetTop;
        var left = box.offsetLeft;
        console.log({
            top:ttop,
            left:left
        })
    </script>

scroll属性

scrollHeight = height + padding(不含边框)

//box.scrollHeight 获取的高度如果文本内容过多超出盒子的时候，盒子高度 = padding-top + height + 文本内容

scrollWidth: width + padding(不含边框)
scrollTop：获取页面超出浏览器顶部的距离
scrollLeft：获取页面超出浏览器左边的距离

<script>
        var box = document.getElementsByClassName("box")[0]
        //2.0获取标签的尺寸
        //标签高度: height + padding
        //标签宽度: width + padding
        console.log(box.scrollWidth)
        console.log(box.scrollHeight)

        //3.0 scrollTop/scrollLeft
        //根元素引用 scrollTop属性
        var ttop = document.documentElement.scrollTop;  //html
        //获取页面超出浏览器顶部的距离
        console.log({scrollTop:ttop,type:"有声明文档类型t"})

        // <!DOCTYPE html> 有编写这一行代码  dtd
        var ttop2 = document.body.scrollTop;        //body
        console.log({scrollTop2:ttop2,type:"没有声明文档类型t"})

        //scrollLeft
        var left = document.documentElement.scrollLeft;
        console.log({scrollLeft:left,type:"有声明文档类型l"})

        var left2 = document.body.scrollLeft;        //body
        console.log({scrollLeft2:left2,type:"没有声明文档类型l"})

        //兼容写法
        var ttop_all = document.documentElement.scrollTop || document.body.scrollTop;
        var left_all = document.documentElement.scrollLeft || document.body.scrollLeft;
        console.log({scrollLeft:left_all,scrollTop:ttop_all})
 
    </script>

client属性

clientWidth = padding + width (不含边框)
clientHeight = padding + height (不含边框)
clientLeft = border-left //获取边框的大小
clientTop = border-top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>client</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border-left: 20px solid #000;
            border-right: 20px solid #000;
            border-top: 20px solid rebeccapurple;
            border-bottom: 20px solid rebeccapurple;
            padding: 20px;
        }
        .box2{
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 15px solid red;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        hellow<br>
        hellow<br>
        hellow<br>
        hellow<br>
        hellow<br>
        hellow<br>
        hellow<br>
        hellow<br>
    </div>
    <div class="box2">
            hellow<br>
            hellow<br>
            hellow<br>
            hellow<br>
            hellow<br>
            hellow<br>
            hellow<br>
            hellow<br>
    </div>
    <!-- scrollHeight -->
    <script>
        //获取元素box
        var box = document.getElementsByClassName("box")[0]
        //box.scrollHeight  获取的高度 如果文本内容过多的时候
        //盒子高度 = pt + height + 文本内容
        console.log(box.scrollHeight)

        console.log("======d========================")
        var box2 = document.getElementsByClassName("box2")[0]
        //client属性
        //clientWidth =  padding + width (不含边框)
        //clientHeight =  padding + height (不含边框)

        console.log(box2.clientWidth)
        console.log(box2.clientHeight)

        //获取边框的大小
        //clientLeft = border-left
        //clientTop = border-top
        console.log(box2.clientLeft)        
        console.log(box2.clientTop)        

    </script>
</body>
</html>

wxt_

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM操作(JavaScript)

目录一、dom提供的方法二、dom提供的属性三、dom提供的类名操作方法四、获取元素的css属性值五、offset, scroll, client 三大家族一、dom提供的方法获取元素的方法：document.getElementById()document.getElementsByClassName()document.getElementsByTa...
复制链接

扫一扫