获取——操作——元素

最新推荐文章于 2024-01-16 18:21:29 发布

s_meng_

最新推荐文章于 2024-01-16 18:21:29 发布

阅读量546

点赞数 1

分类专栏：前端 DOM 文章标签： javascript dom html css

本文链接：https://blog.csdn.net/s_meng_/article/details/118767422

版权

前端同时被 2 个专栏收录

39 篇文章 3 订阅

订阅专栏

DOM

8 篇文章 0 订阅

订阅专栏

本文介绍了如何通过ID、类名和标签获取DOM元素，演示了属性获取与修改的两种方法，并通过留言板和动态表格案例展示节点操作，包括添加、删除和复制节点。深入理解了HTML、CSS和JavaScript在动态网页开发中的应用。

摘要由CSDN通过智能技术生成

获取元素

通过ID获取元素

document.getElementById('ID选择器');

通过类名获取元素

document.getElementByClassName('类选择器');

通过标签获取元素

document.getElementByTagName('标签');

通用获取元素

document.querySelector('选择器');获取第一个与之匹配的元素;
document.querySelectorAll('选择器');获取所有匹配的元素;

获取特殊的元素(html. body)

document.body; 返回body元素;
document.documentElement; 返回html元素;

获取和修改属性

获取属性

// 获取属性
	Element.属性;
	Element.getAttribute('属性');

修改属性

	// 修改属性
	Element.属性 = '值';
	Element.setAttribute('要修改的属性', '修改的值');

两种方法的区别

	// 获取属性
	Element.属性;
	Element.getAttribute('属性');
	// 修改属性
	Element.属性 = '值';
	Element.setAttribute('要修改的属性', '修改的值');
	// 前者用于获取或修改元素的内置属性,后者用于自定义属性

移除属性

Element.removeAttribute('要移除的属性');

节点操作

获取节点

节点的属性值

Element.nodetype可以来得到节点的属性值;
常用节点的属性值:
元素节点: 1;
属性节点: 2;
文本节点: 3;

获取父节点

Element.parentNode;

获取子节点

通常使用的是获取子元素节点;

	  Element.childNodes; // 获取所有的子节点
      Element.children; // 获取所有的子元素节点

      Element.firstChild; // 获取第一个子节点
      Element.lastChild; // 获取最后一个子节点

      Element.firstElementChild == Element.children[0]; // 获取第一个子元素节点
      Element.lastElementChild == Element.children[length - 1]; // 获取最后一个子元素节点

获取兄弟节点

        Element.nextSibling; // 获取下一个节点
        Element.previousSibling; // 获取上一个节点
		
		// 常用获取元素节点
        Element.nextElementSibling; // 获取下一个元素节点
        Element.previousElementSibling; // 获取上一个元素节点

创建节点

我们可以通过创建节点，添加节点动态的调整html的结构；
document.createElement('要创建的节点');
document.innerHTML = '标签';

添加节点

在元素的后边添加节点:
node.appendChild('元素'); node表示父节点，元素表示要添加的子节点；
在指定元素前面添加节点:
node.inSetBefore(要添加的节点, 指定元素);

删除节点

node.removeChild(child);

复制节点

node.cloneNode();
当括号内的值为空或者false时，称为浅拷贝，表示只拷贝节点，不拷贝节点内的内容；
当括号内的值为true时，称为深拷贝，表示将这个节点的所有都拷贝，包括节点内的内容；

案例

案例一: 留言板案例

留言板考察的是对于节点的增加与删除，在元素的前面或者后面添加节点。

<!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>
        textarea {
            outline: none;
            resize: none;
            color: #ccc;
        }

        li {
            width: 20em;
            line-height: 1.5;
            background-color: pink;
            margin-bottom: 1em;
        }

        a {
            float: right;
            margin-right: .7em;
            color: #9768e2;
            text-decoration: none;
        }

        .input {
            color: #000;
        }
    </style>
</head>

<body>
    <textarea name="" id="input" cols="30" rows="10">评论时请注意用语规范...</textarea>
    <button>发布</button>
    <a href=""></a>
    <ul class="leave"> </ul>

    <script>
        let input = document.querySelector('#input');
        let leave = document.querySelector('.leave');
        let btn = document.querySelector('button');

        // 重置文本框内容
        input.addEventListener('focus', function () {
            input.className = 'input';
            if (input.value == '评论时请注意用语规范...') {
                input.value = '';
            }
        })

        input.addEventListener('blur', function () {
            input.className = '';
            if (input.value == '') {
                input.value = '评论时请注意用语规范...';
            }
        })

        // 发布评论或删除
        btn.addEventListener('click', function () {
            let txt = input.value;
            // 发布评论
            if (txt == '' || txt == '评论时请注意用语规范...') {
                alert('请输入内容');
            } else {
                // 创建li标签
                let li = document.createElement('li');
                // 给li添加删除标签,将文本框的内容给li
                li.innerHTML = txt + "<a href='javascript:;'> 删除 </a>";
                // leave.appendChild(li); // 在元素的后边添加标签
                leave.insertBefore(li, leave.children[0]); // 在元素的前面添加标签
                // 发布完评论后让文本框的内容恢复
                txt = '评论时请注意用语规范...';
            }


            // 删除评论
            let as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].addEventListener('click', function () {
                    // 删除节点 node.removeChild(child);
                    // a是li的子节点,想要删除评论就需要删除li,所以是删除点击元素的父亲=li
                    leave.removeChild(this.parentNode);
                })
            }
        })
    </script>
</body>

</html>

案例二: 动态表格

因为还没有学习导入数据，就直接在代码中保存数据。
考察的依旧是对于元素节点的增删.

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        table,
        th,
        tr,
        td {
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
        }

        th {
            /* width: 80px; */
            height: 40px;
            padding: 0 10px;
        }

        td {
            height: 30px;
            padding: 0 15px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
    	// 创建数据
        var dates = [{
            name: '小明',
            subject: 'JavaScript',
            source: '100'
        }, {
            name: '小红',
            subject: 'JavaScript',
            source: '80'
        }, {
            name: '小白',
            subject: 'JavaScript',
            source: '90'
        }, {
            name: '小黑',
            subject: 'JavaScript',
            source: '88'
        }];

        let tbody = document.querySelector('tbody');


        for (var i = 0; i < dates.length; i++) {
        	// 创建节点
            let tr = document.createElement('tr');
            // 添加节点
            tbody.appendChild(tr);
            for (var k in dates[i]) {
                // 输入数据,将数组的数据给td表格
                var td = document.createElement('td');
                td.innerHTML = dates[i][k];
                tr.appendChild(td);
            }
            // 创建删除列的td单元格
            var td = document.createElement('td');
            td.innerHTML = "<a href='javaScript:;'>删除</a>";
            tr.appendChild(td);
        }

        // 创建删除链接
        let as = document.querySelectorAll('a');

        for (var i = 0; i < as.length; i++) {
            as[i].addEventListener('click', function () {
                // 点击元素的父亲是td,但是需要删除整行,需要删除的是tr,所以this.parentNode.parentNode=tr
                tbody.removeChild(this.parentNode.parentNode);
            })
        }
    </script>
</body>

</html>

好了，今天复习的就这么多了，喜欢的话就收藏起来吧。

s_meng_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
获取——操作——元素

文章目录获取元素通过ID获取元素通过类名获取元素通过标签获取元素通用获取元素获取特殊的元素(html. body)获取和修改属性获取属性修改属性两种方法的区别移除属性节点操作获取节点节点的属性值获取父节点获取子节点获取兄弟节点创建节点添加节点删除节点复制节点案例案例一: 留言板案例案例二: 动态表格获取元素通过ID获取元素document.getElementById('ID选择器');通过类名获取元素document.getElementByClassName('类选择器');通过标签获取元素
复制链接

扫一扫