首页 > 博客列表 > DOM增删改，留言板添加自定义样式

博主信息

博文 35

粉丝 0

访问量 28991

专题推荐

更多>

一、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

点击确定删除

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2022-08-29 13:47:39