0基础学Web—节点操作、发表神评妙论、事件添加和移除、事件冒泡和事件捕获
节点操作
创建节点
<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>