JavaScript 学习总结（3） --- 操作DOM对象

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

送小孩喝稠酒

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

阅读量178

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_44823091/article/details/97270417

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JavaScript 学习总结（3）— 操作DOM对象

HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

1.DOM对象简介

DOM（Document Object Model）：文档对象模型。

所谓文档对象模型，其实就是对网页HTML中的各种元素的一种内部的表示，例如HTML中的头、段落、列表、风格、ID等，所有的元素都能通过DOM来访问。

结构为：
DOM是一个树形结构。操作一个DOM节点实际上就是以下几个操作：
- 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
- 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
- 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
- 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

2. 节点

在讲对DOM的操作之前。先清楚节点的概念及节点之间的关系。

在DOM 中，每个部分都是节点：
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
节点与节点之间的关系：
获取节点：

在操作一个DOM节点前，我们需要先拿到这个DOM节点。最常用的方法是上篇文档（JavaScript–操作BOM对象）中讲到的方法：document.getElementById()和document.getElementsByTagName()等。

节点属性：

属性名称	说明
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个节点
nextChild	下一个节点
previousSibling	上一个节点

节点信息：

节点信息	说明
nodeName	节点名称
nodeValue	节点值
nodeType	节点类型

节点类型	nodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档docunment	9

案例：获取并查看节点信息

<body>
    <ul id="NodeList">
        <li>AAAAAA</li>
        <li>BBBBBB</li>
        <li>BBBBBB</li>
    </ul>

    <script>
        var res = document.getElementById("NodeList").firstChild;
        console.log(res);
        console.log(res.nodeType);
    	console.log(res.nodeName);
    	console.log(res.nodeValue);
    </script>
</body>

在这里插入图片描述

3. element对象

在 DOM 中，element 对象表示 HTML 元素。

element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

element属性：

属性名称	说明
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个节点
nextElementChild	返回节点的下一个节点
previousElementSibling	返回节点的上一个节点

案例：使用element属性获取子元素

<body>
    <section id="news">
        <header>喜报</header>
        <ul>
            <li>
                <a href="">恭喜A:获得阿里巴巴offer</a>
                <a href="">恭喜A2:获得阿里巴巴offer</a>
            </li>
            <li><a href="">恭喜B:获得腾讯offer</a></li>
            <li><a href="">恭喜C:获得百度offer</a></li>
            <li><a href="">恭喜D:获得网易offer</a></li>
            <li><a href="">恭喜E:获得浦发银行offer</a></li>
        </ul>
    </section>
    <script>
        // //获取元素
        var info = document.getElementById("news").lastElementChild.firstElementChild.lastElementChild;
        console.log(info);
        document.write(info.innerHTML);    
	</script>
</body>

在这里插入图片描述

说明：

 /*
 console.log : 用来调试打印对象 . 可以打印所有东西
 document.write : 只能写入Html元素

 [object Text] : 文本对象 , 无法直接写网页中 , 会出现一个未定义 .
 [object HTMLElement] : 网页元素对象,可以直接调用innerHtml写入网页 .
 * */

4. 操作节点

获取到节点后，就可以操作一个节点。对一个DOM节点有以下几个操作：

操作节点属性
创建和插入节点
删除和替换节点
操作节点样式
获取元素的样式

4.1 操作节点属性

节点的属性操作有得到（get）节点属性和设置（set）节点属性，格式为:

getAttribute（"属性名"）；

setAttribute("属性名","属性值")；

案例：获得节点属性和设置节点属性。

<body>
    <a href="#" id="tt" style="">操作节点属性</a>
   
   <script>
        var t = document.getElementById("tt").getAttribute("href");
        console.log(t);
                document.getElementById("tt").setAttribute("href","https://www.baidu.com");
        t = document.getElementById("tt").getAttribute("href");
        document.getElementById("tt").setAttribute("style","border: 10px dashed black");
        console.log(t);
    </script>
</body>

在这里插入图片描述

4.2 创建和插入节点

创建一个新节点：

createElement(tagName);：创建一个标签名为tagName的新元素节点。
插入节点：

名称说明
A.appendChild(B); 把B节点追加到A节点的末尾
insertBefore(A,B); 把A节点插入到B节点之前
复制节点：

cloneNode(deep);：复制某个指定的节点。

名称	说明
A.appendChild(B);	把B节点追加到A节点的末尾
insertBefore(A,B);	把A节点插入到B节点之前

案例：创建和插入节点

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            font-size: 20px;
            font-family: "微软雅黑";
            line-height: 30px;
        }

        /*设置将要选择的书的图片的属性*/
        div{
            padding: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        选择你喜欢的书 :<br>
        <input type="radio" name="book" onclick="book()">剑指Offer
        <input type="radio" name="book" onclick="book()">深入理解Java虚拟机
    </p>

    <script>
        /*操作节点*/
        function book() {
            /*获取节点信息*/
            var ele = document.getElementsByName("book");
            var bName = document.getElementsByTagName("div")[0];
            //console.log(ele);
            if (ele[0].checked){
                // 动态创建一个节点
                var img = document.createElement("img");
                // 需要给节点设置属性
                img.setAttribute("src","images/1.png");
                img.setAttribute("alt","剑指Offer");
                // 给他安排一个位置
                bName.appendChild(img);
            }
            if (ele[1].checked){
                var img = document.createElement("img");
                img.setAttribute("src","images/2.png");
                img.setAttribute("alt","深入理解Java虚拟机");
                bName.appendChild(img);
            }
        }
    </script>
</body>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20190725161148165.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODIzMDkx,size_16,color_FFFFFF,t_70)

在这里插入图片描述

4.3 删除和替换节点

方法：

方法说明
removeChild(node) 删除节点
replaceChild(newNode,oldNode) 属性attr 用新的节点替换指定的旧节点

方法	说明
removeChild(node)	删除节点
replaceChild(newNode,oldNode) 属性attr	用新的节点替换指定的旧节点

案例：删除了插入节点

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            padding: 0px;
            margin: 0px;
            font-size: 20px;
        }
        ul li{
            list-style: none;
        }
        li{
            float:left;
            text-align: center;
        }

    </style>

</head>
<body>

<ul>

    <li>
        <img src="images/1.png" alt="剑指Offer" id="first">
        <p><input type="button" value="删除我" onclick="del()"></p>
    </li>
    <li>
        <img src="images/2.png" alt="深入理解Java虚拟机" id="second">
        <p><input type="button" value="替换我" onclick="rep()"></p>


</ul>

<script>

    function del() {
        var delImg = document.getElementById("first");
        delImg.parentNode.removeChild(delImg);
    }

    function rep() {
        var oldImg = document.getElementById("second");
        var newImg = document.createElement("img");
        newImg.setAttribute("src","images/1.png");
        oldImg.parentNode.replaceChild(newImg,oldImg);
    }
</script>
</body>