【JS基础】JS基本语法（八）

最新推荐文章于 2024-09-07 03:19:38 发布

青青的博客

最新推荐文章于 2024-09-07 03:19:38 发布

阅读量487

点赞数

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

本文链接：https://blog.csdn.net/m0_66148802/article/details/127231101

版权

基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

主要记录DOM【dom简介，dom查询，dom增删改，获取元素样式，其他样式操作的相关属性】和事件【事件对象，事件冒泡，事件委派，事件绑定，事件传播，滚轮事件，键盘事件】。

一、DOM

1.Dom简介

DOM，全程Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲地操作WEB页面。

文档：文档表示的就是整个的HTML网页文档。

对象：对象表示将网页中的每一个部分都转换为了一个对象。

模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

节点：节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。节点的类型不同，属性和方法也都不尽相同。

常用节点：

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

2. dom查询

通过document对象调用

获取元素节点：

getElementById（）通过id属性获取一个元素节点对象
getElementsByTagName（）通过标签名获取一组元素节点对象
getElementsByName（）通过name属性获取一组元素节点对象

如果需要读取元素节点属性，直接使用元素.属性名

例如：元素.id 元素.name 元素.value

注意：class属性不能采用这种方式，读取class属性时需要使用元素.className

获取元素节点的子节点（通过具体的元素节点调用）

getElementsByTagName()--方法，返回当前节点的指定标签名后代节点
childNodes --属性，表示当前节点的所有子节点（会获取包括文本节点在内的所有节点，根据DOM标准，标签间的空白也会当成文本节点。注意，在IE8及以下的浏览器中，不会将空白文本当成子节点）
firstChild--属性，表示当前节点的第一个子节点
lastChild --属性，表示当前节点的最后一个子节点
children--属性，可以获取当前元素的所有子元素

获取父节点和兄弟节点（通过具体的节点调用）

parentNode--属性，表示当前节点的父节点
previousSibling--属性，表示当前节点的前一个兄弟节点
nextSibling--属性，表示当前节点的后一个兄弟节点

dom的其他方法

获取body标签
在document中有一个属性body，它保存的是body的引用document.body;
获取html的根标签 document.documentElement
获取页面中所有的元素 document.all
根据元素的class属性值查询一组元素节点对象 document.getElementsByClassName()
可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下浏览器
document.querySelector() 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
例如：document.querySelector(".box1 div")
虽然IE8中没有getElementsByClassName()但是可以使用querySelector（）代替，使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，只会返回第一个。可以使用document.querySelectorAll()这个来获取全部的，它会将符合条件的元素封装到一个数组中，即使符合条件的元素只有一个，也会返回数组。

3.dom增删改

document.createElement（）创建元素节点
可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好得对象作为返回值返回。
document.createTextNode() 可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
appendChild（）向一个父节点中添加一个新的子节点用法：父节点.appendChild(子节点)；
insertBefore（）可以在指定的子节点前插入新的子节点语法：父节点.insertBefore(新节点，旧节点)
replaceChild（）可以使用指定的子节点替换已有的子节点语法：父节点.replaceChild(新节点，旧节点)；
removeChild（）可以删除一个子节点语法：父节点.removeChild(子节点)；
子节点.parentNode.removeChild(子节点)

4.获取元素样式

获取元素的当前显示的样式：语法：元素.currentStyle.样式名。它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。currentStyle只有ie浏览器支持，其他浏览器都不支持。

在其他浏览器中可以使用：getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。

需要两个参数：第一个：要获取样式的元素

第二个：可以传递一个为元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象.样式名来读取样式

如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如没有设置width，它不会获取到auto，而是一个长度。但是该方法不支持IE8及以下的浏览器。

5.其他样式操作的相关属性

clientWidth和clientHeight:这两个属性可以获取元素的可见宽度和高度
这些属性都是不带px的，返回的都是一个数字，可以直接进行计算
会获取元素宽度和高度，包括内容区和内边距
这些属性都是只读的，不能修改
offsetWidth和offsetHeight：这两个属性可以获取元素的整个的宽度和高度，包括内容区、内边距和边框
offsetParent :可以用来获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body
offsetLeft和offsetTop：当前元素相对于其他定位父元素的水平或者垂直偏移量
scrollWidth和scrollHeigh：可以获取元素整个滚动区域的宽度和高度
scrollLeft和scrollTop：可以获取水平滚动条或垂直滚动条滚动的距离
当满足scrollHeight - scrollTop == clientHeight说明垂直滚动条滚动到底了
当满足scrollWidth - scrollLeft == clientWidth 说明水平滚动条滚动到底

二、事件的简介

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过事件实现的。

对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

<!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>
    <button id ="btn">我是一个按钮</button>
</body>
<script>
    var btn = document.getElementById("btn");
    //可以为按钮的对应事件绑定处理函数的形式来响应事件
    //这样当事件被触发时，其对应的函数将会被调用
    btn.onclick= function(){
        alert("你好");
    }

</script>
</html>

1.事件对象

onmousemove：该事件将会在鼠标在元素中移动的时候被触发

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘哪个按键被按下，鼠标滚轮滚动的方向。。。

clientX可以获取鼠标指针的水平坐标；

clientY可以获取鼠标指针的垂直坐标

在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。解决这种事件对象的兼容性问题可以用以下方法：

第一种方法：

if(!event){

event = window.event;

}

第二种方法：

event = event || window.event;

2.事件冒泡

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

3.事件委派

我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素。

事件委派：指的是将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

4.事件绑定

使用对象.事件=函数的形式绑定响应函数，

它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。

例如： var btn01 = document.getElementById("btn01");
btn01.onclick = function(){

alert(1);}

使用addEventListener()通过这个方法可以为元素绑定多个，但是这个方法不支持IE8及以下版本。

使用attachEvent（）：

事件委派兼容性问题解决：

调用：

由于this指向不同，可以改变this的指向，代码如下：

5.事件的传播【了解即可】

6.滚轮事件

<!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>
    <script src="test1.js"></script>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload = function(){
            /*
             *当鼠标滚轮向下滚动时，box1变长
             当滚轮向上滚动时，box1变短
             *
             * */
            //获取id为box1的div
            var box1 = document.getElementById("box1");
            //为box1绑定一个鼠标滚轮滚动事件
            /*
            *onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动的时候触发，但是火狐不支持该属性
            在火狐中需要使用DOMMouseScroll来帮顶滚动事件
            注意该事件需要通过addEventListener（）函数来绑定
            */
            box1.onmousewheel = function(event){
               event = event || window.event;
               //判断鼠标滚轮滚动的方向
               //event.wheelDelta可以获取鼠标滚轮滚动的方向
               //向上滚是120 向下滚 -120 不看大小，只看正负
               //wheelDelta这个属性火狐中不支持
               //在火狐中使用event.detail来获取滚动的方向 向上滚-3 向下滚3
            //    alert(event.wheelDelta);
            if(event.wheelDelta>0 || event.detail <0){//向上滚
                //向上滚，box1变短
                box1.style.height = box1.clientHeight -10 +"px";

            }else{//向下滚
                //向下滚，box1变长
                box1.style.height = box1.clientHeight +10 +"px";

            }
            //使用event.preventDefault()取消默认行为，但是IE8不支持，如果直接使用则会报错
            event.preventDefault() &&  event.preventDefault();
            //当滚轮滚动时，如果有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不想发生，则可以取消默认行为
            return false;//此方式在火狐浏览器中不行，因为火狐浏览器的绑定是使用addEventListener（）方法绑定相应函数，取消默认行为时不能使用return false,需要使用event来取消默认行为

            }
            //为火狐绑定滚轮事件
            bind(box1,"DOMMouseScroll",  box1.onmousewheel);
        };
        function bind(obj,eventStr,callback){
            if(obj.addEventListener){
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr,callback,false);
            }else{
                /**
                 * this是谁由调用方式决定
                 * callback.call(obj)
           
                 * 
                 */
                 //IE8及以下
                 obj.attachEvent("on"+eventStr,function(){
                    //在匿名函数中调用回调函数
                    callback.call(obj);
                 })
            }
        }
    </script>
</head>
<body>
    <div class="" id="box1">
    </div>
    
</body>
</html>