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.valueif (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>
