DOM对象

和蔼的阿木木o

已于 2022-08-16 09:53:59 修改

阅读量260

点赞数

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

于 2022-08-09 17:58:37 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/126250088

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

什么是DOM?

DOM获取元素

dom操作

tab选项卡

dom节点操作

dom节点查找

创建元素节点

属性操作

查找节点

节点查找-父子间

节点查找-兄弟间

文档片段创建

克隆节点

删除节点

节点操作案例

表格操作

HTML DOM的特有对象和操作

获取鼠标坐标案例

什么是DOM?

1.DOM--->Document Object Mode
2.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合，也有人称DOM是对HTML及XML的标准编程接口。

document对象的常用方法

三种访问页面元素的区别

getElementById()
        按元素的ID名称来访问
getElementsByName()
        按元素的name名称来访问
getElementsByTagName()
        按标签来访问

DOM获取元素

document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。没有兼容问题
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。没有兼容问题

document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表，伪数组

根据选择器获取元素

（1）方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。

（2）方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素集合（伪数组）。

（3）参数：字符串类型的 css 中的选择器。（例如：.box / #nav）

（4）浏览器兼容问题：不支持 IE8

（5）需要将 js 代码写在 html 结构之后；不会动态增加

<body>
    <div id="box1">
      <p>1</p>
      <p class="para">2</p>
      <p class="para">3</p>
    </div>
    <script>
      var para = document.querySelector("#box1 .para");
      console.log(para); // <p class="para">2</p>

      var paras = document.querySelectorAll("#box1 .para");
      console.log(paras); // NodeList(2) [p.para, p.para]
    </script>
</body>

dom修改元素样式

(1). 修改内联样式

         a. 元素.style.css属性名="属性值"
         b. 相当于: 修改HTML中<元素>的style属性内的某个css属性的值

                  <元素 style="css属性名:属性值">

         c. 问题: 有些css属性名是带-的，但是js中除了减法计算之外，不允许随便写-。会混淆

         d. 解决: DOM标准规定，所有带-的css属性名，一律去横线变驼峰:

                  比如: z-index ->   zIndex

                           font-size ->   fontSize

DOM迭代原数组

<body>
    <input type="text" value="rose">
    <input type="text" value="alex">
    <input type="text" value="jack">
</body>
<script>
    var inputs = document.getElementsByTagName("input"); //标签对象

    // Array.from(inputs).forEach(function (item) { 转换数组
    //     console.log(item.value);
    // })

    // for (var i of inputs) {
    //     console.log(i.value);
    // }

    // for (var i in Array.from(inputs)) {
    //     console.log(inputs[i].value);
    // }

    // for (var i = 0; i < inputs.length; i++) {
    //     console.log(inputs[i].value);
    // }
</script>

dom操作

二级悬浮菜单

<body>
    <div class="list">
        <ul class="list1">
            <li><a href="">电脑办公</a>
                <ul class="list2">
                    <li><a href="javascript:;">笔记本</a></li>
                    <li><a href="javascript:;">台式机</a> </li>
                    <li><a href="javascript:;">显卡</a> </li>
                    <li><a href="javascript:;">内存</a></li>
                </ul>
            </li>
            <li><a href="">家具</a>
                <ul class="list2">
                    <li><a href="javascript:;">水杯</a></li>
                    <li><a href="javascript:;">餐具</a> </li>
                    <li><a href="javascript:;">刀具</a> </li>
                    <li><a href="javascript:;">家具</a></li>
                </ul>
            </li>
            <li><a href="">美妆</a>
                <ul class="list2">
                    <li><a href="javascript:;">护肤</a></li>
                    <li><a href="javascript:;">护法</a> </li>
                    <li><a href="javascript:;">护理</a> </li>
                    <li><a href="javascript:;">个护</a></li>
                </ul>
            </li>
            <li><a href="">运动户外</a>
                <ul class="list2">
                    <li><a href="javascript:;">冲锋衣</a></li>
                    <li><a href="javascript:;">冲锋裤</a> </li>
                    <li><a href="javascript:;">羽绒服</a> </li>
                    <li><a href="javascript:;">腕表</a></li>
                </ul>
            </li>
            <li><a href="">食品</a>
                <ul class="list2">
                    <li><a href="javascript:;">咖啡</a> </li>
                    <li><a href="javascript:;">零食</a> </li>
                    <li><a href="javascript:;">保健</a></li>
                    <li><a href="javascript:;">进口</a></li>
                </ul>
            </li>
            <li><a href="">数码</a>
                <ul class="list2">
                    <li><a href="javascript:;">手机</a></li>
                    <li><a href="javascript:;">手环</a> </li>
                    <li><a href="javascript:;">投影仪</a> </li>
                    <li><a href="javascript:;">音响</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>

    var nav = document.querySelectorAll(".list1 li"); //一级菜单
    nav.forEach(function (item, index) {

        //鼠标悬浮事件
        item.onmouseover = function () {
            var oul = item.getElementsByTagName("ul")[0];  //查找当前li下的ul
            if (oul != undefined) {
                oul.style.display = "block"
            }
            item.style.background = "red";
        }
        //鼠标离开事件
        item.onmouseout = function () {
            var oul = item.getElementsByTagName("ul")[0];  //查找当前li下的ul
            if (oul != undefined) {
                oul.style.display = "none"
            }
            item.style.background = "";
        }
    })

</script>

tab选项卡

<body>
    <div class="main">
        <ul class="oul">
            <li><a href="#">第一个</a> </li>
            <li><a href="#">第二个</a> </li>
            <li><a href="#">第三个</a> </li>
            <li><a href="#">第四个</a> </li>
        </ul>
    </div>
    <div class="box">
        <div class="con">第一个div内容</div>
        <div class="con">第二个div内容</div>
        <div class="con">第三个div内容</div>
        <div class="con">第四个div内容</div>
    </div>
</body>
<script>
    var oli = document.querySelectorAll(".oul li");
    var odiv = document.querySelectorAll(".box .con");
    for (let i = 0; i < oli.length; i++) {
        oli[i].onclick = function () {
            // 先把所有的li上的类都去掉
            for (var j = 0; j < oli.length; j++) {
                oli[j].className = "";
                odiv[j].style.display = "none"
            }
            // 点击当前li 给当前li添加on 类
            oli[i].className = "on";
            odiv[i].style.display = "block"
        }
    }
</script>
// 变量声明提升
        // console.log(a);
        // var a = 10;

            // let  与 var  区别：
            // 1：var 存在变量声明，let 不存在变量声明
            // 2: var 声明的变量不存在块作用域，let声明的变量存在款作用域
            // 3：var 可以重复生命变量，let不允许在相同作用域，重复生命变量
            // 4，存在暂时性死区  只要块作用域存在let命令，他所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

购物车全选操作

<body>
    <input type="checkbox" name="" id="checkall">
    <label for="checkall">全选</label>
    <ul>
        <li>
            <input type="checkbox" name="" id="apple" class="checkone">
            <label for="apple">苹果</label>
        </li>
        <li>
            <input type="checkbox" name="" id="banana" class="checkone">
            <label for="banana">香蕉</label>
        </li>
        <li>
            <input type="checkbox" name="" id="orange" class="checkone">
            <label for="orange">橘子</label>
        </li>
        <li>
            <input type="checkbox" name="" id="watermelon" class="checkone">
            <label for="watermelon">西瓜</label>
        </li>
    </ul>
</body>

<script>
    var ckAll = document.getElementById('checkall');
    var ckOnes = document.querySelectorAll('.checkone');

    ckAll.onchange = function () {
        // console.log(this.checked);
        var x = this.checked;
        if (x === true) {
            for (var i = 0; i < ckOnes.length; i++) {
                ckOnes[i].checked = true;
            }
        } else {
            for (var i = 0; i < ckOnes.length; i++) {
                ckOnes[i].checked = false;
            }
        }
    }

    优化代码 // 全选/ 全不选 -->
    // ckAll.onchange = function () {
    //     for (var i = 0; i < ckOnes.length; i++) {
    //         ckOnes[i].checked = this.checked
    //     }
    // }


    // 给每个商品的复选框添加onchange事件
    var count = 0;
    ckOnes.forEach((item) => {
        item.onchange = function () {
            var count = 0;
            for (var i = 0; i < ckOnes.length; i++) {
                if (ckOnes[i].checked) { // 如果单个商品被选中
                    count++; // 计数
                }
            }
            if (count === ckOnes.length) { // 记的数与所有的商品数量一样时，表明所有的商品已被选中
                ckAll.checked = true;
            } else {
                ckAll.checked = false;
            }
        }
    })

    优化代码1// ckOnes.forEach(item => {
    //     item.onchange = function () {
    //         var t = Array.from(ckOnes).every(function (item) {
    //             return item.checked;
    //         })
    //         ckAll.checked = t;
    //     }
    // })


    优化代码2// ckOnes.forEach(item => {
    //     item.onchange = function () {
    //         ckAll.checked = Array.from(ckOnes).every(item => item.checked);
    //     }
    // })
</script>

dom节点操作

dom节点查找

<body>
    <ul id="list">
        <li id="con">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("list");//元素节点对象
    var oLi = document.getElementById("con");//元素节点对象
    var oAttr = oUl.getAttributeNode("id");//属性节点对象
    // alert(oAttr)
    console.log(oAttr.nodeType);//2
    console.log(oAttr.nodeName);//id  属性节点的名称 属性名
    console.log(oAttr.nodeValue);//list  属性节点的值 属性值


    // alert(oLi.firstChild);//文本节点
    console.log(oLi.firstChild.nodeType);//3  文本节点 
    console.log(oLi.firstChild.nodeName);//#text  文本节点 
    console.log(oLi.firstChild.nodeValue);//列表1



    // alert(oUl)
    // console.log(oUl.nodeType);// 1   节点类型
    // console.log(oUl.nodeName);// UL  节点名称
    // console.log(oUl.nodeValue);// null  节点值



    节点:      nodeType     nodeName     nodeValue
    元素节点      1           元素名         null
    属性节点      2           属性名        属性值
    文本节点      3           #text         文本内容
</script>

创建元素节点

<script>
    var odiv = document.createElement("div"); //创建一个div元素对象
    // odiv.innerHTML="hello";
    var otext = document.createTextNode("hello") //创建文本节点

    odiv.appendChild(otext);
    document.body.appendChild(odiv); //直接在body里添加元素 

    创建元素节点：
    document.creareElement(标签名)
    创建文本节点：
    document.createTextNode(文本内容)
    在父节点的内部最后追加子节点对象
    父节点对象.appendChild(子节点对象)
    父节点对象.append(参数)
    参数：节点对象 或 字符串

    //body里添加照片
    var odiv = document.createElement("img");
    var oshu = odiv.setAttribute("src", "./1.webp"); //给img元素添加src属性
    document.body.appendChild(odiv);
</script>

属性操作

<body>
    <div id="box" a="10">hello world</div>
</body>
<script>
    var odiv = document.getElementById("box");
    console.log(odiv.getAttribute("id")); //通过属性名 获取 属性值
    console.log(odiv.id); //通过属性名 获取  属性值

    console.log(odiv.getAttribute("a")); //
    console.log(odiv.a);

    odiv.setAttribute("title", "这是一个div");
    odiv.title = "hhhhhh";
    odiv.setAttribute("b", "100");
    odiv.b = "hhhh"

    odiv.removeAttribute("a");
    属性操作
        查看属性值   dom对象.getAttribute(属性名);
        设置属性     dom对象.setAttribute(属性名, 属性值);
        删除属性     dom对象.removeAttribute(属性名)
</script>

查找节点

查看/修改/删除属性节点
getAttribute("属性名")
setAttribute("属性名","属性值")
removeAttribute(“属性名”)

节点查找-父子间

<body>
    <ul id="list">
        <li id="con">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oul = document.getElementById("list");
    console.log(oul.firstChild);  //ul里第一个子节点 可能会遇到文本节点
    console.log(oul.firstElementChild); //ul的第一个元素节点

    console.log(oul.lastChild); //ul里最后一个子节点 可能会遇到文本节点
    console.log(oul.lastElementChild); //ul的最后一个元素节点

    console.log(oul.childNodes); //查找ul里所有的子节点 
    console.log(oul.childNodes.length); //7 子节点的个数

    console.log(oul.children); //查找ul里所有的子元素节点
    console.log(oul.children.length); //3

    console.log(oul.parentNode); //查找ul的父节点
    console.log(oul.parentElement);
</script>

节点查找-兄弟间

<body>
    <ul class="list">
        <li>列表1</li>
        <li id="con">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oli = document.getElementById("con");

    console.log(oli.nextSibling);;
    console.log(oli.nextElementSibling);

    console.log(oli.previousSibling);
    console.log(oli.previousElementSibling);

    同级间查找
    节点.nextSibling 查找下一个兄弟节点，可能会查找到文本节点
    节点.nextElementSibling 查找下一个元素兄弟节点

    节点.previousSibling 查找前一个兄弟节点  可能会查找到文本节点
    节点.previousElementSibling 查找前一个元素兄弟节点
</script>

文档片段创建

<body>
    <ul id="list"></ul>
</body>
<script>
    var oUl = document.getElementById("list");
    var frag = document.createDocumentFragment();//创建一个文档片段
    // console.log(frag.nodeType);//11
    for (var i = 0; i < 3; i++) {
        var oLi = document.createElement("li");
        frag.appendChild(oLi);
    }
    oUl.appendChild(frag)


    创建文档片段
    document.createDocumentFragment() 
</script>

克隆节点

<body>
    <div id="box">
        hello world
        <p>hhhh</p>
    </div>
    <span id="bon">hello span</span>
</body>
<script>
    var oul = document.getElementById("box");
    var ospan = document.getElementById("bon");
    var op = document.lastElementChild; //查找div里的最后一个子元素p
    // 克隆span，默认不克隆子元素
    // var c = ospan.cloneNode()
    var c = ospan.cloneNode(true); //加true可以克隆子元素

    c.setAttribute("id", "con2") //修改属性

    odiv.insertBefore(c, op) //新节点c插入到老节点op

    克隆节点：
    节点对象.cloneNode(参数)
    参数：可选 布尔值 默认false 是否克隆后代
    若省略则为false，仅克隆元素本身，不克隆后代，若为true，会克隆自身与后代

    插入节点：
    父节点对象.insertBefore(新节点，老节点)
    在父节点内部把新节点插入到老节点的前面
</script>

删除节点

<body>
    <div id="box">hello world</div>
</body>
<script>
    var oDiv = document.getElementById("box");

    // var oImg = document.createElement("img");
    // oImg.src = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";

    // document.body.replaceChild(oImg, oDiv);

    // document.body.removeChild(oDiv);

    oDiv.remove();



    替换节点：
    父节点对象.replaceChild(新节点，老节点)
    在父节点内部，用新节点替换掉老节点

    删除节点：
    父节点对象.removeChild(要删除的子节点)
    节点对象.remove();

</script>

节点操作案例

<style>
        #list {
            list-style: none;
            display: flex;
        }

        #list img {
            width: 250px;
            height: 200px;
        }

        #box {
            font-size: 20px;
        }

        span {
            font-size: 25px;
            color: red;
        }
    </style>
</head>

<body>
    <ul id="list">
        <li><img src="./img/1.jpg" alt=""></li>
        <li><img src="./img/2.jpg" alt=""></li>
        <li><img src="./img/3.jpg" alt=""></li>
        <li><img src="./img/4.jpg" alt=""></li>
        <li><img src="./img/5.jpg" alt=""></li>
        <li><img src="./img/6.jpg" alt=""></li>
        <li><img src="./img/7.jpg" alt=""></li>
    </ul>
    <div id="box"><span id="sp"></span></div>
</body>
<script>
    var oul = document.getElementById("list").children;
    var ospan = document.getElementById("sp");
    var obox = document.getElementById("box")
    for (let i = 0; i < oul.length; i++) {
        oul[i].onclick = function () {
            var arr = ["大娃", "二娃", "三娃", "四娃", "五娃", "六娃", "七娃"];
            var and = ospan.innerHTML = `${i + 1}号选手${arr[i]}`;
            obox.innerHTML = "你派遣的是<span style='color='red''>" + and + "</span>和蛇妖作战"
        }
    }
</script>

表格操作

<body>
    <div class="box">
        <table border="1" cellspacing="0" width="400px" class="tab">
            <tr>
                <td>书名</td>
                <td>价格</td>
            </tr>
            <tr>
                <td>看得见风景的房间</td>
                <td>30</td>
            </tr>
            <tr>
                <td>幸福从天而降</td>
                <td>18.5</td>
            </tr>
            <tr>
                <td>60个瞬间</td>
                <td>32</td>
            </tr>
        </table>
        <input type="button" id="add" value="增加一行">
        <input type="button" id="dele" value="删除第二行">
        <input type="button" id="title" value="修改标题样式">
        <input type="button" id="ctrl" value="复制最后一行（并插入到幸福从天而降前）">
    </div>
</body>
<script>
    //增加一行
    var otab = document.querySelector(".tab");
    var oadd = document.getElementById("add");
    var odele = document.getElementById("dele");
    var otitle = document.getElementById("title");
    var octrl = document.getElementById("ctrl");
    var tabs = otab.firstElementChild.children;
    var num = 0
    oadd.onclick = function () {
        var otr = document.createElement("tr");
        var frag = document.createDocumentFragment();
        for (var i = 0; i < 2; i++) {
            var otd = document.createElement("td");
            otd.innerHTML = `单元格${++num}`;
            frag.appendChild(otd);
        }
        otr.appendChild(frag);
        otab.firstElementChild.appendChild(otr);
    }
    //删除第二行
    odele.onclick = function () {
        tabs[1].remove();
    }
    //修改标题样式
    otitle.onclick = function () {
        var ootr = tabs[0];
        // console.log(ootr);
        ootr.style.textAlign = "center";
        ootr.style.backgroundColor = "#ccc";
        ootr.style.fontWeight = "bold"
    }
    //复制
    octrl.onclick = function () {
        var ooc = tabs[tabs.length - 1].cloneNode(true);
        otab.firstElementChild.insertBefore(ooc, tabs[tabs.length - 2]);

    }
</script>

HTML DOM的特有对象和操作

表格的操作
添加行和单元格
  var table=document.createElement("table");   //创建表
  table.insertRow(i);            //在table的第i行插入行（i为索引）
row.insertCell(i);              //在row的第i个位置插入单元格
引用查找单元格对象
  table.rows[i].cells[i];
删除行和单元格
  table.deleteRow(index); （index为索引）
  row.deleteCell(index);

<script>
    var tab = document.getElementById("table");

    // console.log(tab.rows);
    // console.log(tab.rows[0].cells[1]);
    // tab.rows[1].style.backgroundColor = "#ccc"
    var oTr = tab.insertRow(0);
    oTr.insertCell(0).innerHTML = "老大";
    oTr.insertCell(1).innerHTML = "老二";
    oTr.insertCell(2).innerHTML = "小三";

    // tab.deleteRow(2);
    tab.rows[2].deleteCell(1);
</script>

获取鼠标坐标案例

<script>
    document.onclick = function (ev) { //event
        // console.log(ev.type);//事件类型
        // console.log(ev);
        // console.log(ev.clientX, ev.clientY);//获取鼠标单击的那点的坐标
        var pic = document.createElement("img");
        pic.src = "https://gw.alicdn.com/imgextra/i4/2206582779661/O1CN01pxzDO82LEnA9tn306_!!2206582779661-0-alimamacc.jpg_300x300q90.jpg_.webp";
        pic.style.width = "100px";
        pic.style.height = "100px";
        pic.style.position = "fixed";
        pic.style.left = ev.clientX - 100 / 2 + "px";
        pic.style.top = ev.clientY - 100 / 2 + "px";

        document.body.appendChild(pic);
    }
</script>

和蔼的阿木木o

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM对象

dom、dom对象常用方法、dom获取元素、dom、修改元素样式dom迭代数组、二级悬浮菜单效果、全选效果、tab选项卡效果、dom属性操作，节点获取查找，删除添加节点，节点案例、dom表格对象、鼠标坐标案例......
复制链接

扫一扫

专栏目录