【Web】0基础学Web—节点操作、发表神评妙论、事件添加和移除、事件冒泡和事件捕获

最新推荐文章于 2025-05-30 15:39:29 发布

.眠北.

最新推荐文章于 2025-05-30 15:39:29 发布

阅读量1.2k

点赞数 22

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/2201_75539182/article/details/144893073

版权

0基础学Web—节点操作、发表神评妙论、事件添加和移除、事件冒泡和事件捕获

节点操作
发表神评妙论案例
- css
- body
- js
事件添加和移除
- 事件监听
事件冒泡和捕获

节点操作

创建节点

<script>
	let _div = document.createElement('div')
</script>

末尾追加子节点

append(…nodes)

<script>
        document.body.append(_div)
        let _div2 = document.createElement('div')
        _div.append(_div2)
        _div2.innerText = '张三'
</script>

插入节点

insertBefore(前，后)

<script>
    let _p = document.createElement('p')
    _p.innerText = 'Web'
    _div.insertBefore(_p, _div2)
</script>

将一个节点插入到一个父元素的最前面

<script>
    let _p2 = document.createElement('p')
    _p2.innerText = '学习'
    _div.insertBefore(_p2, _div.firstElementChild)
</script>

删除节点

<script>
	_p.remove()     //自我删除
	_div.removeChild(_p)   //父元素删除子元素
</script>

替换节点

replaceChild(替换,被替换)

<script>
    let _div3 = document.createElement('div')
    _div3.innerText = '替换'
    //  _div.replaceChild(_div3,_div2)
    _div2.replaceWith(_div3)
</script>

发表神评妙论案例

css

<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
.wrapper {
    width: 350px;
    position: relative;
}
textarea {
    width: 350px;
    height: 150px;
    /* 去掉缩放 */
    resize: none;
    border-radius: 8px;
    outline: none;
    padding: 4px 0 0 4px;
}
.send {
    width: 80px;
    height: 30px;
    background-color: #7a70e2;
    border: none;
    color: white;
    border-radius: 40px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.send:disabled {
    opacity: 0.5;
}
ul li {
    width: 280px;
    position: relative;
    /* word-wrap: break-word; */
    overflow-wrap: break-word;
}
ul li:hover{
    background-color: #e9e9e9;
}
ul li button {
    border: none;
    display: none;
    background-color: white;
    width: 40px;
    position: absolute;
    right: 0;
}
ul li:hover button{
    display: inline-block;
}
ul li button:hover {
    display: inline-block;
    background-color: rgb(148, 148, 148);
}
</style>

body

<body>
    <div class="wrapper">
        <textarea class="comment" placeholder="发表神评妙论"></textarea>
        <button class="send" disabled>发表</button>
    </div>
    <ul class="list">
        <li>66666666666666666666666666666666666666666666666666666666666666666666<button onclick="del(this)">删除</button></li>
    </ul>
</body>

js

<script>
    let _comment = document.querySelector('.comment')
    let _send = document.querySelector('.send')
    let _list = document.querySelector('.list')
    //按钮启用禁用
    _comment.oninput = function () {
        let info = _comment.value
        if (info.length > 0) {
            _send.disabled = false  //启用
        } else {
            _send.disabled = true  //禁用
        }
    }
    _send.onclick = function () {
        let _li = document.createElement('li')
        _list.insertBefore(_li, _list.firstElementChild)
        _li.innerHTML = _comment.value + "<button class='del' οnclick='del(this)'>删除</button>"
        _comment.value = ''  //发表后清空
        _send.disabled = true  //禁用
    }
    function del(ele) {
        if (confirm('确认删除吗?')) {
            ele.parentElement.remove()
        }
    }
</script>

事件添加和移除

事件监听

事件监听，可以同时添加多个监听事件
addEventListener(‘事件名’,‘处理函数’,bool)

<style>
    .wrapper>div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
</style>



<body>
    <div class="wrapper">
        <div class="first"></div>
        <div class="second"></div>
    </div>
    <script>
        let _first = document.querySelector('.first')
        let _second = document.querySelector('.second')
        _first.onclick = function () {
            console.log(11)
        }
        // 后者覆盖前者
        _first.onclick = function () {
            _first.style.backgroundColor = 'red'
        }

        _second.addEventListener('click', function () {
            console.log(66)
        })
        _second.addEventListener('click', function () {
            _second.style.backgroundColor = 'red'
        })
    </script>
</body>

事件冒泡和捕获

addEventListener(‘事件名’,‘处理函数’,bool=false)
false:事件冒泡
true:事件捕获
事件冒泡,事件由子元素传递到父元素
事件捕获,事件由父元素捕获到子元素
阻止事件冒泡 event.stopPropagation()

<style>
    .outter {
        width: 200px;
        height: 200px;
        background-color: #cb1919;
    }
    .inner {
        width: 100px;
        height: 100px;
        background-color: #222dc5;
    }
</style>


<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
    <a href="http://www.baidu.com">删除</a>
    <script>
        let _outter = document.querySelector('.outter')
        let _inner = document.querySelector('.inner')
        //
        _inner.addEventListener('click', function (event) {
            console.log('inner')
            event.stopPropagation()  //阻止事件冒泡
        }, false)

        _outter.addEventListener('click', function () {
            console.log('outter')
        }, false)

        //给 a添加事件
        let _a = document.querySelector('a')
        _a.onclick = function (event) {
            console.log('阻止默认事件')
            event.preventDefault()  //阻止默认事件
            // return false  //阻止默认事件
        }
    </script>
</body>