Home > List of blog posts > DOM增删改，留言板添加自定义样式

Blogger Information

Blog 35

fans 0

comment 0

visits 17010

Special Recommendation

More>

Related recommendations

一、dom增删改的常用方法

1. 常用接口

createElement(ele)创建新元素，document上调用。
append(string/ele)追加到父级最后的子节点之后，在父节点上调用。
before(string/ele)在某元素之前插入节点，在当前元素上调用。
after(string/ele)在某元素之后插入节点，在当前元素上调用。
cloneNode(true)克隆节点（true：包含子节点），在被克隆的节点上调用。
replaceChild(ele,pos)替换子元素，在父级节点上调用。
remove(ele)移除子元素，在父节点上调用。

...
    <script>
    ...
    // 创建元素,创建好的元素在内存中，没有被浏览器渲染。
        const ul = document.createElement('ul');
        // 通过追加元素来显示
        document.body.append(ul);
        for(let i=0; i < 5; i++){
            const li = document.createElement('li');
            li.append('item-'+(i+1));
            ul.append(li);
        }
        // 在某节点前插入
        const li = document.createElement('li');
        li.append('new item');
        li.style.color = 'red';
        // 获取第三个节点
        const item = ul.querySelector('li:nth-of-type(3)');
        // 追加语法：当前节点.before(新节点)
        item.before(li);
        // 克隆节点,true表示连带元素内容一起克隆。
        let newNode = li.cloneNode(true);
        //插入到item之后
        item.after(newNode);
    ...
    </script>
...

insertAdjacentElement(‘插入位置’,元素)
插入位置有四个
- afterBegin：开始标签之后，第一个子元素。
- beforeBegin：开始标签之前，是他的前一个兄弟元素。
- afterEnd：结束标签之后，他的下一个兄弟元素。
- beforeEnd：结束标签之前，他的最后一个子元素。

...
    <script>
    ...
        const h3 = document.createElement('h3');
        h3.append('商品列表');
        ul.insertAdjacentElement('beforebegin',h3);
        ul.insertAdjacentHTML('afterbegin','<li>hello</li>'); 
        ul.insertAdjacentHTML('beforeend','<li>hello beforeend</li>'); 
        ul.insertAdjacentHTML('afterend','<h4>共计九个</h4>');
        // 替换，在父节点调用，parentNode.replaceChild（新节点，旧节点）
        const xoldNode = ul.querySelector('li:last-of-type'); //旧节点
        const xnewNode = document.createElement('a'); //新节点
        xnewNode.href = 'www.php.cn';
        xnewNode.append('php中文网');
        ul.replaceChild(xnewNode,xoldNode);
    ...
    </script>
...

...
    <script>
    ...
        // 移除
        ul.firstElementChild.remove();
        ul.lastElementChild.remove();
        ul.querySelector('li:nth-of-type(3)').remove();
        ul.querySelector('li:nth-of-type(4)').remove();
    ...
    </script>
...

2. 内容修改

基础html代码

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

2.1 textContent使用实例

...
    <script>
    ...
        const box = document.querySelector('.box');
        //textContext返回所有内容，包括style、display：none等部分
        console.log('%c' + box.textContent,'color:red');
    ...
    </script>
...

2.2 innerText

...
    <script>
    ...
        // innerText仅输出内容，不包括style和display：none那些。
        console.log('%c' + box.innerText,'color:blue');
    ...
    </script>
...

2.3 innerHTML

...
    <script>
    ...
        // innerHTML比textContext还多一些HTML标签，输出内容可以直接被浏览器渲染显示。
        console.log('%c' + box.innerHTML,'color:violet');
    ...
    </script>
...

首选textContent，innerHTML，innerText是2016年才成为w3c标准。

...
    <script>
    ...
        // 对比textContent和innerHTML的效果
        let p1 = document.createElement('p');
        p1.textContent = '<a href="www.php.cn">php中文网</a>';
        box.append(p1);
        let p2 = document.createElement('p');
        p2.innerHTML = '<a href="www.php.cn">php中文网</a>';
        box.append(p2);
    ...
    </script>
...

2.4 outerHTML

...
    <script>
    ...
        // box类型是对象
        console.log(typeof box);
        console.log(box);
        // box.outerHTML输出类型是字符串
        console.log(typeof box.outerHTML);
        console.log(box.outerHTML);
    ...
    </script>
...

...
    <script>
    ...
        // 元素box调用outerHTML的效果
        box.outerHTML = '<h3 style="color:red">Hello</h3>';
    ...
    </script>
...

元素box调用outerHTML的效果,相当于h3替换了box。所以删除一个元素可以如下写法:
...
    <script>
    ...
        //删除一个元素box
        box.outerHTML = null;
    ...
    </script>
...

二、留言板案例

...
<body>
    <!-- onkeydown:按键触发事件 -->
    <input type="text" onkeydown="addMsg(this)" placeholder="请输入留言" autofocus>
    <ul class="list"></ul>
    <script>
        function addMsg(ele) {
            console.log(ele);
            if(event.key === 'Enter'){
                // 1. 留言非空验证
                if(ele.value.length === 0){
                    alert('留言不能为空');
                    // 重置焦点
                    ele.focus();
                    return false;
                }
                // 2. 添加留言
                console.log(ele.value);
                const ul = document.querySelector('.list');
                ele.value = ele.value + '<button onclick="del(this.parentNode)">删除</button>';
                ul.insertAdjacentHTML('afterbegin',`<li>${ele.value}</li>`);
                // 3. 清空输入框
                ele.value = null;
            }
        }
        function del(dparentNode){
            console.log(dparentNode);
            // return confirm('是否删除？') ? dparentNode.remove(): false;
            return confirm('是否删除？') ? (dparentNode.outerHTML = null): false;
        }
    </script>
</body>
...

输入三个值

删除一个3

点击确定删除

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0810-变量引用、字符串函数

2022-08-29 13:47:39