JavaScript学习（十二）——DOM

最新推荐文章于 2024-08-25 15:00:00 发布

秃头的毛睿

最新推荐文章于 2024-08-25 15:00:00 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/107559741

版权

DOM对象可以使得JS对HTML文档进行操作。

1.获取对象操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">你点点试试？</button>
    <script type="text/javascript" src="firstUseJs.js"></script>
</body>
</html>

//获取button对象
var btn=document.getElementById("btn");
btn.innerHTML="你还真敢点啊！！";

2.事件

事件就是用户和浏览器之间的交互行为，比如点击按钮、鼠标移动……我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码会执行。

由于标签和js代码不能耦合使用，所以我们最好在js代码中实现，可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">你点点试试？</button>
    <script type="text/javascript" src="firstUseJs.js"></script>
</body>
</html>

//获取button对象
var btn=document.getElementById("btn");
btn.onclick=function(){
        alert("你还真的敢点啊！！！");
}

有一点需要注意的是，某些代码比如循环可能会先于事件绑定执行导致绑定的事件的下标出现问题。

3.DOM查询

通过document对象调用

（1）getElementById()，通过id属性获取一个元素节点对象

（2）getElementsByTagName()，通过标签名获取一组元素节点对象，该方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使只有一个也会封装到类数组对象中

（3）getElementsByName()，通过name属性获取一组元素节点对象，注意innerHtML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义，如果需要读取元素节点属性直接使用元素.属性名注意class属性不能采用这种方式，读取 calss属性时需要使用 元素.className

通过具体的元素节点调用

（1）getElementsByTagName()，就是通过传入的标签名获取标签对象，和上面的同名函数方法名不同的是，上面的是使用 document调用方法，而这个方法是使用具体的标签对象名来调用，从而获取调用标签之内的子标签对象。

（2）标签对象的childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签标签之间的空白也会当成文本节点

（3）标签对象的children属性可以获取当前元素的所有子元素，不包括文本节点

（4）firstChild属性表示当前节点的第一个子节点，包括空白节点，firstElementChild属性表示表示当前节点的第一个子元素

（5）lastChild属性表示当前节点的最后一个节点，包括空白节点

（6）parentNode属性表示当前节点的父节点，innerText可以获取标签内部的文本内容，会将标签去除，而innerHTML获取的是文本之间的内容，可能不去标签属性

（7）previousSibling属性表示当前节点的前一个兄弟节点，也可能获取空白文本，previousElementSibling获取前一个兄弟元素

（8）nextSibling属性表示当前节点的后一个兄弟节点

（9）文本框中的value属性就是文本框中写的内容，也可以通过value直接修改文本框中的内容

（10）文本节点之中的nodeValue属性就是文本内容

4.document.querySelector("css选择器标签名")

需要一个选择器的字符串为参数，可以根据一个css选择器来查询一个元素节点对象，使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个，也可以不指定标签名直接按css选择器来查询

5.document.querySelectorAll("css选择器标签名")

该方法和document.querySelector方法类似，不同的是它会将符合封装条件的元素封装到一个数组中返回，也可以不指定标签名直接按css选择器来查询

6.注意，JS代码也是一行行的执行，所以对于写在逻辑代码代码之下的标签绑定时，需要在逻辑代码中的window.onLoad属性之中绑定一个函数，从而在页面加载的时候正确调用事件。

7.DOM增加删除标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">你点点试试？</button>
    <div id="tbw">
        <button id="first">我是一号按钮</button>
    </div>
    <script type="text/javascript" src="firstUseJs.js"></script>
</body>
</html>

document.createElement()，可以用于创建一个元素节点对象，他需要一个标签名字符串作为参数，它将会根据这个标签名来创建元素节点对象，并将创建的对象作为返回值返回

document.createTextNode()，可以创建文本节点对象，它需要一个文本字符串作为参数，它将会根据改内容创建文本节点，并将该节点返回

父对象.appendChild(子对象)，可以向一个父节点中添加一个新的子节点

    //获取button对象
    var btn=document.getElementById("btn");
    //btn.innerHTML="你还真敢点啊！！";
    btn.onclick=function(){
        //创建元素对象
        var btn2=document.createElement("button");
        //创建文本对象
        var txt=document.createTextNode("我是被创建的按钮");
        //向父节点中设置一个子节点
        btn2.appendChild(txt);
        //获取div标签
        var bod=document.getElementsByTagName("div");
        //document.write(btn2);
        //再把标签添加到body下
        bod[0].appendChild(btn2);
    }

父对象.insertBefore(新节点，旧节点)，可以在指定的子对象前插入新的子节点

    //获取button对象
    var btn=document.getElementById("btn");
    //btn.innerHTML="你还真敢点啊！！";
    btn.onclick=function(){
        //创建元素对象
        var btn2=document.createElement("button");
        //创建文本对象
        var txt=document.createTextNode("我是被创建的按钮");
        //向父节点中设置一个子节点
        btn2.appendChild(txt);
        //获取div标签
        var bod=document.getElementsByTagName("div");
        var old=document.getElementById("first");
        //再把标签添加到first前
        bod[0].insertBefore(btn2,first);
    }

父节点.replaceChild(新节点，旧节点)，可以使用指定的子节点替换已有的子节点，某些情况下可以使用innerHTML来实现替换的功能

    //获取button对象
    var btn=document.getElementById("btn");
    //btn.innerHTML="你还真敢点啊！！";
    btn.onclick=function(){
        //创建元素对象
        var btn2=document.createElement("button");
        //创建文本对象
        var txt=document.createTextNode("我是被创建的按钮");
        //向父节点中设置一个子节点
        btn2.appendChild(txt);
        //获取div标签
        var bod=document.getElementsByTagName("div");
        var old=document.getElementById("first");
        bod[0].replaceChild(btn2,old);
    }

父节点.removeChild(子节点)，可以删除父节点的一个子节点，同时也有一个很方便的用法：

子节点.parentNode.removeChild(子节点)

使用innerHTML也可以完成一些DOM的增删改的工作，比如增假标签，就可以直接给innerHTML来增假一组标签和内容的字符串即可，也可以两种方式结合使用：

    //获取button对象
    var btn=document.getElementById("btn");
    //btn.innerHTML="你还真敢点啊！！";
    btn.onclick=function(){
        //创建元素对象
        var btn2=document.createElement("button");
        btn2.innerHTML="我是通过innerHTML创建的按钮";
        var bod=document.getElementsByTagName("div");
        var old=document.getElementById("first");
        bod[0].appendChild(btn2);
    }

8.document中有一个属性body，它保存的是body标签的引用对象，等价于document.getElementsByTagName("body")[0]

9.document.documentElement保存的是html根标签

10.document.all代表着页面中的所有元素，是一个数组，all.length是所有标签的总数，等价于document.getElement("*")

11.根据元素的class属性查询一组元素节点对象document.getElementsByClassName("属性名")

12.通过JS修改元素的样式：元素.style.样式名，我们通过JS设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，当然除了样式设置为 !important，设置了这一操作之后，被设置的属性样式具有最高优先级

注意：如果要修改的样式名中含有-号，那么这种命名在JS中是不合法的，比如background-color应当修改为backgroundColor，将减号去掉，并把减号后面的字母大写

我们通过style属性设置和读取的都是内联样式，所以我们无法读取样式表中的样式，如果想要读取也可以间接的使用元素.currentStyle.样式名，这样就可以读取当前正在显示的样式了，如果选择的属性没有设置样式，那么返回的是默认样式，但是注意：currentStyle指在IE浏览器中支持。

在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，它是window的方法，可以直接调用，他需要两个参数，第一个参数是要获取样式的元素，第二个参数可以传递一个伪元素，一般是null，该方法最终会返回一个对象，对象中封装了当前元素对应的样式，但是他和currentStyle的不同点就在于如果获取的样式没有设置，他会获取到真实的值，而非默认值，他们两个的共同点是获取到的样式属性都是只读的，不能修改，如果要修改必须通过style属性

我们可以自定义一个函数来实现浏览器的兼容：getStyle(obj,name)，obj是所需要查询的元素名称，name是样式属性名称

    function getStyle(obj,name){
        if(window.getComputedStyle){//如果浏览器包含getComputedStyle方法
            return getComputedStyle(obj,null)[name];
        }else{//否则直接返回currentStyle的属性调用
            return obj.currentStyle[name];
        }
    }

记住在判断getComputedStyle的时候一定要加上window，如果不加上并且没有getComputedStyle的话，会直接报错不存在变量，但是加上就不一样了，不存在会返回undefined程序正确运行。

clientWidth和clientHeight这两个属性可以获取元素的可见宽度和高度，返回的包括内容区和内边距，但是不包括边框，这些属性都是不带单位的，可以直接进行计算，都是只读的，不能修改

offsetWidth和offsetHeight可以获取元素的整个的宽度和高度，包括内容区、内边距和边框

offsetParent可以获取当前元素的定位父元素，会获取到距离当前元素最近的开启了定位的祖先元素，如果所有祖先元素都没有开启定位那么返回body

offsetLeft可以获得当前元素相对于其定位父元素的水平偏移量（距离左侧），offsetTop可以获得当前元素相对于其定位父元素的垂直偏移量（距离右侧）

scrollWidth和scrollHeight可以获取元素整个滚动区域的宽度和高度

scollLeft可以获取水平滚动条距离左边的距离，scrollTop可以获取垂直滚动条距离上边的距离

两个关于滚动条很重要的公式：

当满足scrollHeight-scrollTop==clientHeight，说明垂直滚动条到底了

当满足scrollWidth-scrollLeft==clientWidth，说明水平滚动条到底了

滚动条对象滚动时触发的事件滚动条对象.onscroll

disabled属性可以设置一个元素是否禁用，如果设置为true，则元素禁用，如果设置为false，则元素可用