Web APIs 学习归纳4---节点操作

         前面学习了基本的元素的获取,属性样式的设置等等内容。现在学习新的知识点---节点。

一、为什么学节点操作

        首先明确,节点操作的使用目的是什么?节点操作的意义还是获取元素对象。

        以前我们获取的方法,是直接使用DOM的内置方法直接抓取对应的类名、标签类型的对象。没有逻辑性。

        节点操作更讲究逻辑性,划分父、子、兄弟节点,来寻找选中对象。

        所以什么时候用?当然是有具体的父子级关系的时候使用最方便,不必再去抓取父级标签对象。

二、 节点概述

        网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。

        注意:标签、属性、文本(含文字、空格、换行等)、注释都算是节点。

        一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个 基本属性。

        元素节点 nodeType 为 1 ;属性节点 nodeType 为 2 ;文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等);

        我们可以看出,除去属性和文本之外,DOM树的主干还是元素。 

三、  节点层级

3.1 父级节点

node.parentNode 

        parentNode 属性可返回某节点的父节点,注意是最近的一个父节点。

        如果指定的节点没有父节点则返回 null。

3.2 子节点

parentNode.childNodes(标准)

        parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。

        注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。如果只想要获得里面的元素节点,则需要专门处理。 所以我们一般不提倡使用childNodes。

parentNode.children(非标准)

         parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返 回 (这个是我们重点掌握的)。

        同时,可以获取第一个和最后一个子节点。

        注意:是所有节点,而不是元素!!!!

//firstChild 返回第一个子节点,找不到则返回null。
parentNode.firstChild
//astChild 返回最后一个子节点,找不到则返回null。
parentNode.lastChild

        所以使用一下方法获取子元素:

parentNode.firstElementChild 
//firstElementChild 返回第一个子元素节点,找不到则返回null。
parentNode.lastElementChild 
//lastElementChild 返回最后一个子元素节点,找不到则返回null。

3.3 兄弟节点

node.nextSibling
//nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
node.previousSibling 
//previousSibling 返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。

四、 节点创建

document.createElement('tagName')

        document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在, 是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

五、节点添加

        何时会用到添加节点?一般是给父节点添加子节点。

        1. node.appendChild(child)

        node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

        2. node.insertBefore(child, 指定元素)

ul.insertBefore(li, ul.children[0]);

        node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

六、 节点删除

        node.removeChild(child)

        node.removeChild() 方法从 DOM 中删除一个子节点,返回删除的节点。

七、 节点复制

        node.cloneNode()

        node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点 5.6 复制节点(克隆节点)

        注意:

        1. 如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。

        2. 如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        var li = ul.children[0].cloneNode();
        ul.appendChild(li);
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

</html>

 

八、综合案例1---留言板        

        思路分析:1、需要获取按钮对象、textarea对象、ul对象、链接a对象。2、对按钮绑定事件,每次点击发布,创建一个新的 li 对象,存入textarea对象的内容,并增加一个链接后面。同时使用inertbefore 将新的li 插入到ul.children的第一个之前 。3、选出所有的a,如果a被点击了,则从ul中removeChild(a对象.parentNode),注意a对象.parentNode就是点击的a所在的li。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function () {
            if (text.value == '') {
                alert('您未输入内容,无法发布');

            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                // href = 'javascript:void(0)'  或者 href = 'javascript:;'防止跳转
                li.innerHTML = text.value + "<a href='javascript:void(0)'>删除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                // (3) 删除元素 删除的是当前链接的li  它的父亲
                var as = document.querySelectorAll('a');
                for (let i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode);
                    }

                }
            }
        }
    </script>
</body>

</html>

九、 综合案例2 --- 生成动态表格

        案例分析:1、用thead装表头,用tbody装信息。2、创建datas以数组的形式保存数据。3、获取tbody对象。4、每一次循环,创建新的行tr,并插入tbody。5、再创建新的内部循环,读取datas【】内部的内容,每存在一个内容,创建一个新的td,去存放,插入tr。4、捕获删除链接,如果点击了,就获取该链接的付清节点,然后从tbody中删除。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

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

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
        // 2. 往tbody 里面创建行: 有几个人(通过数组的长度)我们就创建几行
        var tbody = document.querySelector('tbody');
        for (let i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);

            for (let k in datas[i]) {
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);

            }
            var td = document.createElement('td');
            td.innerHTML = "<a href='javascript:;'>删除</a>"
            tr.appendChild(td);
        }

        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
        // for(var k in obj) {
        //     k 得到的是属性名
        //     obj[k] 得到是属性值
        // }
    </script>
</body>

</html>
  • 42
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: APIs IQ-FMEA软件使用手册是一个详细的说明文档,它向用户介绍了使用APIs IQ-FMEA软件的必要步骤和注意事项。 该手册包含了软件的安装、启动和配置过程的详细说明,同时详细介绍了软件的功能和操作界面。用户可以根据手册的指导,逐步了解软件的各项功能和操作方法,并能够快速地使用它来进行FMEA分析。 手册的主要内容包括:软件的基本界面和菜单栏介绍,FMEA分析的基本概念和步骤,创建FMEA项目的方法和注意事项,如何输入和管理FMEA数据,对FMEA数据进行分析和评估的方法,以及如何导出和分享FMEA分析结果等。 除此之外,手册还包括了一些常见问题的解答和故障排除方法,以便用户在使用软件时遇到问题时能够进行及时的解决和应对。 总之,APIs IQ-FMEA软件使用手册全面、系统地介绍了该软件的使用方法和注意事项,对于使用该软件进行FMEA分析的用户来说,具有非常重要的参考价值。 ### 回答2: APIs IQ-FMEA是一款风险分析软件,主要用于产品设计、生产和维护过程中的风险分析。软件使用手册主要介绍了APIs IQ-FMEA软件的安装、如何建立FMEA档案,如何填写FMEA,并对分析结果进行解释。 首先,用户需要正确安装APIs IQ-FMEA软件,并按照软件提供的流程和步骤建立FMEA档案。在建立FMEA档案之前,用户需要了解所分析的系统和产品的全貌,明确其特点、功能、原理和性能指标。FMEA档案建立好之后,用户需要按照FMEA表格的要求填写相应内容,包括零部件名称、功能要求、失效模式、失效后果、失效严重性等内容。针对各项分析指标,用户需要逐一填写,确保准确、完整。 在填写FMEA过程中,需要注意一些问题。例如,失效模式应尽可能地详尽和准确地描述,失效后果应根据实际情况分析,而非猜疑和臆测,失效严重性的分类与分值应根据相关标准和经验进行判定。此外,一定要对不确定的分析指标进行标识,确保再次分析和修正。 分析结束之后,用户可以根据得出的FMEA结果进行分析和解释。软件提供了多种图表和统计分析方法,可以帮助用户快速了解和评估分析结果。用户可以根据得到的结果进行相应的改进和优化,确保产品和系统的质量和可靠性。 总之,APIs IQ-FMEA是一款非常实用的风险分析软件,使用手册详细介绍了软件的使用流程和技巧,能够帮助用户更准确地进行风险分析和评估。在正式使用前,用户需要认真阅读和理解使用手册,并进行充分的培训和实践,以确保软件能够发挥最大的效益。 ### 回答3: APIs IQ-FMEA软件使用手册(中文)是一本非常重要的参考书籍,用于帮助用户了解如何使用该软件生成FMEA报告。该软件旨在帮助用户减少或消除产品或过程中可能出现的故障或缺陷,从而提高质量和可靠性,降低成本。 该软件使用手册涵盖了软件的全部功能。这包括创建FMEA的工作流程,FMEA的输出和分析,以及生成和管理FMEA报告的功能。在阅读完该手册后,用户将具备以下技能: 1. 使用软件创建FMEA:用户将学会如何使用该软件的各种功能来创建FMEA。这包括建立控制计划、识别可能失效模式、评估失效影响以及制定纠正措施等。 2. 分析FMEA的输出数据:用户将学会如何使用APIs IQ-FMEA软件的输出数据来评估失效模式、失效影响和措施效果。用户将了解如何使用该软件提供的分析工具来识别优先处理的故障模式、降低潜在风险并提高生产效率。 3. 生成和管理FMEA报告:用户将学会如何使用该软件生成FMEA报告并管理相关的文件。该手册提供了有关如何使用自定义模板和生成多种报告格式,包括Word、Excel、PDF等的详细指南,以及如何管理版本控制和FMEA报告的权限等。 总之,APIs IQ-FMEA软件使用手册(中文)是一本很有价值的参考书籍。它将帮助用户掌握该软件并创建高质量的FMEA报告,从而提高产品或过程的质量和可靠性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值