第14章 0402-常用DOM操作-PHP课程网总结-前端部分-郭俊杰的知识库

第14章 0402-常用DOM操作

Data: 2021-07-08 04:47:40Form: JournalClick: 1

问题集合：

1. js提示用的哪个插件？

答：vscode已内置js语言提示，不用安装

2. grid 内容过多怎么自动换行啊？

答：autofill

3. 请问下这里为什么加了div就变成一行了？

答：

4. 什么时候用绝对定位，什么时候用相对定位呢？

答：看你的元素是否准备脱离文档流，以及相对于什么进行定位，如果相对于原来的位置，那么就是相对定位，如果是相对于父级，那就用绝对定位（前提是父级是定位元素），没有什么是绝对的，还是看你的需求

5. 我传的是实参，问问能不能吧实参里面的数组打散？把后面的数组变成这样

答：console.log(a,b,...c);

6. 在函数必须使用return 或者说在什么情况下用？

答：看你的需求，比如说sum()你是想求和，你如果后续需要使用这个结果，那你就得返回出来，如果你只是想看看结果，那你就可以直接在sum()函数中打印

7. 我想用下面一句替换上面一句，红框里面那俩花括号应该怎么写呀?

答：console.log(`${i}=${person[i]}`);

demo1：获取表单元元素

    <style>
        .login {
            width: 15em;
            border: 1px solid #888;
            border-radius: 0.5em;
            box-shadow: 5px 5px 5px #888;
            display: grid;
            grid-template-columns: 3em 1fr;
            margin: auto;
            gap: 0.5em 1em;
        }
                .login legend {
            padding: 0 0.5em;
            text-align: center;
            margin-bottom: 0.5em;
            font-weight: bolder;
        }
                .login button {
            grid-column: 2;
        }
                .login button:hover {
            cursor: pointer;
            background-color: lightcyan;
        }
    </style>
    <form action="login.php" method="post" id="login">
        <fieldset class="login">
            <legend>请登录</legend>
            <label for="email">邮箱:</label>
            <input type="email" name="myemail" value="admin@php.cn" autofocus />
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" value="123456" />
            <button>提交</button>
        </fieldset>
    </form>
    <script>
        // let form = document.querySelector('#login');
        // console.log(form);
        // let email = form.querySelector('#email');
        // console.log(email);
        // console.log(email.value);
        // let form = document.forms[0];
        // console.log(form.method);
        // 对于forms来说,索引与id同义
        // let form = document.forms['login'];
        // let form = document.forms.login;
        // console.log(form);
        // 可以直接使用input的name属性来匹配表单控件元素
        // email
        // console.log(form.email.value);
        // console.log(document.forms.login.myemail.value);
        // 控件可以用name来引用,如果没有name,就用id
        // let email = form.querySelector('#email');
        // console.log(email);
        // console.log(email.value);
        let email = document.forms.login.myemail.value;
        let password = document.forms.login.password.value;

        let user = {
            email,
            password,
        };

        console.log(JSON.stringify(user, null, 2));
    </script>

demo2：遍历dom树

<ul class="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
    </ul>

    <script>
        // DOM: D->document, O->object, M: modal
        // 1. 节点: 元素,文本,属性,注释,文档
        // 用户通常只关注元素类型的节点
        let ul = document.querySelector('.list');
        console.log(ul);
        console.log(ul.children);
        console.log([1, 2, 3, 4]);

        // 2. 类数组: '类': 类似,像数组,但不是真的数组
        // 类数组特征:
        // 1. 具有从0开始递增的正整数索引
        // 2. 具有length属性, 表示成员数量
        console.log(Array.isArray(ul.children));

        // 类数组 -> 真数组
        // 1. Array.from()
        console.log(Array.isArray(Array.from(ul.children)));
        // 2. ...rest
        console.log(...ul.children);
        console.log([...ul.children]);
        console.log(Array.isArray([...ul.children]));
        // [...ul.children].forEach(item => (item.style.color = 'red'));

        // 遍历
        let firstEle = document.querySelector('.list>.item:first-of-type');
        console.log((firstEle.style.color = 'red'));
        firstEle = ul.children[0];
        console.log((firstEle.style.color = 'blue'));
        //获取第一个子元素
        ul.firstElementChild.style.background = 'yellow';
        // 最后一个
        ul.lastElementChild.style.background = 'coral';
        // ul.children[1].style.background = 'lightgreen';
        // document.querySelector('.item.two').style.background = 'red';
        // 第2个是第1个下一个兄弟元素:nextElementSibling
        ul.firstElementChild.nextElementSibling.style.background = 'cyan';

        // 前一个兄弟元素:previousElementSibling
        ul.lastElementChild.previousElementSibling.style.background = 'pink';

        // 父节点: 必须是元素
        console.log(ul.lastElementChild.parentNode);
        ul.lastElementChild.parentNode.style.border = '5px solid';
    </script>

demo3：元素的增删改

<script>
        // 1. 创建元素,在内存
        const ul = document.createElement('ul');

        // 2. 将新元素渲染/挂载/添加html中: append
        document.body.append(ul);

        // 3. 为ul添加内容:列表项 <li>
        for (let i = 0; i < 5; i++) {
            const li = document.createElement('li');
            // 为元素添加文本
            li.textContent = 'item' + (i + 1);
            ul.append(li);
        }

        // 查看某个元素的html表示
        console.log(ul.outerHTML);

        // 4. 在节点之前插入: before
        const li = document.createElement('li');
        // 为元素添加文本
        li.textContent = '新元素<li>';
        li.style.color = 'red';
        // 插入点
        document.querySelector('li:nth-of-type(3)').before(li);

        // 5. 后面插入  after
        let li1 = li.cloneNode(true);
        console.log(li1);
        document.querySelector('li:nth-of-type(4)').after(li1);

        // 6. 在父节点的标签位置,为插入点,进入插入
        // insertAdjacentElement('插入位置', 元素)
        // 插入位置有四个
        // afterBegin: 开始标签之后,第一个子元素
        // beforeBegin: 开始标签之前,是它的前一个兄弟元素
        // afterEnd: 结束标签之后,它的下一个兄弟元素
        // beforeEnd: 结束标签之前,它的最后一个子元素
        ul.style.border = '1px solid';
        const h3 = document.createElement('h3');
        h3.textContent = '商品列表';
        // ul.insertAdjacentElement('beforeBegin', h3);

        // ul.insertAdjacentElement('beforeEnd', h3);

        // 7. 替换
        const last = ul.lastElementChild;
        console.log(last);
        const a = document.createElement('a');
        a.href = 'https://www.php.cn';
        a.textContent = 'php中文网';
        ul.replaceChild(a, last);

        // 8 . 删除
        ul.lastElementChild.remove();
    </script>

demo4：js操作元素内容

<div class="box">
        <style>
            h2 {
                color: red;
            }
        </style>
        <h2>通知</h2>
        <span style="display: none">试用期员工不参加</span>
        <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
    </div>

    <script>
        const box = document.querySelector('.box');
        // textContent: 返回元素以及后代元素中的所有文本内容,包括 <style>, display:none的内容
        // console.log(box.textContent);
        // innerText: 返回元素以及后代中的文本,不包括 style,display:none
        // console.log(box.innerText);
        // innerHTML: 返回内部的html字符串,可以被解析成html元素
        console.log(box.innerHTML);
    </script>

demo5：dom实战:留言板 ToDoList

<input type="text" onkeydown="addMsg(this)" placeholder="请输入内容" autofocus />
    <ul class="list"></ul>

    <script>
        function addMsg(ele) {
            // console.log(event);
            // console.log(event.key);
            if (event.key === 'Enter') {
                // 1. 获取显示留言的容器
                const ul = document.querySelector('.list');

                // 2. 判断用户留言是否为空
                if (ele.value.trim().length === 0) {
                    alert('留言不能为空');
                    ele.focus();
                    return false;
                }
                // 3. 添加一条新留言
                const li = document.createElement('li');
                // console.log(ele.value);
                // li.textContent = ele.value;
                li.innerHTML = ele.value + '<button onclick="del(this.parentNode)">删除</button>';

                // if (ul.firstElementChild !== null) {
                //     ul.firstElementChild.before(li);
                // } else {
                //     ul.append(li);
                // }

                ul.insertAdjacentElement('afterBegin', li);

                // 4. 将输入框中的前一条留言清空
                ele.value = null;
                // 5. 焦点重置
                ele.focus();
            }
        }

        // 删除
        function del(ele) {
            // console.log(ele);
            // ele.remove();

            // ele.outerHTML = null;
            // if (confirm('是否删除?')) {
            //     ele.remove();
            // } else {
            //     return false;
            // }

            return confirm('是否删除?') ? ele.remove() : false;
        }
    </script>

demo6：自定义属性

<!-- 
      * 元素属性有二类:
      * 1. 内置的预定义属性, 如 id, class,title,style等
      * 2. 用户自定义属性,主要用于js脚本控制, 以 "data-""为前缀,如 data-key 
     -->

    <!-- data-: 自定义属性的前缀 -->
    <div class="user" data-my-email="zhulaoshi@php.cn">猪老师</div>
    <script>
        const div = document.querySelector('.user');
        // console.log(div.email);
        // console.log(div.getAttribute('email'));
        // 对于自定义属性中的蛇形命名,必须手动转换成小驼峰
        console.log(div.dataset.myEmail);
    </script>