JS——DOM对象常用方法知识简记

大脸胖柴

已于 2022-12-23 08:42:54 修改

阅读量3.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2022-05-01 19:56:24 首次发布

本文链接：https://blog.csdn.net/TKY666/article/details/124525855

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

5. 通过querySelector（选择器）获取

6. 通过querySelectorAll获取

event事件对象（此处含有鼠标相对于窗口的位置知识）

offset系列属性（获取元素的长和宽、位置）

client系列（获取对象位置边框宽度等）

event事件对象与offset系列属性结合案例放大镜的制作

getBoundingClientRect()返回元素的大小和相对于视口的位置

获取DOM对象方法一

1.通过id获取
var 变量名 = document.getElementById("id值")
注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2. 通过class(类名)获取
var 变量名 = document.getElementsByClassName("类名")
注意：getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。

方法：通过class值来获取元素对象集合，通过下标来得到单个元素对象

3. 通过标签名获取
var 变量名 = document.getElementsByTagName("p");
注意: 该方法返回的也是一个集合。

4. 通过name属性获取
var 变量名 = document.getElementsByName("name");
注意：只有含有name属性的元素(表单元素)才能通过name属性获取

通过name值来获取元素对象集合，通过下标来得到单个元素对象

5. 通过querySelector（选择器）获取
var 变量名 = document.querySelector(".box");
注意：querySelector()方法括号中的值是元素的选择器，所以前面加了"."符号，使用的是类选择器。通过选择器获取匹配到第一个元素唯一。

6. 通过querySelectorAll获取
var 变量名 = document.querySelectorAll(".box")
注意：querySelector()和querySelectorAll()方法括号中的取值都是选择器，但这两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

getElementXXX类型的方法注意事项：

getElementXXX类型的方法，除了通过Id获取元素和 document.querySelector(”选择器“)
通过选择器获取匹配到第一个元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName("box")[0] =>获取class为box的所有元素中的第一个DOM元素。

获取特殊对象方法 body html

var 变量名 = document.body //获取body元素对象

var 变量名 = document.documentElement // 返回html元素对象

获取或返回元素内容方法

dom对象.innerHTML        获取元素内部的内容可识别标签  保留空格和换行
dom对象.innerText         获取元素内部的文本不识别标签不保留空格和换行
dom对象.value         获取表单控件的值

这三个属性是可读写的可以获取元素里面的内容  也可修改元素内部的内容
<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
 
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签,去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2022.5.1';
        // 2. innerHTML 识别html标签 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2022.5.1';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

JS与CSS交互

js添加与修改属性样式

单个属性样式添加：dom对象.style.样式属性名 = "属性值";

多个属性样式添加：dom对象.style = "";

非常多属性样式添加：dom对象.className = "类名"; 注意可结合多类名方式解决类覆盖问题

修改样式直接给相应样式赋值即可
   <script>
        // 样式添加练习
        var dom对象 = document.getElementById("dom对象id");
        // 方法一：逐个添加
        _yangshi.style.fontSize = "60px";
        //样式为一个单词如width可直接写，但为两个单词如font—size这种则要把—删去，并让"—"后方单词首字母大写（驼峰）
        // 方法二：统一添加
        //此方法要注意后续另起一行添加会把上一行的样式覆盖掉
        dom对象.style = "width: 300px; height: 3000px; background-color: #00f";
        // dom对象.style = "font_size: 60px;"//_yangshi.style被重新赋值  把上一行的样式覆盖掉
        // 方法三：赋值类（样式较多时直接用此方法即可）//赋值类名会覆盖原本的类，可采用多类名来解决此问题
        dom对象.className = "旧类名 新类名";
    </script>
样式获取（查询）

dom对象.style.样式属性名行内样式
console.log(dom对象.style.color );    //行内样式
window.getComputedStyle(dom对象).样式属性名获取计算的样式

类操作

dom对象.className        dom对象.className = "类名1   类名2"         添加类

dom对象.classList.add(类名1, 类名2, ....)        添加一个或多个类

dom对象.classList.remove(类名1, 类名2, ....)        删除一个或多个类

dom对象.classList.toggle(类名)    添加/删除一个类 有则删，无则加

dom对象.classList.contains(类名)    判断dom对象是否含有某个类    若含有某个类返回true,否则返回false

dom对象.classList.item(索引)    根据索引返回对应类

DOM节点

节点属性操作

属性设置

设置内置属性值

节点对象.属性 = '值';

设置自定义的属性

节点对象.setAttribute(“属性名” , "属性值")

查看属性值

获取内置属性值(元素本身自带的属性)

节点对象.属性;

获取自定义的属性

节点对象.getAttribute("属性名")

删除属性

节点对象.removeAttribute("属性名")

节点操作（增删复插替）

创建元素节点

document.createElement("元素名")

追加（添加）节点

父节点.append(节点对象或字符串)

父节点.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

node.insertBefore(child , 指定元素)
将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素

删除节点

父节点.removeChild(删除的子节点对象)

节点对象.remove();//删除指定节点

克隆节点

节点对象.cloneNode(参数)
参数：
括号为空或者是里面为false 是浅拷贝 只复制标签不复制里面的内容
括号为true 是深拷贝 复制标签复制里面的内容

插入节点

父节点对象.insertBefore(新节点 , 参照节点)

替换节点

父节点对象.replaceChild(用来替换的新节点 ， 被替换的老节点)

获取DOM对象方法二

节点查找

父节点查找子节点方法

查找父节点下的第一个子节点（可能会找文本节点）
父节点对象.firstChild
查找父节点下的最后一个子节点（可能会找文本节点）
父节点对象.lastChild
查找父节点下的所有的子节点（可能会找文本节点）
父节点对象.childNodes  
查找父节点下的第一个子元素节点
父节点对象.firstElementChild
查找父节点下的最后一个子元素节点
父节点对象.lastElementChild
查找父节点下的所有的子元素节点
父节点对象.children  
可使用索引查找具体节点
如：
父节点对象.children[0]
子节点查找父节点
子节点对象.parentNode
子节点对象.parentElement
兄弟间节点查找

查找下一个兄弟节点(可能会找到文本节点)
节点对象.nextSibling
查找前一个兄弟节点(可能会找到文本节点)
节点对象.previousSibling  
查找下一个元素兄弟节点
节点对象.nextElementSibling 
查找前一个元素兄弟节点
节点对象.previousElementSibling 

event事件对象（此处含有鼠标相对于窗口的位置知识）

函数中的形参也代指event，所以将下方的event.写为形参.也可行

event.target 事件作用的目标
event.type 事件类型（事件名称)
event.clientX 距离浏览器窗口左侧的坐标(水平）受滚动条影响
event.clientY 距离浏览器窗口上侧的坐标(垂直）

event.clientX、event.clientY（不太推荐使用）

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX 距离文档左侧的坐标(水平) 不受滚动条影响

pageX = clientX + scrollLeft

event.pageY 距离文档上侧的坐标(垂直)

pageY = clientY + scrollTop

event.pageX、event.pageY（推荐使用）

类似于event.clientX、event.clientY，但它们是鼠标相对于文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

offset系列属性（获取元素的长和宽、位置）

offset作用：获取元素的长和宽、以及位置，是一个只读属性，不可更改。

offset包括四个属性：offsetWidth、offsetHeight、offsetTop、offsetLeft

offsetTop指 obj 相对于页面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位：像素。

offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top

简单来说，就是offsetParent的边框到该元素边框之间的距离。
dom对象.offsetTop
offsetLeft指 obj 相对于页面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位：像素。

offsetLeft= offsetParent的padding-left + 中间元素的offsetWidth + 当前元素的margin-left

简单来说，就是offsetParent的边框到该元素边框之间的距离。
dom对象.offsetLeft
这里有一个offsetParent属性，这是指该元素的父元素（使用定位的父元素，如果上一级父元素没有定位，则向上继续寻找，直至找到根元素body）。

offsetWidth指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位：像素。

简单来说，就是元素的内容+padding+边框。
dom对象.offsetWidth
offsetHeight指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位：像素。

简单来说，就是元素的内容+padding+边框。
dom对象.offsetHeight  

client系列（获取对象位置边框宽度等）

event.clientX、event.clientY（不推荐使用）

鼠标相对于浏览器窗口可视区域的X，Y位置坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

   dom对象.clientLeft ：获取元素左侧边框的宽度
   dom对象.clientTop ：获取元素上侧边框的宽度
   dom对象.clientWidth ：content + padding 不包含border，不包含滚动条（该元素对象的左内边框至右内边框的距离）
   dom对象.clientHeight ：content + padding 不包含border，不包含滚动条（该元素对象的上内边框至下内边框的距离）

event事件对象与offset系列属性结合案例放大镜的制作

<!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;
            }
            ul {
                list-style: none;
            }
            .clearfix::after {
                display: block;
                content: "";
                clear: both;
            }
            .box {
                position: relative;
                /* width: 1000px; */
                width: 400px;
                margin: 10px auto 0;
                background-color: rgb(239, 203, 140);
            }
            .box .left {
                width: 400px;
            }
            .box .left .left-top {
                position: relative;
                width: 400px;
                height: 400px;
                box-shadow: 0 0 0 1px #999;
            }
            .box .left .left-top img {
                width: 400px;
                height: 400px;
            }
            .box .left .left-top .zhezhao {
                position: absolute;
                top: 0;
                left: 0;
                width: 250px;
                height: 250px;
                background-color: rgba(253, 253, 253, 0.5);
                cursor: move; /*改变鼠标指针样式*/
            }
            .box .left .left-bottom {
                width: 400px;
                background-color: #f1f1f1f1;
            }
            .box .left-bottom ul li {
                float: left;
                width: 100px;
                margin: 10px;
            }
            .box .left-bottom ul li img {
                width: 100px;
            }
            .box .right {
                display: none; /*先隐藏掉 */
                position: absolute;
                left: 400px;
                top: 0;
                overflow: hidden;
                width: 500px;
                height: 500px;
                box-shadow: 0 0 0 1px #f00;
            }
            .box .right img {
                position: absolute;
                left: 0;
                top: 0;
                width: 800px;
                height: 800px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <!-- 左侧中等图片 -->
            <div class="left">
                <div class="left-top">
                    <img src="img/pic11.jpg" alt="" />
                    <div class="zhezhao"></div>
                </div>
                <!-- 下方小图片 -->
                <div class="left-bottom">
                    <!-- <span><</span> -->
                    <ul class="clearfix">
                        <li><img src="img/pic11.jpg" alt="" /></li>
                        <li><img src="img/pic22.jpg" alt="" /></li>
                        <li><img src="img/pic33.jpg" alt="" /></li>
                    </ul>
                    <!-- <span>></span> -->
                </div>
            </div>
            <!-- 右侧大图 -->
            <div class="right">
                <img src="img/pic11.jpg" alt="" />
            </div>
        </div>
    </body>
    <script>
        var box = document.querySelector(".box"); //获取最外侧div
        var leftTop = document.querySelector(".left-top"); //获取遮罩与中等图的父级
        var zhongimg = document.querySelector(".left-top>img"); //获取中等图片
        var _zhezhao = document.querySelector(".zhezhao"); //获取遮罩层
        var _rightDatu = document.querySelector(".right"); //获取右侧大图
        var rightDatu = document.querySelector(".right>img"); //获取右侧大图
        var imgs = document.querySelectorAll(".left-bottom li"); //获取下方轮播图片的li
        // 确定好定位关系，利用定位属性的left与top等属性值，结合偏移量数值，再结合鼠标移动事件，来实现让遮罩层随鼠标移动的效果。
        //再根据偏移量数值来确定 定位的最大值与最小值 从而确定（限制）遮罩层所能移动的范围
        _zhezhao.onmousemove = function (every) {
            //鼠标移动事件
            //.pageX 的偏移值不受滚动条影响  推荐使用此方法
            //.clientX 的偏移值受滚动条影响
            // console.log(every.pageX, every.clientX);
            var lf = every.pageX - _zhezhao.offsetWidth / 2 - box.offsetLeft; //遮罩层距离页面左侧的距离 - 自身内容宽度的一半 - 父元素距离距离页面左侧的距离
            var tp = every.pageY - _zhezhao.offsetHeight / 2 - box.offsetTop; //等式结果为遮罩层在父级元素中的left/top定位置
            if (lf <= 0) {
                //定位的left数值最小范围
                lf = 0;
            } else if (lf >= leftTop.offsetWidth - _zhezhao.offsetWidth) {
                //父级元素 - 遮罩层自身宽度 = 遮罩层可移动的最大宽度
                lf = leftTop.offsetWidth - _zhezhao.offsetWidth; //定位的left数值最大范围
            }
            //竖直方向与水平方向同理
            if (tp <= 0) {
                //定位的left数值最小范围
                tp = 0;
            } else if (tp >= leftTop.offsetHeight - _zhezhao.offsetHeight) {
                //父级元素 - 遮罩层自身宽度 = 遮罩层可移动的最大宽度
                tp = leftTop.offsetHeight - _zhezhao.offsetHeight; //定位的left数值最大范围
            }

            _zhezhao.style.left = lf + "px";
            _zhezhao.style.top = tp + "px";
            //下方让对应大图反方向与小图对应移动   取相对应的负值
            rightDatu.style.left = -lf * 2 + "px"; //此处我们设置小图与大图的比例为 1 ：2
            rightDatu.style.top = -tp * 2 + "px"; //所以应使大图全部显示同时就要调整大图移动数值的比例
        };
        //鼠标放在轮播图上时，将相应的中等图片更换
        // onmouseover  onmouseout 这两个函数会触发事件冒泡（事件冒泡：是指元素内部的子元素同样会触发事件而造成影响）所以需要进行判断
        // onmouseenter  onmouseleave 而两个函数不会触发事件冒泡（子元素不会触发事件） 这两个则无需判断
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].onmouseover = function (every) {
                //鼠标移入事件
                // console.log(every.target.src); //事件作用目标：every.target ; 通过此方法获取小图的src
                if (every.target.src != undefined) {
                    zhongimg.src = every.target.src; //把小图的src值 赋值给 zhongimg的src上
                }
            };
        }
        //鼠标放在中等图片父级上时，将相应的右侧大图更换
        leftTop.onmouseover = function () {
            //移入事件
            rightDatu.src = zhongimg.src; //把中等图的src值 赋值给 右侧大图的src上
            _rightDatu.style.display = "block"; //并且把右侧大图显示出来
        };
        leftTop.onmouseout = function () {
            //移出事件
            _rightDatu.style.display = "none"; //并且把右侧大图显示出来
        };
    </script>
</html>

效果：

getBoundingClientRect()返回元素的大小和相对于视口的位置

Element.getBoundingClientRect()方法会返回元素的大小和相对于视口的位置

集合中有top,left, right, bottom,等属性
dom对象.getBoundingClientRect()
元素左边到视窗左边的距离
dom对象.getBoundingClientRect().left
元素上边到视窗上边的距离
dom对象.getBoundingClientRect().top
元素右边到视窗左边的距离
dom对象.getBoundingClientRect().right
元素下边到视窗上边的距离
dom对象.getBoundingClientRect().bottom
元素自身宽度（content + padding + border）
dom对象.getBoundingClientRect().width
元素自身高度（content + padding + border）
dom对象.getBoundingClientRect().height 

scroll系列属性（滚动条相关属性）

返回/获取元素垂直方向滚动条滚动距离
dom对象.scrollTop 
返回/获取元素水平方向滚动条滚动距离
dom对象.scrollLeft  
返回/获取元素内部实际内容的宽度
dom对象.scrollWidth 
返回/获取元素内部实际内容的高度
dom对象.scrollHeight
dom对象滚动条滚动距离水平方向每次滚动x像素，垂直方向每次滚动y像素
dom对象.scrollBy(x , y)
dom对象滚动条水平方向滚动到x像素，垂直方向滚动到y像素
dom对象.scrollTo(x , y)

DOM事件

事件流类型

事件冒泡流（由内向外，由子向父）
事件捕获流（由外向内，由父向子）

添加监听事件

添加：dom对象.addEventListener(参数1，参数2，参数3)
           参数1：事件名不带on
           参数2：函数事件触发后调用函数
           参数3：布尔值事件流的类型默认false事件冒泡流如为true，则是事件捕获流
删除：dom对象.removeEventListener(参数1，参数2，参数3)
           参数1：事件名不带on
           参数2：函数事件触发后调用函数
           参数3：布尔值事件流的类型默认false事件冒泡流如为true，则是事件捕获流

大脸胖柴

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
JS——DOM对象常用方法知识简记

目录获取DOM对象方法一1.通过id获取2. 通过class(类名)获取3. 通过标签名获取4. 通过name属性获取5. 通过querySelector（选择器）获取6. 通过querySelectorAll获取获取特殊对象方法 body html获取或返回元素内容方法JS与CSS交互js添加与修改属性样式样式获取（查询）类操作DOM节点节点属性操作节点操作（增删复插替）获取DOM对象方法二节点查找父节点查找子节点方法...
复制链接

扫一扫