DOM与BOM相关操作

最新推荐文章于 2024-10-05 23:15:10 发布

木子与金与玉

最新推荐文章于 2024-10-05 23:15:10 发布

阅读量203

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_62516225/article/details/128873990

版权

本文介绍了DOM（文档对象模型），它是JavaScript操作HTML页面的基础，包括如何通过getElementById、getElementsByTagName等方法获取元素，以及如何切换图片。此外，还讲解了如何获取子节点、父节点和兄弟节点，以及DOM的增删改查操作。文章还涉及了JavaScript事件处理，如onmousemove、onclick，事件冒泡和事件委托的概念，以及如何使用addEventListener绑定事件。最后，简单介绍了BOM（浏览器对象模型），如Window、Navigator、Location和History对象及其常用属性和方法。

摘要由CSDN通过智能技术生成

DOM

简介

DOM，全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
文档
- 文档表示的就是整个的HTML网页文档。
对象
- 对象表示将网页中的每一个部分都转换为了一个对象。
模型
- 使用模型来表示对象之间的关系，这样方便我们获取对象。

DOM查询

获取元素节点

通过document对象调用
- getElementById()，通过id属性获取一个元素节点对象
- getElementsByTagName()，通过标签名获取一组元素节点对象
- getElementsByName()，通过name属性获取一组元素节点对象

图片切换练习

<body>
    <div id="outer">
        <img src="./img/02.jfif" alt="">

        <button id="pre">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
<script>
    window.onload = function () {
        var pre = document.getElementById("pre");
        var next = document.getElementById("next");
        var img = document.getElementsByTagName("img")[0];

        imgArr = ["./img/01.jfif", "./img/02.jfif", "./img/03.jfif", "./img/04.jfif"];

        var index = 0;

        pre.onclick = function () {
            index--;
            if (index < 0)
                index = 3;
            img.src = imgArr[index];
        }
        next.onclick = function () {
            index++;
            if (index > 3)
                index = 0;
            img.src = imgArr[index];
        }
    }
</script>

获取元素节点的子节点

通过具体的元素节点调用
- getElementsByTagName()，方法，返回当前节点的指定标签名后代节点
- childNodes，属性，表示当前节点的所有子节点
- firstChild，属性，表示当前节点的第一个子节点
- lastChild，属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用
- parentNode，属性，表示当前节点的父节点
- previousSibling，属性，表示当前节点的前一个兄弟节点
- nextSibling，属性，表示当前节点的后一个兄弟节点

注意：document.querySelector(" .box1 div")可以根据css选择器来查询元素节点对象

DOM的增删改查

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

//创建一个li标签选项
    var li = document.createElement("li");

    var text = document.createTextNode("广州");

    li.appendChild(text);
    var body = document.body;
    body.appendChild(li);
    /*
    innerHTML也有相同的作用
    body.innerHTML+="<li>广州</li>"
    */

操作CSS样式

//获取元素对象
var btn=document.getElementById("btn");
//js修改样式：元素.style.样式名=样式值
btn.style.backgroundColor="yellow";

//获得当前样式使用Window里面的getComputedStyle()方法
var box = document.querySelector(".box");
alert(getComputedStyle(box, null).backgroundColor);

事件对象

onmousemove鼠标移动事件

<style>
    #box1 {
        width: 200px;
        height: 100px;
        margin-bottom: 10px;
        border: 1px solid #000;
    }

    #box2 {
        width: 200px;
        height: 30px;
        border: 1px solid #000;
    }
</style>
<script>
    window.onload = function () {
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");

        box1.onmousemove = function (event) {
            var x = event.clientX;
            var y = event.clientY;
            box2.innerHTML = "x=" + x + "," + "y=" + y;
        }
    }
</script>

<body>
    <div id="box1"></div>
    <div id="box2"></div>

</body>

div跟随鼠标移动事件

    window.onload = function () {
        var box1 = document.getElementById("box1");

        document.onmousemove = function (event) {
            event = event || window.event;
            var left = event.pageX;
            var top = event.pageY;

            box1.style.left = left + "px";
            box1.style.top = top + "px";
        }
    }

事件冒泡

事件的冒泡(Bubble)，所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

event.cancelBubble=true;

事件委托

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

event.target可以判断事件触发的对象，从而避免祖先元素触发事件

事件绑定

addEventListener()

通过这个方法也可以为元素绑定响应函数
- 参数:
  1.事件的字符串，不要on
  2.回调函数，当事件触发时该函数会被调用
  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

 box1.addEventListener("click", () => {
            console.log(1);
        }, false);
 box1.addEventListener("click", () => {
            console.log(2);
        }, false);
 box1.addEventListener("click", () => {
            console.log(3);
        }, false);

拖拽事件

    function drag(obj) {
        obj.onmousedown = function (event) {
            event = event || window.event;
            var ol = event.clientX - obj.offsetLeft;
            var ot = event.clientY - obj.offsetTop;



            document.onmousemove = (event) => {
                event = event || window.event;
                var left = event.pageX;
                var top = event.pageY;

                obj.style.left = left - ol + "px";
                obj.style.top = top - ot + "px";


            };

            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    };

键盘事件

onkeydown键盘按下事件
onkeyup键盘松开事件
keyCode可以判断那个键被按下

BOM

BOM

浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象
- window
  代表的是整个浏览器的窗口，同时window也是网页中的全局对象
- Navigator
  代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
- Location
  代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
- History
  代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。
  由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页而且该操作只在当次访间时有效
- screen
  代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息

Navigator

Navigator 对象属性

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

Navigator 对象方法

方法	描述
javaEnabled()	规定浏览器是否启用 Java。
taintEnabled()	taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。

window

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft，screenTop，screenX，screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

screen

Screen 对象属性

属性	描述
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
height	返回显示屏幕的高度。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval	设置或返回屏幕的刷新率。
width	返回显示器屏幕的宽度。

history

History 对象属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

History 对象方法

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

Location

Location 对象属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。