Day20-DOM节点操作

最新推荐文章于 2024-08-09 21:30:00 发布

金霖海

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量244

点赞数

分类专栏：前端1 文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/qq_33396183/article/details/131726945

版权

前端1 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

文章目录

DOM操作

DOM操作

	目前我们学习的前端知识有html、css、简单的javascript，仅靠这些知识，无法做出交互性很强的网页，比如无法给用户呈互动性很强的表单校验，无法展示复杂的前端特效等等.
	通过DOM的学习，我们就可以开发出交互性更强的网页!

1 什么是DOM

DOM，全称为:“Document Object Model"(文档对象模型)，当浏览器载入一个HTML文档后，浏览器会将所有的标签整合到document对象上面。比如，对于以下HTML文档:

浏览器加载完该文档后，生成的DOM结构为:

在DOM (Document Object Model)中,每一个元素、元素属性、元素中的文本等都叫做节点:

(1)文档是一个文档节点。
(2)所有的HTML元素都是元素节点。
(3)所有HTML属性都是属性节点。
(4)HTML元素中的文本是文本节点。(如上面的d1和d2就是文本阶段)

2 获取元素

案例1-dom普通方法

    <ul>
        <!-- id具有唯一性 -->
        <li id="li1">首页</li>
        <li id="li2">娱乐</li>
        <!-- class可以重复 -->
        <li class="nav">新闻</li>
        <li class="nav">体育</li>
    </ul>


    <script>
        /**
         * 获取元素
         *  1.普通方法(了解)
        */

        //a 通过id获取元素节点   注意:一个页面中,id值一定是唯一 
        let obj1 = document.getElementById("li1")
        console.log(obj1);
        //b 通过标签名获取元素节点 ;获取到的是多个元素节点
        let obj2 = document.getElementsByTagName("li")
        console.log(obj2);
        //c 通过class获取元素节点 ;获取到的是多个元素节点
        let obj3 = document.getElementsByClassName("nav")
        console.log(obj3);
    </script>

知识点

通过id获取元素

通过标签名获取元素

通过class获取元素

案例2-dom通用方法(重点)

querySelector(css选择器)：代表获取指定的节点，默认只返回一个
querySelectorAll(css选择器)：返回找到的所有节点。

    <ul>
        <!-- id具有唯一性 -->
        <li id="li1">首页</li>
        <li id="li2">娱乐</li>
        <!-- class可以重复 -->
        <li class="nav">新闻</li>
        <li class="nav">体育</li>
    </ul>


    <script>
        /**
         * 获取元素
         *  2.通用方法(重点)
         *      document.querySelector("CSS选择器") 获取到选器匹配的第一个元素,结果是一个元素
         *      document.querySelectorAll("CSS选择器") 获取到选择器匹配的所有元素
        */

        //1基本选择器
            //元素选择器
            //类选择器
            //id选择器
        let obj2_1 = document.querySelector("#li1")
        console.log(obj2_1);

        let obj2_2 = document.querySelectorAll("li")
        console.log(obj2_2);
        //2复合选择器
            //后代选择器
        let obj2_3 = document.querySelectorAll("ul li")    
        console.log(obj2_3);
    </script>

练习

获取整个表格

获取所有的tr

获取有class="as"的td

获取tbody下面所有的tr

    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td class="as">耳机</td>
                <td class="as">1200</td>
            </tr>
            <tr>
                <td>002</td>
                <td class="as">耳机</td>
                <td class="as">1200</td>
            </tr>
        </tbody>
    </table>


    <script>
        // 获取整个表格
        let otable = document.querySelector("table")
        console.log(otable);
        // 获取所有的tr
        let otr = document.querySelectorAll("tr")
        console.log(otr);
        // 获取有class="as"的td
        let otd = document.querySelectorAll(".as")
        console.log(otd);
        // 获取tbody下面所有的tr
        let otr2 = document.querySelectorAll("tbody tr")
        console.log(otr2);
    </script>

3 元素内容操作

案例1 innerHTML

innerHTML主要用来识别双标签中的html标记

获取

    <span id="sp1">
        <a href="https://www.baidu.com">百度一下</a>
    </span>

    //获取span标签中间的html节点
    //获取到span标签
    let ospan = document.querySelector("#sp1")
    //获取span标签中间的html节点
    let obj = ospan.innerHTML
    console.log(obj);

插入

    //b.向span标签中插入html节点,会覆盖span标签中以前的内容(注:双引号里面只能写单引号)    
    ospan.innerHTML = "<img src='./img/HTML+CSS.png' >"

案例2 innerText

innerText用于访问双标记的元素内容，且不能识别html标记

获取

    <span id="sp2">
        <a href="https://www.baidu.com">百度一下</a>
    </span>
    //a.获取span标签中间的文本
    let osp2 = document.querySelector("#sp2")
    let text = osp2.innerText
    console.log(text);

插入

    //b.向双标签中间插入文本节点,会覆盖span标签中以前的内容
    osp2.innerText = "<img src='./img/HTML+CSS.png' >"

练习

获取表格中第一件商品的名称

修改表格中第二个商品的价格为5000

<!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>
    <table class="mytable">
        <thead>
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td class="as" id="goods1">手机</td>
                <td class="as">1200</td>
            </tr>
            <tr>
                <td>002</td>
                <td class="as">耳机</td>
                <td class="as" id="goods2">1200</td>
            </tr>
        </tbody>
    </table>

    <script>
        //获取表格中第一件商品的名称

        //修改表格中第二个商品的价格为5000

    </script>
</body>
</html>

4 属性操作

拿到一个节点后，操作这个节点的属性

    <img>
    <script>
        //1.获取img标签
        let oimg = document.querySelector("img")
        //2.img标签属性的增删改查
        //增
        oimg.setAttribute("src","./img/flo1.jpg")
        //改
        oimg.setAttribute("src","./img/HTML+CSS.png")
        //查
        let msg = oimg.getAttribute("src")
        console.log(msg);
        //删除
        oimg.removeAttribute("src")
    </script>

5 综合案例

使用js渲染出一个表格

<!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>
        table{
            border: 1px black solid;
            width: 500px;
            height: 200px;
            /* 文字水平居中 */
            text-align: center;
            /* 去掉单元格之间的间隙 */
            border-collapse: collapse;
        }

        th,td{
            border: 1px black solid;
        }

    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

        </tbody>

    </table>

    <script>
        /**
         * 数据驱动
        */
        //商品数据
        let products = [
            {id:1,name:"小米耳机",price:1200},
            {id:2,name:"小米平衡车",price:2300},
            {id:3,name:"小米手环",price:2300},
        ]

        let msg = ""
        for(let i=0;i<products.length;i++){
            msg = msg + "<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].price+"</td></tr>"
        }   
        console.log(msg);

        //获取到tbody
        let otbody = document.querySelector("tbody")
        //把字符串以html的形式插入到tboby中间
        otbody.innerHTML = msg
    </script>
</body>
</html>

6 模板字符串

模板字符串是ES6提供的一种新的字符串拼接方式，它解决了字符串拼接难处

使用模板字符串对上个案例的代码进行改进

模板字符串
支持换行,省略手动字符串拼接,当程序运行到${}时,会自动把变量的值加载到字符串中

7 HTML标签的新增和删除(了解)

1)新增HTML标签

方案一：
使用标签的 innerHtml属性

方案二：

    <ul>
        <li>首页</li>
        <li>所有商品</li>
        <li>装饰摆件</li>
        <li>布艺软装</li>
    </ul>

    <script>
        /**
         * html元素的新增
         * 方案一
         *  innerHtml
         * 方案二
         *  createElement
        */

        //拿到无序列表
        let oul = document.querySelector("ul")
        //1.创建一个列表项标签
        let oli = document.createElement("li")
        //2.项li中间插入文本
        oli.innerText="墙饰壁挂"
        console.log(oli);
        //3.把创建的列表项添加到ui列表项的末尾
        oul.append(oli)
    </script>

2)删除HTML节点

    <script>
        /**
         * html元素的删除
        */
        let oli2 = document.querySelector("#li2")
        oli2.remove()
    </script>

8 关系节点的获取（了解）

属性名	说明
parentElement	获取父节点
children	获取所有子节点
firstElementChild	获取第一个子节点
lastElementChild	或取最后一个子节点
previousElementSibling	获取前一个兄弟节点
nextElementSibling	获取后一个兄弟节点

购物车案例

通过某个节点获取到关系节点,通过下图中标记的单元格,获取它所在行所有单元格的数据

<!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>
        table{
            border: 1px black solid;
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }
        th,td{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>创意现代</td>
                <td>601</td>
                <td class="target">100</td>
            </tr>
            <tr>
                <td>复古花瓶</td>
                <td>99</td>
                <td>1000</td>
            </tr>
        </tbody>
    </table>

    <script>
        //1.获取到目标节点
        let otarget = document.querySelector(".target")
        //2.获取父节点
        let parent1 = otarget.parentElement
        console.log(parent1);
        //3.获取到父节点的所有子节点
        let children1 = parent1.children
        console.log(children1[0]);
        console.log(children1[1]);
        console.log(children1[2]);
    </script>
</body>
</html>

金霖海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day20-DOM节点操作

DOM，全称为:“Document Object Model"(文档对象模型)，当浏览器载入一个HTML文档后，浏览器会将所有的标签整合到document对象上面。比如，对于以下HTML文档:浏览器加载完该文档后，生成的DOM结构为:在DOM (Document Object Model)中,每一个元素、元素属性、元素中的文本等都叫做节点:(1)文档是一个文档节点。(2)所有的HTML元素都是元素节点。(3)所有HTML属性都是属性节点。(4)HTML元素中的文本是文本节点。
复制链接

扫一扫

专栏目录